近日卫袒，Vue的作者尤雨溪在Medium上宣布正式發(fā)布Vue CLI 3.0宵呛，它也將為很多開發(fā)者帶來期待已久的新特性。
豐富的內(nèi)置功能
尤雨溪表示夕凝，Vue CLI 3.0與其他的版本完全不同烤蜕，它經(jīng)歷了重構(gòu)，目的是：
1.盡可能減少現(xiàn)代前端工具在配置上的煩惱迹冤，尤其是在開發(fā)者將多個(gè)工具混合使用時(shí)讽营；
2.盡可能在工具鏈中加入最佳實(shí)踐，并讓其成為Vue應(yīng)用程序的默認(rèn)實(shí)踐泡徙。
Vue CLI的核心目標(biāo)是為基于webpack 4構(gòu)建的預(yù)配置構(gòu)建提供設(shè)置橱鹏，目標(biāo)是最大限度地減少開發(fā)人員配置的次數(shù)，所以Vue CLI 3對(duì)具有以下特點(diǎn)的項(xiàng)目都支持開箱即用：
預(yù)配置webpack功能，如模塊熱替換莉兰、代碼拆分挑围、 搖樹優(yōu)化（tree-shaking）、高效持久化緩存等糖荒；
通過Babel 7 + preset-env（Babel插件）對(duì) ES2017進(jìn)行轉(zhuǎn)換和基于使用情況注入polyfill
支持PostCSS（默認(rèn)啟用autoprefixer）和所有主要的CSS預(yù)處理器
Modern mode：并行發(fā)布原生ES2017 +bundle和傳統(tǒng)bundle（詳情如下）
多頁面模式：構(gòu)建具有多個(gè)HTML / JS入口點(diǎn)的應(yīng)用程序
構(gòu)建目標(biāo)：將Vue單文件組件構(gòu)建成為庫或原生Web組件（詳情如下）
此外杉辙，你可以在創(chuàng)建新項(xiàng)目時(shí)混合選用多種集成：
TypeScript
PWA
Vue Router & Vuex
ESLint / TSLint / Prettier
用Jest或Mocha進(jìn)行單元測(cè)試
用Cypress 或者 Nightwatch進(jìn)行E2E 測(cè)試
而且，Vue CLI能確保上述所有功能可以很好地協(xié)同使用捶朵。
無需eject即可配置
上面列出的所有功能都支持零配置：利用Vue CLI 3構(gòu)建項(xiàng)目時(shí)蜘矢，它會(huì)安裝Vue CLI運(yùn)行時(shí)服務(wù)（@ vue / cli-service），選擇功能插件综看，生成必要的配置文件品腹。也就是說，你只需要專注于你的代碼即可红碑。
CLI工具去掉潛在的依賴關(guān)系的同時(shí)舞吭，通常也會(huì)喪失對(duì)這些依賴關(guān)系進(jìn)行微調(diào)的能力，因此析珊，用戶通常必須“eject”羡鸥，以便進(jìn)行更改。這樣做的缺點(diǎn)是忠寻，一旦彈出惧浴，從長遠(yuǎn)來看，你將無法升級(jí)到最新版本的工具了锡溯。
尤雨溪認(rèn)為以低級(jí)形式訪問configs 具有很重要的意義赶舆，但他不想拋棄那些“eject”的用戶哑姚，所以他找出了一種無需彈出的配置方法祭饭。
對(duì)于Babel、TypeScript和PostCSS等第三方集成來說叙量，Vue CLI會(huì)尊重這些工具的配置文件倡蝙。webpack用戶可以使用webpack-merge將簡單對(duì)象合并到最終配置中，或通過webpack-chain進(jìn)行精確定位和調(diào)整現(xiàn)有的加載器和插件绞佩。
此外寺鸥，Vue CLI附帶vue inspect命令可幫助你檢查內(nèi)部Webpack配置。最大的好處是品山，只需小調(diào)整不需eject胆建，你仍可以升級(jí)CLI service和插件進(jìn)行修復(fù)或更新
可擴(kuò)展的插件系統(tǒng)
Vue CLI 3插件系統(tǒng)非常強(qiáng)大：它可以在應(yīng)用程序的scaffolding階段注入依賴項(xiàng)和文件，并調(diào)整應(yīng)用程序的webpack配置肘交，或在開發(fā)期間向CLI service注入其他命令笆载。大多數(shù)像TypeScript這樣的內(nèi)置集成都使用plugin API實(shí)現(xiàn)插件功能，
而且，Vue CLI 3不再有“template”凉驻， 相反腻要，現(xiàn)在你可以進(jìn)行遠(yuǎn)程設(shè)置，與其他開發(fā)人員共享你的插件和選項(xiàng)涝登。
圖形用戶界面(GUI）
得益于Guillaume CHAU（Vue.js核心團(tuán)隊(duì)）的出色表現(xiàn)雄家，Vue CLI 3還附帶了一個(gè)完整的GUI，不僅可以創(chuàng)建新項(xiàng)目胀滚，還可以管理項(xiàng)目中的插件和任務(wù)趟济，例如：
它不需要Electron，只需用vue ui啟動(dòng)它蛛淋。
注意：雖然Vue CLI 3已處于穩(wěn)定版本咙好，但UI仍處于測(cè)試階段，后續(xù)會(huì)持續(xù)更新褐荷。
Instant Prototyping
有時(shí)我們需要即時(shí)訪問工作環(huán)境以獲得新靈感勾效，此時(shí)等待npm install就成為了困擾的事。使用Vue CLI 3的vue serve命令叛甫，你只需要啟用Vue單文件組件就可進(jìn)行原型設(shè)計(jì)：
更多功能
Modern Mode
有了Babel层宫，你可以使用ES2015 +中所有最新的語言功能，但這也意味著我們需要轉(zhuǎn)譯和polyfill bundle以支持舊版本的瀏覽器其监。這些轉(zhuǎn)換后的包通常比原始的原生ES2015 +代碼更冗長萌腿，解析和運(yùn)行速度也更慢。鑒于今天大多數(shù)現(xiàn)代瀏覽器都支持原生ES2015 +代碼抖苦，因此它也必須支持較舊的代碼毁菱，但對(duì)瀏覽器來說，運(yùn)行這種低效率的代碼是一種浪費(fèi)锌历。
用“Modern Mode”可幫你解決此問題贮庞。在構(gòu)建時(shí)，使用以下命令：
vue-cli-service build --modern
Vue CLI將生成兩個(gè)版本的應(yīng)用程序：一個(gè)是支持ES模塊的現(xiàn)代瀏覽器的現(xiàn)代軟件包究西，以及一個(gè)不支持ES模塊的舊版瀏覽器的舊版軟件包窗慎。
生成的HTML文件自動(dòng)采用Phillip Walton帖子中討論的技術(shù)：
< script type="module" >可在支持它的瀏覽器中加載現(xiàn)代軟件包； 也可用< link rel="modulepreload" >進(jìn)行預(yù)加載卤材；
加載舊版的軟件包可以使用< script nomodule >遮斥，支持ES模塊的瀏覽器會(huì)自動(dòng)忽略該軟件包。
< script nomodule >的修復(fù)程序在Safari 10會(huì)自動(dòng)注入扇丛。
對(duì)于Hello World應(yīng)用程序术吗，現(xiàn)代軟件包已經(jīng)縮小了16％。在實(shí)際應(yīng)用中帆精，現(xiàn)代軟件包通常會(huì)顯著加快解析和評(píng)測(cè)速度较屿，從而提高應(yīng)用程序的加載性能
我們沒有將 modern mode作為默認(rèn)設(shè)置的原因是材蹬，如果使用CORS / CSP，你需要更長的構(gòu)建時(shí)間和一些額外的配置吝镣。
構(gòu)建Web組件
現(xiàn)在堤器，你可以在Vue CLI 3項(xiàng)目中將任何*.vue組件構(gòu)建成Web組件：
vue-cli-service build --target wc --name my-element src/MyComponent.vue
這將生成一個(gè)JavaScript包，它將內(nèi)部Vue組件包裝末贾，并注冊(cè)為頁面上的原生自定義元素闸溃，然后可以將其看做作< my-element >。
你甚至可以將多個(gè)*.vue組件構(gòu)建到具有多塊代碼拆分的包中：
vue-cli-service build --target wc-async 'src/components/*.vue'
在生成的包中包含一個(gè)小的入口文件拱撵，它將所有組件注冊(cè)為原生自定義元素辉川，但只有在頁面上首次實(shí)例化相應(yīng)的自定義元素，才能獲取底層Vue組件的代碼拴测。
使用Vue CLI 3乓旗，還可以使用相同的代碼庫來構(gòu)建應(yīng)用程序、UMD庫或原生Web組件集索。
最后屿愚，尤雨溪表示，Vue CLI 3現(xiàn)在可作為Vue應(yīng)用程序的標(biāo)準(zhǔn)構(gòu)建工具务荆，但這僅僅是個(gè)開始妆距。如上所述，Vue CLI的長期目標(biāo)是將當(dāng)前和未來的最佳實(shí)踐融入工具鏈中函匕，最終為用戶提供高性能的應(yīng)用程序娱据。
查看英文原文：https://medium.com/the-vue-point/vue-cli-3-0-is-here-c42bebe28fbb
