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

uni-app 项目支持 vue 3.0介绍,及升级指南

分类:uni-app

简介

HBuilderX 3.2.5-alpha新增在App平台支持 vue 3.0,至此 uni-app 项目对 vue 3.0的支持情况如下:

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

目前小程序平台使用的编译器依然是webpack,App/H5平台的编译器已升级为vite

HBuilderX同时内置了两个编译器,并会根据目标平台,智能调度对应的编译器,即HBuilderX创建的vue 3.0版uni-ap项目,是支持全平台的。

cli方式却不支持编译器切换调度,故如果你希望基于vue 3.0开发小程序,则需要单独创建项目,该项目仅支持编译发行到小程序,不支持发行为App/H5。

为了你的开发效率,我们推荐使用HBuilderX创建支持vue3.0的uni-app项目

HBuilderX创建支持vue3的uni-app项目

从HBuilderX 3.2起,支持创建 vue3 的 uni-app 项目:

  1. 创建一个 uni-app 项目

  2. 在项目的 manifest 的「基础配置」中切换 「vue 版本选择」,默认是vue2,切换为 vue3 即可

cli 创建支持vue3的uni-app项目

cli模式下创建的项目,因为编译器的差异,不是跨平台的。该问题目前处理中,会统一到一起。(HBuilder X 一套代码运行到多端,建议使用HBuilder X 创建 vue3 项目)

开发 H5/App 工程

  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  
  5. 发布

    npm run build:h5  或  yarn build:h5  
    npm run build:app-plus  

本模式创建的项目,无法编译到小程序平台。

创建小程序工程

如果你之前没有使用过 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 中运行,方便运行到各个平台。

注意:此模式创建的项目,仅支持编译到小程序,不支持编译到H5/App 平台。

从 vue2 迁移到 vue3

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

使用 ts 开发 uni-app

目前暂不支持直接创建 vue3 的 ts 项目,如果需要以 ts 开发,可按如下步骤简单实现:

  • main.js 修改为 main.ts
  • 同时,index.html 中引用路径 src="/src/main.js" 改为 src="/src/main.ts"
  • 将 vue 文件中 <script> 标签的语言属性设置为 ts, <script lang="ts">
  • 安装 typescript 包
    • HBuilder X 项目运行时会提示安装,按提示操作即可
    • cli 项目需要手动安装,npm i typescript

注意事项

  • vue3 响应式基于 Proxy 实现,不支持iOS9和ie11。vue3 中文文档
  • 暂不支持新增的 Teleport,Suspense 组件。
  • 暂不支持 template 下存在多个根节点。
  • 小程序端暂不支持使用 Vite 编译。
  • 目前HBuilderX 3.2 起已预置,之前的版本只能使用cli方式。

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

24 关注 分享
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 我是船长

要回复文章请先登录注册

低调路人甲

低调路人甲

app真机调试报错:
Uncaught SyntaxError: Unexpected token => at uni-app-view.umd.js:1
1 天前
t***@163.com

t***@163.com

编译到小程序是要下载指定版本的编辑器? 我用3.2.3版本的编辑器创建vue3项目,编译到小程序白屏
1 天前
1***@qq.com

1***@qq.com

3.2.6.20210901-alpha运行的小程序端 在setup里面获取不到上页传过来的参数
2 天前
我是船长

我是船长

vue3 script setup 怎么接收页面的参数
3 天前
6***@qq.com

6***@qq.com

打不开
4 天前
流年负水

流年负水

看看
2021-09-10 23:59
1***@qq.com

1***@qq.com

vcfvt
2021-09-10 16:51
1***@qq.com

1***@qq.com

回复 小庄哥 :
要手动创建tsconfig.json
2021-09-10 16:44
小庄哥

小庄哥

使用hbuilderx创建的vue3,然后使用ts开发,浏览器可以运行,但是无法运行的小程序模拟器,报错如下:
14:45:05.329 正在编译中...
14:45:07.222 Module build failed (from ./node_modules/ts-loader/index.js):
14:45:07.230 Error: error while parsing tsconfig.json
14:45:07.235 at Object.loader (D:\HBuilderX\plugins\uniapp-cli\node_modules\ts-loader\dist\index.js:19:18)
14:45:07.241 [tsl] ERROR
14:45:07.245 TS18002: The 'files' list in config file 'tsconfig.json' is empty.
14:45:07.249 ERROR Build failed with errors.
2021-09-10 14:49
cyl

cyl

回复 DCloud_UNI_TJX :
大概啥时候支持,我看taro支持小程序用 <script setup>语法糖
2021-09-08 13:16