DCloud_UNI_TJX
DCloud_UNI_TJX
  • 发布:2020-09-22 17:06
  • 更新:3 天前
  • 阅读:30657

uni-app 项目小程序端、H5 端支持 vue3 介绍

分类:uni-app

简介

随着 vue3 的发布,uni-app 也逐步支持 vue3

目前 H5 平台已支持(PC 适配完善中, hello-uniapp h5 端已迁移 vue3,点击体验),小程序平台已支持,App 平台还在内测中。

除支持 vue3 语法特性外,uni-app 特有的生命周期钩子支持 Composition API,如 onLaunchonShowonLoad...

下面介绍创建支持 vue3 的 uni-app 项目的流程,以及使用中的一些注意事项。vue3 相关问题请关注vue官方文档 vue3 中文文档

创建 H5 工程

  1. 创建 Vue3/Vite 工程

    npx degit dcloudio/uni-preset-vue#vite my-vue3-project  
  2. 进入工程目录

    cd my-vue3-project  
  3. 安装依赖

    npm i  

    yarn  
  4. 预览

    npm run dev:h5  

    yarn dev:h5  
  5. 发布

    npm run build:h5  

    yarn build:h5  

创建小程序工程

目前仅支持 cli 方式创建支持 vue3 默认模板项目。

如果你之前没有使用过 vue-cli 方式创建过项目,需要先安装 vue-cli,若已安装则跳过步骤 1。

步骤 1: 全局安装vue-cli

npm install -g @vue/cli

步骤 2: 用如下的命令创建vue3工程

vue create -p dcloudio/uni-preset-vue#vue3 my-vue3-project

步骤 3: 创建好工程后,进入对应目录

cd my-vue3-project

步骤 4: 将项目跑到微信平台

npm run dev:mp-weixin

需要将编译后的文件dist/dev/mp-weixin导入微信开发者工具运行,也可将项目拖入 HbuildX 中运行,方便运行到各个平台。

注意事项

  • vue3的组件写法与vue2有区别,这导致插件市场众多插件,包括uni ui,目前都无法用于vue3版本。
  • vue3 响应式基于 Proxy 实现,不支持iOS9和ie11。
  • 暂不支持新增的 Teleport,Suspense 组件。
  • 暂不支持 template 下存在多个根节点。
  • 小程序端暂不支持使用 Vite 编译。
  • 目前HBuilderX还未预置,后续会提供支持

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

14 关注 分享
sonicsunsky@qq.com 剑心无间 374521128@qq.com 18905367899@189.cn wenju Yuhuawang li1234yun@163.com lgcf1314@gmail.com lmsorry jerry4718@qq.com 毛学生 最光阴 2596545643@qq.com 默毅品牌设计

要回复文章请先登录注册

DCloud_UNI_CHB

DCloud_UNI_CHB

回复 824034229@qq.com :
H5和小程序已支持,App的兼容正在进行中
3 天前
孙逊大神

孙逊大神

vue3.0连element UI都废了,uni-app这边基本把之前所有UI生态全废了,还是等着vue2.7好好支持支持
3 天前
824034229@qq.com

824034229@qq.com

Hello,Vue3.0 的支持进度如何了?
5 天前
1468161764@qq.com

1468161764@qq.com

Hello,Vue3.0 的支持进度如何了?
6 天前
729234283@qq.com

729234283@qq.com

Hello,Vue3.0 的支持进度如何了?
6 天前
DCloud_UNI_LXH

DCloud_UNI_LXH

回复 一片云 :
正在进行中
2021-05-28 16:58
一片云

一片云

小程序和H5 两套真没法搞,什么时候统一Vite ?
2021-05-28 05:18
270315475@qq.com

270315475@qq.com

插件市场众多插件,包括uni ui, 观望下吧,等完善了吧
2021-05-26 09:24
aiplat点com

aiplat点com

直接将vue3语法写到通过vue-cli生成的框架里吗(vue create -p dcloudio/uni-preset-vue my-project)

就是将 vue create -p dcloudio/uni-preset-vue my-project 生成的代码改成vue3的
2021-05-24 16:20
默毅品牌设计

默毅品牌设计

期待已久了 加油 奥利给!
2021-05-24 10:54