DCloud_UNI_WZF
DCloud_UNI_WZF
  • 发布:2020-09-22 17:06
  • 更新:2024-03-28 17:32
  • 阅读:234367

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

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

48 关注 分享
sonicsunsky 剑心无间 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

要回复文章请先登录注册

2***@qq.com

2***@qq.com

/Users/yangfeng/Documents/all_dev_files/merp-develop-demo/node_modules/cac/dist/index.js:404
09:12:56.598 throw new CACError(`Unknown option \`${name.length > 1 ? `--${name}` : `-${name}`}\``);
09:12:56.599 ^
09:12:56.610 CACError: Unknown option `--devtools`
2023-09-21 09:18
飞扬

飞扬

安装报错 ! could not find commit hash for vite
2023-09-08 11:26
2***@qq.com

2***@qq.com

回复 pudding_18 :
npm update @vitejs/plugin-vue 更新到最新版本可以吗
2023-08-17 14:01
Megasu

Megasu

分享一套黑马程序员出品的《Vue3+TS 版的 uni-app 项目》

在线笔记:https://megasu.gitee.io/uni-app-shop-note/
配套视频:https://www.bilibili.com/video/BV1Bp4y1379L/
参考源码:https://gitee.com/Megasu/uniapp-shop-vue3-ts
接口文档:https://apifox.com/apidoc/shared-0e6ee326-d646-41bd-9214-29dbf47648fa/doc-1521513
2023-08-08 16:23
8***@qq.com

8***@qq.com

vue3官网都更新到3.34了,hbuilderx的uniapp模板还是用的vue3.0啊?都不更新更新?好想体验新特性,uni不就是用hbuilderx吗,别告诉我cli创建哦
2023-05-30 14:52
pudding_18

pudding_18

cli创建vue3项目,执行npm run dev:h5:ssr报错了:
Error: Failed to resolve vue/compiler-sfc.
@vitejs/plugin-vue requires vue (>=3.2.25) to be present in the dependency tree.
at resolveCompiler
vue版本是3.2.26,麻烦看看是什么问题?
2023-04-04 10:57
4***@qq.com

4***@qq.com

vite+vue3+setup关于unplugin-auto-import/vite插件的使用,需要配置imports:['uni-app'] !!!
2023-03-23 14:55
4***@qq.com

4***@qq.com

vite+vue3+setup关于插件unplugin-vue-components/vite对该项目的支持,测试后发现组件的样式会失效,移除或者手动引入组件路径则恢复正常!!!
2023-03-23 14:54
a***@qq.com

a***@qq.com

现在 uniapp 组件对 TS 支持如何?
2023-03-22 16:31
opCloud

opCloud

回复 yangjw :
要是能再提供webpack打包就完美了,vue2项目转vue3导入umd模块都报错,改起来很麻烦,都是压缩过的代码
2023-03-16 11:36