1. 創(chuàng)建3.0項(xiàng)目

vue-cli : 安裝并執(zhí)行 npm init vue@latest

選擇項(xiàng)目功能時(shí)： 除了第一項(xiàng)的項(xiàng)目名字外，其他可以暫時(shí)No

cd title

npm install

npm run dev ：運(yùn)行

npm run build: 打包 (生成一個(gè)dist文件夾)

vite: 使用vite 體驗(yàn)更快速

npm init vite-app title

cd title

npm install

npm run dev

title 代表創(chuàng)建 Vue3 項(xiàng)目的文件夾名稱

Vite 與 Vue-cli 是什么？

Vue-cli 的特點(diǎn)：

是Vue2.0最棒的前端構(gòu)建工具，是WebPack的超集

Vue-cli 基于WebPack構(gòu)建，配置好了打包規(guī)則

內(nèi)置了熱模塊重載的開發(fā)服務(wù)器

有豐富的官方插件合集，站在webpack龐大的社區(qū)資源上

友好的圖形化創(chuàng)建和管理Vue項(xiàng)目界面 : vue ui

vue-cli在(前端)服務(wù)啟動之前，要把所有代碼打包成Bundle再啟動服務(wù)，這也是為什么一個(gè)些大型項(xiàng)目 啟動時(shí)，特別慢的原因。這一點(diǎn)在Vite做了大幅度改善。

Vite 的特點(diǎn)：

Vite是Vue團(tuán)隊(duì)開發(fā)的新一代前端開發(fā)與構(gòu)建工具，vite不是基于webpack,

它為了解決項(xiàng)目啟動慢的問題，vite通過一開始將應(yīng)用中的模塊分為依賴和源碼兩類，改進(jìn)了開發(fā)服務(wù)器的啟動慢的特點(diǎn)；

依賴： 大多為在開發(fā)時(shí)，不會變動的純js，一些較大的依賴(例如有上百個(gè)模塊的組件庫：element-ui) ,處理的代價(jià)很高。依賴通常會存在多種模塊化的格式.vite會使用esbuild預(yù)構(gòu)建依賴，esbuld使用Go編寫，并且比 js編寫的打包器，速度快10-100倍；

源碼： 通常包含一些并非直接是js的文件，需要轉(zhuǎn)換，時(shí)常被編譯。同時(shí)，并不是所有的源碼都需要同時(shí)被加載。(例如：基于路由拆分的代碼模塊)。

以上： 這就是為什么vite啟動快的原因；

Vite 和 Vue-cli的區(qū)別：

1. vite是基于原生Es6 Modules，在生產(chǎn)環(huán)境下打包使用的Rollup；
2. vue-cli基于webpack封裝，生產(chǎn)環(huán)境和開發(fā)環(huán)境都是基于webpack打包；
3. 所以兩者在生產(chǎn)環(huán)境都是基于源代碼的文件打包。
4. 在開發(fā)環(huán)境中，Vite是基于原生的es6，無需對代碼進(jìn)行打包，瀏覽器可以直接調(diào)用，所以說vite因?yàn)榛跒g覽器的原生功能，省掉了打包過程，在開發(fā)環(huán)境中體驗(yàn)極好；
5. vite會取代vue-cli嗎？ 尤雨溪(Evan You)在Twitter上說：
   ? 起初我不確定，但在這個(gè)階段，我相信最終會是這樣。

總結(jié)：

以上就是 vue3 中Vite 和 Vue-cli的特點(diǎn)和區(qū)別。

到此這篇關(guān)于Vue3中Vite和Vue-cli的特點(diǎn)與區(qū)別的文章就介紹到這了,更多相關(guān)Vue3 Vite和Vue-cli區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論