uni-app 项目支持 vue 3.0 介绍，及升级指南

简介

HBuilderX 3.3.0+ 更新uni-app编译器，支持基于 Vite 编译到小程序平台。

至此，uni-app在App/H5/小程序全平台支持Vue 3.0开发，且全平台支持Vite编译器，下载 HBuilderX 3.3.0+ 体验。

Tips：

• H5/PC Web 平台：hello-uniapp H5 端已迁移 vue3，点击体验
• App 平台：nvue 暂不支持Vite编译。

除支持 vue3 语法特性外，uni-app 特有的生命周期钩子支持 Composition API，如 onLaunch，onShow，onLoad... ，使用方法见 Vue2 迁移 Vue3 文档

HBuilderX创建支持 vue3 的 uni-app 项目

从 HBuilderX 3.3.0+ 起，支持创建 vue3 的 uni-app 项目，一套代码运行到多端：

1. 创建一个 uni-app 项目
2. 在项目的 manifest 的「基础配置」中切换 「vue 版本选择」，默认是 vue2，切换为 vue3 即可

img

cli 创建支持 vue3 的 uni-app 项目

1. 创建 Vue3/Vite 工程

   复制代码# 创建以 javascript 开发的工程  
   npx degit dcloudio/uni-preset-vue#vite my-vue3-project  
   
   # 创建以 typescript 开发的工程  
   npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project  
   

2. 进入工程目录

   复制代码cd my-vue3-project  
   

3. 安装依赖

   复制代码npm i  或  yarn  
   

4. 运行

   复制代码# 运行到 h5   
   npm run dev:h5  
   # 运行到 app   
   npm run dev:app  
   # 运行到 微信小程序  
   npm run dev:mp-weixin  
   

5. 打包

   复制代码# 打包到 h5   
   npm run build:h5  
   # 打包到 app   
   npm run build:app  
   # 打包到 微信小程序  
   npm run build:mp-weixin  
   

从 vue2 迁移到 vue3

请参看官方文档从 vue2 迁移到 vue3

注意事项

• vue3 响应式基于 Proxy 实现，不支持iOS9和ie11。vue3 中文文档。

• 暂不支持新增的 Teleport,Suspense 组件。

• 在 Vue3 中， 处理 API

Promise 化

调用结果的方式不同于 Vue2。

更多

• Vue3 中，调用成功会进入 then 方法，调用失败会进入 catch 方法
• Vue2 中，调用无论成功还是失败，都会进入 then 方法，返回数据的第一个参数是错误对象，第二个参数是返回数据