重磅！Vue CLI 3.0正式發布，帶來多項重大更新

編譯｜覃雲

近日，Vue 的作者尤雨溪在 Medium 上宣布正式發布 Vue CLI 3.0，它也將為很多開發者帶來期待已久的新特性。

豐富的內置功能

尤雨溪表示，Vue CLI 3.0 與其他的版本完全不同，它經歷了重構，目的是：

儘可能減少現代前端工具在配置上的煩惱，尤其是在開發者將多個工具混合使用時；

儘可能在工具鏈中加入最佳實踐，並讓其成為 Vue 應用程序的默認實踐。

Vue CLI 的核心目標是為基於 webpack 4 構建的預配置提供構建設置，目標是最大限度地減少開發人員配置的次數，所以 Vue CLI 3 對具有以下特點的項目都支持開箱即用：

預配置 webpack 功能，如模塊熱替換、代碼拆分、 搖樹優化（tree-shaking）、高效持久化緩存等；

通過 Babel 7 + preset-env（Babel 插件）對 ES2017 進行轉換和基於使用情況注入 polyfill

支持 PostCSS（默認啟用 autoprefixer）和所有主要的 CSS 預處理器

Modern mode：並行發布原生 ES2017 +bundle 和傳統 bundle（詳情如下）

多頁面模式：構建具有多個 HTML / JS 入口點的應用程序

構建目標：將 Vue 單文件組件構建成為庫或原生 Web 組件（詳情如下）

此外，你可以在創建新項目時混合選用多種集成：

TypeScript

PWA

Vue Router & Vuex

ESLint / TSLint / Prettier

用 Jest 或 Mocha 進行單元測試

用 Cypress 或者 Nightwatch 進行 E2E 測試

而且，Vue CLI 能確保上述所有功能可以很好地協同使用。

無需eject即可配置

上面列出的所有功能都支持零配置：利用 Vue CLI 3 構建項目時，它會安裝 Vue CLI 運行時服務（@ vue / cli-service），選擇功能插件，生成必要的配置文件。也就是說，你只需要專註於你的代碼即可。

CLI 工具去掉潛在的依賴關係的同時，通常也會喪失對這些依賴關係進行微調的能力，因此，用戶通常必須「eject」，以便進行更改。這樣做的缺點是，一旦彈出，從長遠來看，你將無法升級到最新版本的工具了。

尤雨溪認為以低級別形式訪問 configs 具有很重要的意義，但他不想拋棄那些「eject」的用戶，所以他找出了一種無需eject的配置方法。

對於 Babel、TypeScript 和 PostCSS 等第三方集成來說，Vue CLI 會尊重這些工具的配置文件。webpack 用戶可以使用 webpack-merge 將簡單對象合併到最終配置中，或通過 webpack-chain 進行精確定位和調整現有的載入器和插件。

此外，Vue CLI 附帶 vue inspect 命令可幫助你檢查內部 Webpack 配置。最大的好處是，只需小調整不需eject，你仍可以升級 CLI service 和插件進行修復或更新。

可擴展的插件系統

Vue CLI 3 插件系統非常強大：它可以在應用程序的 scaffolding 階段注入依賴項和文件，並調整應用程序的 webpack 配置，或在開發期間向 CLI service 注入其他命令。大多數像 TypeScript 這樣的內置集成都使用 plugin API （https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/PluginAPI.js）實現插件功能。

而且，Vue CLI 3 不再有「template」， 相反，現在你可以進行遠程設置，與其他開發人員共享你的插件和選項。

圖形用戶界面 (GUI）

得益於 Guillaume CHAU（Vue.js 核心團隊）的出色表現，Vue CLI 3 還附帶了一個完整的 GUI，不僅可以創建新項目，還可以管理項目中的插件和任務，例如：

它不需要 Electron，只需用啟動它。

注意：雖然 Vue CLI 3 已處於穩定版本，但 UI 仍處於測試階段，後續會持續更新。

Instant Prototyping

有時我們需要即時訪問工作環境以獲得新靈感，此時等待 npm install 就成為了困擾的事。使用 Vue CLI 3 的 vue serve 命令，你只需要啟用 Vue 單文件組件就可進行原型設計：

更多功能

Modern Mode

有了 Babel，你可以使用 ES2015 + 中所有最新的語言功能，但這也意味著我們需要轉譯和 polyfill bundle 以支持舊版本的瀏覽器。這些轉換後的包通常比原始的原生 ES2015 + 代碼更冗長，解析和運行速度也更慢。鑒於今天大多數現代瀏覽器都支持原生 ES2015 + 代碼，因此它也必須支持較舊的代碼，但對瀏覽器來說，運行這種低效率的代碼是一種浪費。

用「Modern Mode」可幫你解決此問題。在構建時，使用以下命令：

Vue CLI 將生成兩個版本的應用程序：一個是支持 ES 模塊的現代瀏覽器的現代軟體包，以及一個不支持 ES 模塊的舊版瀏覽器的舊版軟體包。

生成的 HTML 文件自動採用 Phillip Walton（https://philipwalton.com/articles/deploying-es2015-code-in-production-today/）帖子中討論的技術：

可在支持它的瀏覽器中載入現代軟體包，也可用進行預載入；

載入舊版的軟體包可以使用，支持 ES 模塊的瀏覽器會自動忽略該軟體包；

的修復程序在 Safari 10 會自動注入。

對於 Hello World 應用程序，現代軟體包已經縮小了 16％。在實際應用中，現代軟體包通常會顯著加快解析和評測速度，從而提高應用程序的載入性能。

尤雨溪還表示：

我們沒有將 modern mode 作為默認設置的原因是，如果使用 CORS / CSP，你需要更長的構建時間和一些額外的配置。

構建 Web 組件

現在，你可以在 Vue CLI 3 項目中將任何 *.vue 組件構建成 Web 組件：

這將生成一個 JavaScript 包，它將內部 Vue 組件包裝，並註冊為頁面上的原生自定義元素，然後可以將其看做作。

你甚至可以將多個 *.vue 組件放到具有多塊代碼拆分的包中：

在生成的包中包含一個小的入口文件，它將所有組件註冊為原生自定義元素，但只有在頁面上首次實例化相應的自定義元素，才能獲取底層 Vue 組件的代碼。

使用 Vue CLI 3，還可以使用相同的代碼庫來構建應用程序、UMD 庫或原生 Web 組件。

最後，尤雨溪說，Vue CLI 3 現在可作為 Vue 應用程序的標準構建工具，但這僅僅是個開始。如上所述，Vue CLI 的長期目標是將當前和未來的最佳實踐融入工具鏈中，最終為用戶提供高性能的應用程序。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！