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

分类：uni-app

简介

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，点击体验

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

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

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

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

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

创建 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

进入工程目录
```
cd my-vue3-project  
```
安装依赖
```
npm i  或  yarn  
```

运行

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

打包

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

更新依赖版本

参考：https://uniapp.dcloud.net.cn/quickstart-cli.html#cliversion

从 vue2 迁移到 vue3

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

注意事项

vue3 响应式基于 Proxy 实现，不支持iOS9和ie11。vue3 中文文档。
暂不支持新增的 Teleport,Suspense 组件。
在 Vue3 中，处理 API Promise 化 调用结果的方式不同于 Vue2。更多
- Vue3 中，调用成功会进入 then 方法，调用失败会进入 catch 方法
- Vue2 中，调用无论成功还是失败，都会进入 then 方法，返回数据的第一个参数是错误对象，第二个参数是返回数据

欢迎开发者反馈使用该版本遇到的问题，我们将积极收集意见。

8***@qq.com

通过vue create -p dcloudio/uni-preset-vue#vue3 my-vue3-project，启动项目报错Object(...) is not a function
at createApp (main.ts:4)

2021-10-13 14:41

1***@a.com

h哈哈哈

2021-10-10 21:02

1***@qq.com

组合式api from 哪里 import { onLaunch} from '@dcloudio/uni-app' 可以用但是没有提示很难受

2021-10-10 17:49

PepsiCola

回复 PepsiCola ：

有一种解法是

```bash
yarn remove axios
yarn add @bundled-es-modules/axios

# vite.config
resolve: {
alias: {
axios: '@bundled-es-modules/axios'
}
}
```

2021-10-09 10:33

我按照工程cli直接构建的工程, 导入axios 时, 提示
The requested module '/node_modules/axios/index.js' does not provide an export named 'default'

而用同样的代码跑 vite构建的普通工程则没问题

2021-10-09 10:25

jonashao

调整代码

```vue

<template>
<custom-component ref="root">This is a root element</custom-component>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
setup() {
const root = ref(null)

onMounted(() => {
// DOM 元素将在初始渲染后分配给 ref
console.log(root.value) // <div>This is a root element</div>
})

return {
root
}
}
}
</script>
```

2021-10-08 17:46

[模板引用](https://v3.cn.vuejs.org/guide/composition-api-template-refs.html) 还不支持

我尝试了这段代码，会打印 `root ref value null`
```
<template>
<div ref="root">This is a root element</div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
setup() {
const root = ref(null)

onMounted(() => {
// DOM 元素将在初始渲染后分配给 ref
console.log('root ref value', root.value) // <div>This is a root element</div>
})

return {
root
}
}
}
</script>
```

2021-10-08 17:41

jxtian

回复 gengshaojing ：

支持

2021-10-08 14:21

7***@qq.com

目前vue3的App项目没法云打包，怎么生成apk文件。这个怎么处理

2021-09-30 11:08

目前vue3的App项目没法云打包。这个怎么处理

2021-09-30 11:07