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

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

要回复文章请先登录注册

赵永强

赵永强

用cli报错! could not fetch remote https://github.com/dcloudio/uni-preset-vue,从git拉下来源码小程序编译报错,浏览器没问题
E:\code\uni-preset-vue-vite-ts\node_modules\cac\dist\index.js:404
22:53:04.402 throw new CACError(Unknown option \${name.length > 1 ? --${name} : -${name}}`); 22:53:04.402 ^ 22:53:04.402 CACError: Unknown option--watch`
22:53:04.402 at Command.checkUnknownOptions (E:\code\uni-preset-vue-vite-ts\node_modules\cac\dist\index.js:404:17)
22:53:04.402 at CAC.runMatchedCommand (E:\code\uni-preset-vue-vite-ts\node_modules\cac\dist\index.js:602:13)
22:53:04.402 at CAC.parse (E:\code\uni-preset-vue-vite-ts\node_modules\cac\dist\index.js:541:12)
22:53:04.402 at Object. (E:\code\uni-preset-vue-vite-ts\node_modules\@dcloudio\vite-plugin-uni\dist\cli\index.js:50:5)
22:53:04.418 at Module._compile (internal/modules/cjs/loader.js:1063:30)
22:53:04.418 at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
22:53:04.418 at Module.load (internal/modules/cjs/loader.js:928:32)
22:53:04.418 at Function.Module._load (internal/modules/cjs/loader.js:769:14)
22:53:04.418 at Module.require (internal/modules/cjs/loader.js:952:19)
22:53:04.418 at require (internal/modules/cjs/helpers.js:88:18)
2021-12-15 23:10
2***@qq.com

2***@qq.com

! could not fetch remote https://github.com/dcloudio/uni-preset-vue
! could not find commit hash for vite-ts
2021-12-15 14:27
1***@qq.com

1***@qq.com

ts 中 composition 形式的 onLoad 接参数 ts 会报错,它的类型声明中没有定义能接受参数

// 这是`uni-app.d.ts`中对 onLoad 的声明
```
export declare const onLoad: (hook: () => any, target?: ComponentInternalInstance | null) => any;
```
2021-12-14 22:52
ThorUI_echo

ThorUI_echo

bug反馈:https://ask.dcloud.net.cn/question/136238
2021-12-14 18:20
l***@foxmail.com

l***@foxmail.com

请问 vue3 vite cli 环境如何支持多环境配置,比如配置 .env、.env.test、.env.prod,在 package.json -> scripts 中如何配置
2021-12-13 09:32
有问

有问

牵移是很难的,基本没多大意义,还有一些插件也是VUE2,也不可能给插件牵移,要用V3恐怕还是得重新写。
2021-12-13 09:21
温柔两刀

温柔两刀

回复 3***@qq.com :
同问。
2021-12-13 09:11
9***@qq.com

9***@qq.com

回复 RSbeiyou :
是不是uni-ui中的组件用不了?自定义的组件是可以的。我也遇到这个问题了。坐等修复。
2021-12-10 16:50
matrix_zyh

matrix_zyh

## 请问谁知道 uni-app cli 方式创建的 3.0 项目,怎么引入插件?
正常情况下,vue3 不是应该是
```javascript
const app = createApp(App)
app..mount('#app')
```
这样的吗?但是我看 uni-app 怎么是
```javascript
export function createApp() {
const app = createSSRApp(App);
return {
app,
};
}
```
createApp 也没有执行过,插件绑定到里面个外面都不行,会提示 “'isVNode' is not exported by node_modules/@dcloudio/uni-mp-vue/dist/vue.runtime.esm.js” 这个错误?哪位能指教一下。
2021-12-08 17:30
RSbeiyou

RSbeiyou

uniapp版本 3.0.0-alpha-3030020211206001 发现几个严重问题:
1、pages.json使用条件编译报错
2、vite在昨天12月7号升级了2.7.0版本,导致本地启动报错,需降级在2.6.13方可使用,需适配最新vite
3、easycom在微信小程序环境失效
2021-12-08 00:17