Vue CLI團隊最近把他們的命令行工具更新到了4.0.0版本。這一版本可以幫助開發者自動化升級過程,可以使用額外的包管理器,並可以更準確更有效移除DOM中多餘的空格。
在Vue CLI 3中,“vue build”命令並不會基於vue.config.js的配置生成manifest.json文件。新版本加入了pwa.manifestOptions配置字段,可以根據配置對象生成manifest.json文件,不需要從項目公共文件夾拷貝這個文件了。這一變更爲Vue PWA的配置管理提供了更爲一致的接口。
在之前的版本中,爲不同的模式運行Vue命令會生成不一樣的目錄佈局。而在最新的版本中,爲所有模式生成的目錄佈局都是一樣的。
在Vue CLI 4中,開發者可以在vue create命令後面通過添加–packageManager [packagename]來指定不一樣的Node包管理器。
要從Vue CLI 3升級到4,需要執行vue upgrade命令。在版本3中,這個命令只會安裝最新的Vue CLI插件。而在版本4中,Vue CLI會運行升級插件,自動進行升級。
現在,在執行vue upgrade命令時,如果CLI發現當前代碼庫裏有未提交的代碼修改,它會與用戶確認。
空格處理也在Vue CLI4中得到了改進。對於以下這個模板:
<p>
Welcome to <b>Vue.js</b> <i>world</i>.
Have fun!
</p>
在Vue CLI 3中,如果preserveWhitespace設置成false就會把這個模板編譯成:
<p> Welcome to <b>Vue.js</b><i>world</i>. Have fun! </p>
這樣會出現不期望的結果:
Welcome to Vue.jsworld. Have fun!
新版本的CLI爲開發者提供了whitespace: 'condense’選項來解決這個問題:
<p> Welcome to <b>Vue.js</b> <i>world</i>. Have fun! </p>
輸出結果正如我們期望的那樣:
Welcome to Vue.js world. Have fun!
新的CLI配置能夠更準確更有效地移除多餘的空格。
最新版的Vue CLI對底層的主要依賴進行了升級。除了core-js-3、Nightwatch 1.x和Jest 24,Vue CLI 4還加入了Mocha 6、workbox-webpack-plugin,等等。
Vue CLI 4的另一個改進是在應用插件的生成器時能夠更好地處理異步操作。Vue CLI 4支持生成器的異步函數。另外,新引入的afterInvoke和afterAnyInvoke鉤子可以監聽插件對另一個插件的調用。
要了解更多有關Vue CLI 4的信息,可以參考Vue CLI升級指南。
Vue CLI基於MIT開源許可協議。開發者可以通過GitHub的vue-cli項目參與貢獻,並遵循Vue CLI貢獻指南。
原文鏈接: