VueCli3新特性


升級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寫法,可以更加方便

vue.config.js配置項

eg: 跨域

4.提供了TypeScript PWA 支持內置支持,在vue create命令時可以自由選擇,構建項目完畢后還可以手動添加對於的插件來添加

5.對於代碼規范 提供了ESlint結合prettier 支持 npm run lint 一鍵修復風格,對於風格,可以在.eslinttec.js中修改

ESlint配置

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-模板-舊版本]


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM