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 方法，返回数据的第一个参数是错误对象，第二个参数是返回数据

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

我是菜鸟sww

反复测试多次，mac版最新3.3.0版使用vue3 <script setup> </script>中无法使用uni对象<script>export default{} </script>中也是无法使用uni对象，小程序开发者工具报ReferenceError: uni is not defined

2021-12-05 00:12

7***@qq.com

cli 怎么创建云项目啊？

2021-12-03 21:06

```<script>
export default{
onLaunch() {
console.log(uni);
}
}
// console.log(uni);
// import {onLaunch} from '@dcloudio/uni-app'

// onLaunch(()=>{

// })
</script>

<style lang="scss">
/*每个页面公共css */
</style>
```
微信小程序中这样会报错ReferenceError: uni is not defined ，h5没事

2021-12-03 16:45

回复我是菜鸟sww ：

从新建了一个项目好了

2021-12-03 15:37

微信中vue3 ReferenceError: uni is not defined，h5没有错误

2021-12-03 15:08

6***@qq.com

在编辑器创建完vue3后如何支持ts 已经下载ts编译器插件和语法支持插件好像还是不起作用没有提示也没有报错

2021-12-03 14:37

1***@163.com

回复 jxtian ：

好的，谢谢。灰常的激动

2021-12-03 14:15

9***@qq.com

使用HbuildX 3.3.0.20211130-alpha，使用vite之后，uni-ui组件无法显示出来。自定义的组件是可以显示出来的。

2021-12-03 12:13

matrix_zyh

子组件
```
<script setup>
const exposeChange = () => {
return '我是通过 ref 调用得来的！'
}
defineExpose({
exposeChange
})
</script>
```

父组件
```
<template>
<view>
<child ref="childRef" />
</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const childRef = ref(null)

onMounted(() => {
const value = childRef.value.exposeChange()
console.log(value)
})
</script>
```

H5 没有任何问题，能正常打印 value 值，但是微信小程序不行，报错 “childRef.value.exposeChange is not a function”

2021-12-03 11:11

cli 怎么创建云项目

2021-12-03 09:09