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

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

j***@qq.com

vue3版的小程序有办法在浏览器里面预览吗

2021-08-02 14:46

1***@qq.com

后续会支持多端吗？H5 版的编译小程序报错的

2021-08-02 11:04

温柔两刀

用哪个版本无所谓，就是TypeScript支持要好呀。

2021-07-29 11:24

adsadsa

自定义组件在onMounted中如何使用 createSelectorQuery().in().selectAll('')，之前in(this) 解决方法

<template>
<view class="tabBar">
<scroll-view
:scroll-left="left"
class="scroll_view"
scroll-with-animation="true"
scroll-x="true"
>
<view class="box" id="box" :ref="box">
<view
class="item"
@click="_click"
v-for="(item, i) in list"
:key="item.id"
>
<text :class="(index || activeIndex) === i ? 'active' : ''">
{{ item.name }}
</text>
</view>
</view>
</scroll-view>
</view>
</template>

<script>
import { computed, ref, onMounted ,getCurrentInstance} from "vue";
import {createSelectorQuery} from "@dcloudio/uni-mp-weixin"
export default {
props: {
list: {
type: Array,
required: true,
},
index: {
type: Number,
default: 0,
},
},
setup(props) {
const { proxy, ctx } = (getCurrentInstance())
let activeIndex = ref(0);
let left = ref(0);
let box = ref(null);
const _click = (e) => {
const query = uni.createSelectorQuery().in(ctx)
query
.select("#box")
.boundingClientRect((data) => {
console.log(data)
})
.exec();
left.value = e.target.offsetLeft;
};
return {
activeIndex,
left,
box,
_click,
};
},
};
</script>

<style scoped>
.tabBar {
--height: 100rpx;
height: var(--height);
}
.box {
display: flex;
}
.box .item {
padding: 0 35rpx;
flex-shrink: 0;
font-size: 26rpx;
/* font-weight: bold; */
height: var(--height);
line-height: var(--height);
}
.box .item text {
display: inline-block;
line-height: 93rpx;
height: 93rpx;
border-bottom: 6rpx solid transparent;
}
.box .item .active {
color: var(--color_blue);
border-color: var(--color_blue);
}
</style>

2021-07-28 18:42

回复差得多先生：

import { computed, ref, onMounted ,getCurrentInstance} from "vue";
setup(props) {
const { proxy, ctx } = (getCurrentInstance())
const query = uni.createSelectorQuery().in(ctx)
query
.select("#box")
.boundingClientRect((data) => {
console.log(data)
})
.exec();
}

2021-07-28 18:41