DCloud_UNI_WZF
DCloud_UNI_WZF
  • 发布:2020-09-22 17:06
  • 更新:2025-03-30 10:02
  • 阅读:273919

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

分类:uni-app

简介

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

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

Tips:

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

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

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

  1. 创建一个 uni-app 项目

  2. 在项目的 manifest 的「基础配置」中切换 「vue 版本选择」,默认是 vue2,切换为 vue3 即可

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  

更新依赖版本

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

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

49 关注 分享
剑心无间 3***@qq.com 1***@189.cn wenju Yuhuawang l***@163.com l***@gmail.com lmsorry j***@qq.com 毛学生 最光阴 2***@qq.com 默毅品牌设计 1***@qq.com FISH_FLYING 苏陌 1***@qq.com Warn 低调路人甲 DCloud_IOS_XTY 1***@qq.com 小人物1992 我是船长 PepsiCola l***@163.com BruceAn QLing 4***@qq.com 1***@163.com l***@gmail.com 然然Ranan j***@126.com 7***@qq.com 丶且听风吟8 五茶 hormo 2***@qq.com 4***@qq.com y***@qq.com 某人gmgn3 2***@qq.com 张迪迦 1***@qq.com 3***@qq.com 1***@163.com HRK w***@163.com sonicsunsky Jello

要回复文章请先登录注册

v逆水行舟v

v逆水行舟v

回复 v逆水行舟v :
在src/manifest.json中找到mp-weixin: { appId: 'xxxxx' }填入小程序id即可。
2022-01-17 11:07
DCloud_UNI_FXY

DCloud_UNI_FXY

回复 v逆水行舟v :
如果是cli工程,wxcomponents要放到src下边的
2022-01-17 11:06
v逆水行舟v

v逆水行舟v

回复 v逆水行舟v :
npm install rollup-plugin-copy,然后在vite.config.ts中
import cpoy from 'rollup-plugin-copy';
export default defineConfig({
plugins: [
uni(),
copy({
targets: [
{
src: './wxcomponents',
dest: 'dist/dev/mp-weixin'
}
]
})
],
});
2022-01-17 10:59
v逆水行舟v

v逆水行舟v

使用npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project 创建的项目,然后创建了wxcomponents/mp-html,想使用原生小程序组件。在pages.json配置了
"usingComponents": {
"mp-html": "/wxcomponents/mp-html/index"
}
但是每次dev:mp-weixin的时候,wxcomponents都未打包到dist/dev/weixin下,然后会抛错:[ pages/rich/index.json 文件内容错误] pages/rich/index.json: ["usingComponents"]["mp-html"]: "../../wxcomponents/mp-html/index" 未找到。
请问这个问题怎么解决呢?
2022-01-14 17:23
v逆水行舟v

v逆水行舟v

使用npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project 创建的项目,每次修改代码热更新,微信小程序则会弹出 更改AppId失败 Error: invalid empty appId 。 请问这个问题怎么处理呢?
2022-01-14 17:17
2***@qq.com

2***@qq.com

回复 hws007 :
用最新版的 vue ref 语法糖 上个月改成 reactivity语法糖了
2022-01-14 11:31
j***@qq.com

j***@qq.com

弱弱的问一句,基于vue2的项目可以使用vite构建吗?webpack实在是太多问题了
2022-01-13 11:03
随风

随风

编辑器导出的H5 不支持小米安全键盘一样的没有修复 cli模式执行 编辑器导出的不支持 提交bug也没人解决
2022-01-13 10:04
杨Chaos

杨Chaos

webpack的transpileDependencies在vite里有替代方案吗?
```
//vue.config.js
module.exports = {
transpileDependencies:['@dcloudio/uni-ui']
}
```
2022-01-13 09:14
7***@qq.com

7***@qq.com

创建 Vue3/Vite 工程成功后,npm install 报错:
npm ERR! code ETARGET
npm ERR! notarget No matching version found for @dcloudio/uni-stat@3.0.0-alpha-3030720220111002.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
2022-01-12 17:11