(1)使用vite創(chuàng)建
什么是vite(https://cn.vitejs.dev/guide/)
Vite(法語(yǔ)意為 "快速的",發(fā)音 /vit/
奔垦,發(fā)音同 "veet")是一種新型前端構(gòu)建工具,能夠顯著提升前端開發(fā)體驗(yàn)。它主要由兩部分組成:
一個(gè)開發(fā)服務(wù)器痘绎,它基于 原生 ES 模塊 提供了 豐富的內(nèi)建功能房铭,如速度快到驚人的 模塊熱更新(HMR)茂契。
一套構(gòu)建指令,它使用 Rollup 打包你的代碼耍贾,并且它是預(yù)配置的,可輸出用于生產(chǎn)環(huán)境的高度優(yōu)化過(guò)的靜態(tài)資源路幸。
Vite 意在提供開箱即用的配置逼争,同時(shí)它的 插件 API 和 JavaScript API 帶來(lái)了高度的可擴(kuò)展性,并有完整的類型支持劝赔。
- vite是一個(gè)更加輕量(熱更新速度快誓焦,打包構(gòu)建速度快)的vue項(xiàng)目腳手架工具。
- 相對(duì)于vue-cli它默認(rèn)安裝的插件非常少着帽,隨著開發(fā)過(guò)程依賴增多杂伟,需要自己額外配置。
如何創(chuàng)建vue3項(xiàng)目
cmd打開終端仍翰,輸入指令
npm init vite 項(xiàng)目名稱
按enter鍵會(huì)彈出
create-vite
OK to proceed? Y/n (選y按enter鍵赫粥,這是第一次使用vite創(chuàng)建項(xiàng)目會(huì)彈出,不是第一次創(chuàng)建的不會(huì)彈出)
enter之后會(huì)彈出選擇的框架予借,這里我們選擇vue(上下鍵選擇)
選擇項(xiàng)目語(yǔ)言
項(xiàng)目創(chuàng)建成功
依次根據(jù)提示進(jìn)入項(xiàng)目目錄越平,隨后安裝依賴
最后運(yùn)行項(xiàng)目
vite默認(rèn)安裝的插件非常少,還有一些其他需要自己額外配置灵迫。(router)
使用cnpm i vue-router 安裝router秦叛,隨后在main.js里進(jìn)行配置
在src文件夾里創(chuàng)建router文件夾并且創(chuàng)建一個(gè)index.js文件,在index里配置路由
基本配置完成
(2)使用vue-cli創(chuàng)建
cmd打開終端瀑粥,輸入指令
vue create 項(xiàng)目名稱
選擇自定義選擇安裝預(yù)置
根據(jù)自己所需選擇(空格選中挣跋,上下鍵挑選)
選中vue3項(xiàng)目
根據(jù)自己所需選擇
選擇less作為CSS預(yù)處理器
根據(jù)自己所需選擇
創(chuàng)建成功
vue-cli與vite 優(yōu)缺點(diǎn)
vue-cli
優(yōu)點(diǎn):經(jīng)歷過(guò)戰(zhàn)斗考驗(yàn),可靠狞换、與 Vue 2 兼容避咆、可以捆綁任何類型的依賴關(guān)系、插件生態(tài)系統(tǒng)修噪、可以針對(duì)不同的目標(biāo)進(jìn)行構(gòu)建
缺點(diǎn):開發(fā)服務(wù)器速度與依賴數(shù)量成反比
vite
優(yōu)點(diǎn):開發(fā)服務(wù)器比 Webpack 快 10-100 倍查库、將 code-splitting 作為優(yōu)先事項(xiàng)
只能針對(duì)現(xiàn)代瀏覽器(ES2015+)
缺點(diǎn):與 CommonJS 模塊不完全兼容、處于測(cè)試階段黄琼,僅支持 Vue 3樊销、最小的腳手架不包括 Vuex、路由器等、不同的開發(fā)服務(wù)器與構(gòu)建工具