了解vue3.0有哪些新特性？這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！
vue3.0預(yù)計在2019年下半年左右發(fā)布，vue3.0版本與其他版本完全不同，它大限度的減少了開發(fā)人員配置工具的次數(shù)，另外增添了許多豐富的內(nèi)置功能，還附帶了一個完整的GUI用于創(chuàng)建和管理項目
Vue的作者尤雨溪在Medium上宣布正式發(fā)布Vue CLI 3.0，它也將為很多開發(fā)者帶來期待已久的新特性。
豐富的內(nèi)置功能
尤雨溪表示，Vue CLI 3.0與其他的版本完全不同，它經(jīng)歷了重構(gòu)，目的是：
1、盡可能減少現(xiàn)代前端工具在配置上的煩惱，尤其是在開發(fā)者將多個工具混合使用時；
2、盡可能在工具鏈中加入最佳實踐，并讓其成為Vue應(yīng)用程序的默認(rèn)實踐。
Vue CLI的核心目標(biāo)是為基于webpack 4構(gòu)建的預(yù)配置構(gòu)建提供設(shè)置，目標(biāo)是大限度地減少開發(fā)人員配置的次數(shù)，所以Vue CLI 3對具有以下特點的項目都支持開箱即用：
（1）預(yù)配置webpack功能，如模塊熱替換、代碼拆分、 搖樹優(yōu)化（tree-shaking）、高效持久化緩存等；
（2）通過Babel 7 + preset-env（Babel插件）對 ES2017進行轉(zhuǎn)換和基于使用情況注入polyfill
（3）支持PostCSS（默認(rèn)啟用autoprefixer）和所有主要的CSS預(yù)處理器
（4）Modern mode：并行發(fā)布原生ES2017 +bundle和傳統(tǒng)bundle（詳情如下）
（5）多頁面模式：構(gòu)建具有多個HTML / JS入口點的應(yīng)用程序
（6）構(gòu)建目標(biāo)：將Vue單文件組件構(gòu)建成為庫或原生Web組件（詳情如下）
此外，你可以在創(chuàng)建新項目時混合選用多種集成：
TypeScript
PWA
Vue Router & Vuex
ESLint / TSLint / Prettier
用Jest或Mocha進行單元測試
用Cypress 或者 Nightwatch進行E2E 測試
而且，Vue CLI能確保上述所有功能可以很好地協(xié)同使用。
無需eject即可配置
上面列出的所有功能都支持零配置：利用Vue CLI 3構(gòu)建項目時，它會安裝Vue CLI運行時服務(wù)（@ vue / cli-service），選擇功能插件，生成必要的配置文件。也就是說，你只需要專注于你的代碼即可。
CLI工具去掉潛在的依賴關(guān)系的同時，通常也會喪失對這些依賴關(guān)系進行微調(diào)的能力，因此，用戶通常必須“eject”，以便進行更改。這樣做的缺點是，一旦彈出，從長遠來看，你將無法升級到最新版本的工具了。
尤雨溪認(rèn)為以低級形式訪問configs 具有很重要的意義，但他不想拋棄那些“eject”的用戶，所以他找出了一種無需彈出的配置方法。
對于Babel、TypeScript和PostCSS等第三方集成來說，Vue CLI會尊重這些工具的配置文件。webpack用戶可以使用webpack-merge將簡單對象合并到最終配置中，或通過webpack-chain進行精確定位和調(diào)整現(xiàn)有的加載器和插件。
此外，Vue CLI附帶vue inspect命令可幫助你檢查內(nèi)部Webpack配置。大的好處是，只需小調(diào)整不需eject，你仍可以升級CLI service和插件進行修復(fù)或更新
可擴展的插件系統(tǒng)
Vue CLI 3插件系統(tǒng)非常強大：它可以在應(yīng)用程序的scaffolding階段注入依賴項和文件，并調(diào)整應(yīng)用程序的webpack配置，或在開發(fā)期間向CLI service注入其他命令。大多數(shù)像TypeScript這樣的內(nèi)置集成都使用plugin API實現(xiàn)插件功能，
而且，Vue CLI 3不再有“template”， 相反，現(xiàn)在你可以進行遠程設(shè)置，與其他開發(fā)人員共享你的插件和選項。
圖形用戶界面(GUI）
得益于Guillaume CHAU（Vue.js核心團隊）的出色表現(xiàn)，Vue CLI 3還附帶了一個完整的GUI，不僅可以創(chuàng)建新項目，還可以管理項目中的插件和任務(wù)，例如：
它不需要Electron，只需用vue ui啟動它。
注意：雖然Vue CLI 3已處于穩(wěn)定版本，但UI仍處于測試階段，后續(xù)會持續(xù)更新。
Instant Prototyping
有時我們需要即時訪問工作環(huán)境以獲得新靈感，此時等待npm install就成為了困擾的事。使用Vue CLI 3的vue serve命令，你只需要啟用Vue單文件組件就可進行原型設(shè)計：
更多功能
Modern Mode
有了Babel，你可以使用ES2015 +中所有最新的語言功能，但這也意味著我們需要轉(zhuǎn)譯和polyfill bundle以支持舊版本的瀏覽器。這些轉(zhuǎn)換后的包通常比原始的原生ES2015 +代碼更冗長，解析和運行速度也更慢。鑒于今天大多數(shù)現(xiàn)代瀏覽器都支持原生ES2015 +代碼，因此它也必須支持較舊的代碼，但對瀏覽器來說，運行這種低效率的代碼是一種浪費。
用“Modern Mode”可幫你解決此問題。在構(gòu)建時，使用以下命令：
vue-cli-service build --modern
Vue CLI將生成兩個版本的應(yīng)用程序：一個是支持ES模塊的現(xiàn)代瀏覽器的現(xiàn)代軟件包，以及一個不支持ES模塊的舊版瀏覽器的舊版軟件包。
生成的HTML文件自動采用Phillip Walton帖子中討論的技術(shù)：
< script type="module" >可在支持它的瀏覽器中加載現(xiàn)代軟件包； 也可用< link rel="modulepreload" >進行預(yù)加載；
加載舊版的軟件包可以使用< script nomodule >，支持ES模塊的瀏覽器會自動忽略該軟件包。
< script nomodule >的修復(fù)程序在Safari 10會自動注入。
對于Hello World應(yīng)用程序，現(xiàn)代軟件包已經(jīng)縮小了16％。在實際應(yīng)用中，現(xiàn)代軟件包通常會顯著加快解析和評測速度，從而提高應(yīng)用程序的加載性能
注意：沒有將 modern mode作為默認(rèn)設(shè)置的原因是：如果使用CORS / CSP，則需要更長的構(gòu)建時間和一些額外的配置。
構(gòu)建Web組件
現(xiàn)在，你可以在Vue CLI 3項目中將任何*.vue組件構(gòu)建成Web組件：
vue-cli-service build --target wc --name my-element src/MyComponent.vue
這將生成一個JavaScript包，它將內(nèi)部Vue組件包裝，并注冊為頁面上的原生自定義元素，然后可以將其看做作< my-element >。
你甚至可以將多個*.vue組件構(gòu)建到具有多塊代碼拆分的包中：
vue-cli-service build --target wc-async 'src/components/*.vue'
在生成的包中包含一個小的入口文件，它將所有組件注冊為原生自定義元素，但只有在頁面上首次實例化相應(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)建工具，但這僅僅是個開始。如上所述，Vue CLI的長期目標(biāo)是將當(dāng)前和未來的最佳實踐融入工具鏈中，最終為用戶提供高性能的應(yīng)用程序。
感謝各位的閱讀！看完上述內(nèi)容，你們對vue3.0有哪些新特性大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道。
重慶分公司
重慶分公司
