簡(jiǎn)介

HBuilderX 3.3.0+ 更新uni-app編譯器，支持基于 Vite 編譯到小程序平臺(tái)。

至此，uni-app在App/H5/小程序全平臺(tái)支持Vue 3.0開(kāi)發(fā)，且全平臺(tái)支持Vite編譯器，下載 HBuilderX 3.3.0+ 體驗(yàn)。

Tips：

• H5/PC Web 平臺(tái)：hello-uniapp H5 端已遷移 vue3，點(diǎn)擊體驗(yàn)
• App 平臺(tái)：nvue 暫不支持Vite編譯。

除支持 vue3 語(yǔ)法特性外，uni-app 特有的生命周期鉤子支持 Composition API，如 onLaunch，onShow，onLoad... ，使用方法見(jiàn) Vue2 遷移 Vue3 文檔

HBuilderX創(chuàng)建支持 vue3 的 uni-app 項(xiàng)目

從 HBuilderX 3.3.0+ 起，支持創(chuàng)建 vue3 的 uni-app 項(xiàng)目，一套代碼運(yùn)行到多端：

1. 創(chuàng)建一個(gè) uni-app 項(xiàng)目
2. 在項(xiàng)目的 manifest 的「基礎(chǔ)配置」中切換 「vue 版本選擇」，默認(rèn)是 vue2，切換為 vue3 即可

img

cli 創(chuàng)建支持 vue3 的 uni-app 項(xiàng)目

1. 創(chuàng)建 Vue3/Vite 工程

   復(fù)制代碼# 創(chuàng)建以 javascript 開(kāi)發(fā)的工程  
   npx degit dcloudio/uni-preset-vue#vite my-vue3-project  
   
   # 創(chuàng)建以 typescript 開(kāi)發(fā)的工程  
   npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project  
   

2. 進(jìn)入工程目錄

   復(fù)制代碼cd my-vue3-project  
   

3. 安裝依賴

   復(fù)制代碼npm i  或  yarn  
   

4. 運(yùn)行

   復(fù)制代碼# 運(yùn)行到 h5   
   npm run dev:h5  
   # 運(yùn)行到 app   
   npm run dev:app  
   # 運(yùn)行到 微信小程序  
   npm run dev:mp-weixin  
   

5. 打包

   復(fù)制代碼# 打包到 h5   
   npm run build:h5  
   # 打包到 app   
   npm run build:app  
   # 打包到 微信小程序  
   npm run build:mp-weixin  
   

從 vue2 遷移到 vue3

請(qǐng)參看官方文檔從 vue2 遷移到 vue3

注意事項(xiàng)

• vue3 響應(yīng)式基于 Proxy 實(shí)現(xiàn)，不支持iOS9和ie11。vue3 中文文檔。

• 暫不支持新增的 Teleport,Suspense 組件。

• 在 Vue3 中， 處理 API

Promise 化

調(diào)用結(jié)果的方式不同于 Vue2。

更多

• Vue3 中，調(diào)用成功會(huì)進(jìn)入 then 方法，調(diào)用失敗會(huì)進(jìn)入 catch 方法
• Vue2 中，調(diào)用無(wú)論成功還是失敗，都會(huì)進(jìn)入 then 方法，返回?cái)?shù)據(jù)的第一個(gè)參數(shù)是錯(cuò)誤對(duì)象，第二個(gè)參數(shù)是返回?cái)?shù)據(jù)