快速瞭解vue-cli 3.0 新特性
vue-cli 是 vue 官方團隊推出的一款快速開發 vue 專案的構建工具，具有開箱即用並且提供簡潔的自定義配置等功能。 vue-cli 從 2.0 到 3.0 的升級有太多的新東西可以說了，但是不可能在本文中列舉所有的內容，這篇文章作為一個對比 2.0 升級功能的導讀，讓你快速瞭解 3.0 更新的內容。
一.建立專案：
建立專案命令的變化。
|
1 |
|
3.0 版本包括預設預設配置 和 使用者自定義配置。
自定義功能配置包括以下功能：
- TypeScript
- Progressive Web App (PWA) Support
- Router
- Vuex
- CSS Pre-processors
- Linter / Formatter
- Unit Testing
- E2E Testing
可以注意到 3.0 版本直接新加入了 TypeScript 以及 PWA 的支援。
在選擇 CSS 預處理後會提示選擇哪一種前處理器：
- SCSS/SASS
- LESS
- Stylus
以及 eslint 規範的選擇：
- ESLint with error prevention only
- ESLint + Airbnb config
- ESLint + Standard config
- ESLint + Prettier
最後選擇 Babel, PostCSS, ESLint 等自定義配置的存放位置：
- In dedicated config files
- In package.json
選擇好後，可以把以上配置儲存為預設值，以後通過 vue-cli 建立的其他專案將都採用剛才的配置。
二. 專案目錄結構變化：
我們對比發現 vue-cli 3.0 預設專案目錄相比 2.0 來說精簡了很多。
- 移除了配置檔案目錄， config 和 build 資料夾。
- 移除了 static 資料夾，新增 public 資料夾，並且 index.html 移動到 public 中。
- 在 src 資料夾中新增了 views 資料夾，用於分類 檢視元件 和 公共元件。
三.移除了配置檔案目錄後如何自定義配置。
從 3.0 版本開始，在專案的根目錄放置一個 vue.config.js 檔案, 可以配置該專案的很多方面。
vue.config.js 應該匯出一個物件，例如：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
調整 webpack 配置最簡單的方式就是在 vue.config.js 中的 configureWebpack 選項提供一個物件，該物件將會被 webpack-merge 合併入最終的 webpack 配置。
示例程式碼：配置 webpack 新增一個外掛。
|
1 2 3 4 5 6 7 8 |
|
修改外掛選項的引數你需要熟悉 webpack-chain 的 API 並閱讀一些原始碼以便了解如何權衡這個選項的全部配置項，但是它給了你比直接修改 webpack 配置中的值更靈活且安全的方式。
// vue.config.js
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
return [/* new args to pass to html-webpack-plugin's constructor */]
})
}
}
注意：當我們更改一個webpack配置時候，可以通過 vue inspect > output.js 輸出完整的配置清單，注意它輸出的並不是一個有效的 webpack 配置檔案，而是一個用於審查的被序列化的格式。
四. ESLint、Babel、browserslist 相關配置：
Babel 可以通過 .babelrc 或 package.json 中的 babel 欄位進行配置。
ESLint 可以通過 .eslintrc 或 package.json 檔案中的 eslintConfig 欄位進行配置。
你可能注意到了 package.json 中的 browserslist 欄位指定了該專案的目標瀏覽器支援範圍。
五. 關於 public 目錄的調整。
vue 約定 public/index.html 作為入口模板會通過 html-webpack-plugin 外掛處理。在構建過程中，資源連結將會自動注入其中。除此之外，vue-cli 也自動注入資源提示( preload/prefetch ), 在啟用 PWA 外掛時注入 manifest/icon 連結, 並且引入(inlines) webpack runtime / chunk manifest 清單已獲得最佳效能。
在 JavaScript 或者 SCSS 中通過 相對路徑 引用的資源會經過 webpack 處理。放置在 public 檔案的資源可以通過絕對路徑引用，這些資源將會被複制，而不經過 webpack 處理。
小提示：圖片最好使用相對路徑經過 webpack 處理，這樣可以避免很多因為修改網站根目錄導致的圖片404問題。
六. 新增功能：
1. 對 TypeScript 的支援。
在 3.0 版本中，選擇啟用 TypeScript 語法後，vue 元件的書寫格式有特定的規範。
示例程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
以上程式碼相當於
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
|
更多詳細內容請關注 這裡 ；
2. 對 PWA 的支援。
當我們選擇啟用 PWA 功能時，在打包生成的程式碼時會預設生成 service-worker.js 和 manifest.json 相關檔案。如果你不瞭解 PWA， 點選這裡檢視 ;
需要注意的是 在 manifest.json 生成的圖示資訊，可以在 public/img 目錄下替換。
預設情況 service-worker 採用的是 precache ，可以通過配置 pwa.workboxPluginMode 自定義快取策略。詳情
配置示例
|
1 2 3 4 5 6 7 8 9 10 11 12 |
|
總結：
vue-cli 致力於將 Vue 生態中的工具基礎標準化。它確保了各種構建工具能夠基於智慧的預設配置即可平穩銜接，這樣你可以專注在編寫你的應用上，而不必花好幾天去糾結配置的問題。與此同時，它也為每個工具提供了調整配置的靈活性。