一、vue3的介紹

（一）vue3的簡介

2020年9月18日發(fā)布3.0版本。代號海賊王（One piece）

其中耗時兩年多、2600次提交、30+RFC、600+PR、99位貢獻(xiàn)者

（二）vue3對比vue2帶來的性能提升 

1.更快的渲染速度：Vue 3使用了新的虛擬DOM實(shí)現(xiàn)，可以更快地渲染頁面，減少頁面的閃爍和卡頓。初次渲染快55%，更新渲染快133%

2.更好的TypeScript支持：Vue 3引入了全面的TypeScript支持，包括類型檢查和代碼提示。

3.更好的響應(yīng)式系統(tǒng)：Vue 3的響應(yīng)式系統(tǒng)比Vue 2更加靈活和高效，可以更好地處理嵌套數(shù)據(jù)和響應(yīng)式數(shù)組。

4.更好的組件封裝：Vue 3引入了Composition API，它可以更好地封裝組件的邏輯和狀態(tài)，并使代碼更具可讀性和可維護(hù)性。內(nèi)存減少44%

5.更少的包大?。篤ue 3的核心庫比Vue 2小得多，這意味著更快的下載速度和更少的資源占用。減少41%

6.更好的Tree-Shaking：Vue 3的模塊系統(tǒng)使用ES模塊，可以更好地支持Tree-Shaking。

總的來說，Vue 3在性能、開發(fā)體驗(yàn)和代碼組織方面都有所改進(jìn)，使得它更加適合于大型、復(fù)雜的應(yīng)用程序開發(fā)。 

二、vue3的兩種創(chuàng)建方式

前提條件：需要node版本10以上 

方式一：使用vue-cli創(chuàng)建（推薦--全面）

前提條件

@vue/cli版本在4.5.0以上

查看方式

vue --version

安裝或者升級方式

1.卸載舊的

npm uninstall vue-cli -g

2.安裝新的

npm install -g @vue/cli

操作步驟 

1.創(chuàng)建一個文件夾，選擇在終端打開

 2.vue create命令 +自定義項(xiàng)目名字

 vue create v1

3.上下鍵選擇這個自定義的版本，然后回車

 4.按空格鍵選中，完成后按回車鍵

 5.選擇3的版本回車

 6.選擇y，然后回車鍵

 7.選擇第一個回車

 8.選擇第一個回車

9.是否要把此配置設(shè)置為以后建立項(xiàng)目的默認(rèn)選項(xiàng)，選擇N

 10.按照給出的提示繼續(xù)輸入

 11.建訪完成并創(chuàng)問這個網(wǎng)址

訪問成功 

方式二：使用vite創(chuàng)建

vite是新一代前端構(gòu)建工具

優(yōu)勢：

開發(fā)環(huán)境中，無需打包操作，可快速的冷啟動

輕量快速熱重載

真正的按需編譯，不再等待整個應(yīng)用編譯完成

操作步驟

1.創(chuàng)建一個文件夾，選擇在終端打開

2.輸入npm init vite-app命令  +自定義項(xiàng)目名稱 

npm init vite-app v2

3.選擇y回車

4.根據(jù)提示繼續(xù)輸入命令

5.建立完成啟動訪問網(wǎng)頁

npm run dev

6. 訪問成功

到此這篇關(guān)于vue3的介紹和兩種創(chuàng)建方式(cli和vite)的文章就介紹到這了,更多相關(guān)vue3 cli和vite創(chuàng)建方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！