Vue Cli 3 新特性 與 2 的區別

2021-09-24 20:05:49 字數 1686 閱讀 8048

公升級vuecli3的理由:

1.構建速度大大加快,之前看到乙個公升級的例子是2的3倍速度,具體可以在自己遷移乙個項

目測試下,這裡的優化有預設開啟了多核構建、快取

並行和快取

2.webpack被內建到@vue/cli-service,可以公升級,其他服務基於外掛程式注入,比如babel、typescript外掛程式

// 安裝@vue/cli-plugin-eslint

vue add @vue/eslint

//不帶@vue可以安裝第三方外掛程式,比如我們熟知的element-ui

vue add element-ui

ps:這裡注意的是,我們安裝這些外掛程式是為了將相關配置匯入我們專案,不能取代npm包,比如安裝了

vue add element
如果沒安裝element-ui就沒法使用

vue.config.js配置項

4.提供了typescript pwa 支援內建支援,在vue create命令時可以自由選擇,構建專案完畢後還可以手動新增對於的外掛程式來新增

5.對於**規範 提供了eslint結合prettier 支援 npm run lint 一鍵修復風格,對於風格,可以在.eslinttec.js中修改

eslint配置

6.預設提供了git 即 git-hook,使用者在建立完專案即可獲得git倉庫,無需自己建立,不過目前我還沒體驗過 = =

git-hook

7.現代模式可以提供乙個只面對現代瀏覽器的版本,和乙個舊瀏覽器的回退版本,可以使用 vue-cli-service build --modern執行,大意是之前生成的包要相容舊版本,如果你只需要在新版本瀏覽器上執行,那麼相容**會冗餘,現代模式就可以只為新版本瀏覽器生成**,減少**體積

現代模式

8.提供了視覺化檢視 vue ui命令即可執行,但是作為乙個程式設計師還是習慣命令列,這個沒多看,有興趣可以進去跑跑

// 生成專案

cli2 vue init webpack name

cli3 vue create name

最後cli3會覆蓋cli2命令,官方提供了乙個方法解決

// 全域性安裝乙個橋接工具:

npm install -g @vue/cli-init

# `vue init` 的執行效果將會跟 `[email protected]` 相同

VUE參考 vue cli3與2版本的區別

還是vue2,webpack4 vue cli3是基於webpack4打造,vue cli 2還是webapck 3 0配置 vue cli3的設計原則是 0配置 移除的配置檔案根目錄下的,build和config等目錄 vue ui視覺化配置 vue cli3提供了vue ui命令,提供了視覺化配...

同時安裝Vue CLI2和Vue CLI3的方法

如果你想體驗vue cli3的簡潔清爽,又偶爾需要使用vue cli2,那這篇帖子就是你需要的。配置方法改進於 同一臺電腦 實現 vue cli2和vue cli3同時並存 原方法使用了直接修改檔名的方式,不夠美觀,破壞式的,改進後為透傳呼叫。修改 2019 08 14 原方法使用了直接修改檔名的方...

vue cli3的安裝使用

1 全域性安裝vue cli 使用命令 cnpm install g vue cli npm install g vue cli yarn global add vue cli 注意 nodejs版本應該大於8,否則安裝有問題 2 檢測安裝 使用vue v檢視 1 建立專案 根據自身需求選擇配置,最...