vue 3.0 正式版來了

Vuejs 于2020年9月19日凌晨發(fā)布了代號為One Piece的 3.0 版本。以下簡稱Vue3
跟著官網(wǎng)文檔,我們一起來體驗下新版的魅力。
Vue3官方文檔地址:https://v3.vuejs.org/guide/migration/introduction.html#overview

Vue Devtools

首先是測試工具
谷歌插件(需要翻墻): https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg
火狐插件: https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/
electron桌面應(yīng)用插件: https://github.com/vuejs/vue-devtools/blob/dev/packages/shell-electron/README.md

CDN

出于原型制作或?qū)W習(xí)目的,您可以將最新版本與以下各項配合使用:

<script src="https://unpkg.com/vue@next"></script>

NPM

使用Vue構(gòu)建大型應(yīng)用程序時,建議使用NPM安裝方法。它與WebpackRollup等模塊捆綁器很好地配對。Vue還提供了用于創(chuàng)作單一文件組件的隨附工具。

npm install vue@next

CLI

ue提供了一個官方CLI用于快速搭建單頁應(yīng)用。
對于Vue 3,您應(yīng)該使用Vue CLI v4.5,該版本在上npm提供@vue/cli@next。要升級,您需要在@vue/cli全局范圍內(nèi)重新安裝最新版本:

yarn global add @vue/cli@next
# OR
npm install -g @vue/cli@next

然后在Vue項目中運行

vue upgrade --next

不同版本的說明

dist/NPM軟件包的目錄中,您會找到許多不同的Vue.js版本。

  • 要<script src="...">在瀏覽器中直接使用,請公開Vue全局。

  • 瀏覽器內(nèi)模板編譯:
    vue.global.js 是包含編譯器和運行時的“完整”構(gòu)建,因此它支持即時編譯模板。
    vue.runtime.global.js 僅包含運行時,并要求在構(gòu)建步驟中預(yù)編譯模板。

  • 內(nèi)聯(lián)所有Vue核心內(nèi)部軟件包-即,它是單個文件,不依賴于其他文件。這意味著您必須從該文件導(dǎo)入所有內(nèi)容,并且僅為了確保獲得相同的代碼實例而導(dǎo)入該文件。

  • 包含硬編碼的prod / dev分支,并且prod構(gòu)建已預(yù)先縮小。使用這些*.prod.js文件進(jìn)行生產(chǎn)。

通過腳手架(cli)安裝項目

全局安裝腳手架

npm install -g @vue/cli

查看腳手架版本是否在4.5以上(含4.5)

vue --version

創(chuàng)建項目

vue create hello-vue3

此時終端顯示如下圖


image.png

選擇第二項 Vue 3 Preview ,等待安裝完成。

// 切換目錄
cd hello-vue3

// 運行項目
npm run serve
#or
yarn serve

到此,恭喜你邁入了 Vue 3.0的時代!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容