升級VueCli3的理由:
1.構建速度大大加快,之前看到一個升級的例子是2的3倍速度,具體可以在自己遷移一個項
目測試下,這里的優化有默認開啟了多核構建、緩存
並行和緩存
2.webpack被內置到@vue/cli-service,可以升級,其他服務基於插件注入,比如babel、TypeScript
插件
vue add @vue/eslint
安裝@vue/cli-plugin-eslint
//不帶@vue可以安裝第三方插件,比如我們熟知的element-ui
vue add apollo
安裝並調用 vue-cli-plugin-apollo
PS:這里注意的是,我們安裝這些插件是為了將相關配置導入我們項目,不能取代npm包,比如安裝了
vue add element
如果沒安裝element-ui就沒法使用
3.在項目根目錄下建一個vue.config.js文件即可,這里提下create-react-app,如果需要修改webpack配置,需要執行reject命令把webpack文件暴露出來,而VueCli3可以自動合並vue.config.js配置到webpack中去,而且vue.config.js支持webpack-chain寫法,可以更加方便
eg: 跨域
4.提供了TypeScript PWA 支持內置支持,在vue create命令時可以自由選擇,構建項目完畢后還可以手動添加對於的插件來添加
5.對於代碼規范 提供了ESlint結合prettier 支持 npm run lint 一鍵修復風格,對於風格,可以在.eslinttec.js中修改
eg: 不使用分號風格
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命令,官方提供了一個方法解決
(同時運行CLI2和CLI3的方法)[https://cli.vuejs.org/zh/guide/creating-a-project.html#拉取-2-x-模板-舊版本]