DCloud_UNI_TJX
DCloud_UNI_TJX
  • 发布:2020-09-22 17:06
  • 更新:3 小时前
  • 阅读:107854

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...

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  

从 vue2 迁移到 vue3

请参看官方文档从 vue2 迁移到 vue3

注意事项

  • vue3 响应式基于 Proxy 实现,不支持iOS9和ie11。vue3 中文文档
  • 暂不支持新增的 Teleport,Suspense 组件。
  • 在 Vue3 中, 处理 API Promise 化 调用结果的方式不同于 Vue2。更多
    • Vue3 中,调用成功会进入 then 方法,调用失败会进入 catch 方法
    • Vue2 中,调用无论成功还是失败,都会进入 then 方法,返回数据的第一个参数是错误对象,第二个参数是返回数据

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

37 关注 分享
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 3***@qq.com 4***@qq.com 1***@163.com l***@gmail.com 然然Ranan j***@126.com 7***@qq.com 丶且听风吟8 五茶 5***@qq.com

要回复文章请先登录注册

赵永强

赵永强

回复 想猫咪的渔 :
if (process.env.NODE_ENV === 'development') {
/* 开发环境 运行 */

} else {
/* 生产环境 发行 */

}

} else {
/* 生产环境 发行 */
this.baseURL = 'http://112.126.78.115:8098'; //测试接口前缀
// this.baseURL = 'http://192.168.60.19:8088'; //开发接口前缀
}
3 小时前
想猫咪的渔

想猫咪的渔

使用cli创建的vue3项目怎么区分开发,生产环境呢?
2 天前
DCloud_UNI_FXY

DCloud_UNI_FXY

回复 Monster_by :
错误已经提示了,小程序平台是不支持动态组件的
2 天前
Monster_by

Monster_by

使用cli 通过上述流程构建的项目,在使用 <component :is= 动态组件标签运行到小程序时,控制台报错:[plugin:vite:vue] <component is=""/> is not supported
3 天前
h***@hotmail.com

h***@hotmail.com

回复 2***@qq.com :
还是使用onLoad函数
onLoad((options)=>{})
4 天前
h***@hotmail.com

h***@hotmail.com

回复 2***@qq.com :
你可以直接下载: https://github.com/dcloudio/uni-preset-vue/tree/vite-ts
4 天前
2***@qq.com

2***@qq.com

我用这个命令创建项目npx degit dcloudio/uni-preset-vue#vite-ts uniapp-guide 报no matches found: dcloudio/uni-preset-vue#vite-ts
2022-01-20 11:52
2***@qq.com

2***@qq.com

回复 5***@qq.com :
1.插件安装typescript;
2.然后就可以直接使用了。
2022-01-19 09:35
5***@qq.com

5***@qq.com

使用`hbuiderx`新建的项目 怎么支持`typescript`呢?
2022-01-18 14:20
DCloud_UNI_CHB

DCloud_UNI_CHB

回复 1***@qq.com :
vue3暂不支持nvue,官方测试中,预计春节左右发布。
2022-01-17 19:58