DCloud_UNI_WZF
DCloud_UNI_WZF
  • 发布:2020-09-22 17:06
  • 更新:2025-01-17 11:09
  • 阅读:268094

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

要回复文章请先登录注册

x***@qq.com

x***@qq.com

阿里的sjs支持么,我怎么按照教程弄报错,[plugin:vite:vue] Single file component can contain only one element
2022-05-09 00:44
DCloud_UNI_GSQ

DCloud_UNI_GSQ

回复 2***@qq.com :
是新创建的吗?uni相关依赖的版本号多少?如果不是最新可以先使用管理工具(文档中有)更新到最新试试
2022-05-05 15:54
DCloud_UNI_GSQ

DCloud_UNI_GSQ

回复 2***@qq.com :
网络问题,后已增加gitee作为检测源,应该可以改善国内使用体验。
2022-05-05 15:49
1***@139.com

1***@139.com

回复 DCloud_heavensoft :
好的,已收到回复,谢谢!
2022-05-02 20:27
DCloud_heavensoft

DCloud_heavensoft

回复 1***@139.com :
已迁移
2022-05-02 15:08
1***@139.com

1***@139.com

请问下团队大佬,微信小程序的Vue3版本的也即:hello-uniapp 微信小程序 端是否已迁移 vue3 ?
2022-05-01 11:50
jasonho2433

jasonho2433

我想问有遇到使用cli模式在vscode编辑器下,边开发边实时编译电脑会卡吗?我就开一个Vscode+开发者工具,只要保存了代码 开发者工具就会执行 然后电脑就很容易卡了
2022-04-27 19:21
2***@qq.com

2***@qq.com

还有个问题 用文档命令创建的新项目 打包自定义基座或者原生app会有这个提示无法打包
当前应用未配置uni统计版本,默认使用1.0版本;建议使用uni统计2.0版本 ,私有部署数据更安全,代码开源可定制。
在manifest.json的uni统计配置勾选不勾选都是这个提示,也找不到到底是在哪设置统计版本
这个有人知道怎么回事的么
2022-04-22 10:47
2***@qq.com

2***@qq.com

回复 enderX :
你好 我直接用文档里面的npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project创建的项目
运行npx @dcloudio/uvm和npx @dcloudio/uvm alpha都会报错
C:\Users\okokok\AppData\Local\npm-cache\_npx\f06a30b2e514f95e\node_modules\@dcloudio\uvm\lib\package.js:16
throw new Error('Invalid version: ' + version)
^

Error: Invalid version: 3.0.0-alpha-3040620220415003
at getVue3 (C:\Users\okokok\AppData\Local\npm-cache\_npx\f06a30b2e514f95e\node_modules\@dcloudio\uvm\lib\package.js:16:11)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async get (C:\Users\okokok\AppData\Local\npm-cache\_npx\f06a30b2e514f95e\node_modules\@dcloudio\uvm\lib\package.js:37:12)
at async start (C:\Users\okokok\AppData\Local\npm-cache\_npx\f06a30b2e514f95e\node_modules\@dcloudio\uvm\bin\index.js:17:16)
。。。最后还是npm update才可以的
这个是啥情况 哪里出问题了
2022-04-22 10:40
2***@qq.com

2***@qq.com

回复 enderX :
谢了 不知道还有这个 一会试试3.4.6的uni.request还有问题没
2022-04-21 17:45