目录

前言

随着vue3.0发布以来,紧随着vue3.2又发布了,这尤大大也太厉害了吧。在这里vue3.x的优点就不多说了,反正就是爽。

uniapp也是跟紧的步伐,在前几个版本就开始支持vue3.x的使用,甚至在2.9.3的cli版本就开始支持了,更多相关信息查看官方更新日志。从 HBuilderX 3.2 起,支持创建 vue3 的 uni-app 项目,更多uniapp相关信息查看uni-app 项目支持 vue 3.0 介绍,及升级指南。用法与常规vue3.2的用法差不多,有一种感觉,一直使用一直爽!那么接下来就简单地介绍下uniapp具体怎么使用vue3到项目中,跑起来~

使用步骤

1. 创建uniapp项目

使用Hbuilder X =》文件 =》新建 =》项目 =》选择uni-app自定义项目名 =》创建

image

2. 选择VUE3版本

使用Hbuilder X打开创建好的项目 =》打开项目根目录manifest.json文件,基础配置项 =》选择VUE版本选择,选择版本3 =》成功切换到vue3模式

image

3. 使用VUE3简单示例

我在项目默认的index页面测试一下vue3的功能是否可行,代码如下:

index:

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<button type="default" @click="handle">测试点击事件</button>
	</view>
</template>

<script setup>
	const title = '我是标题';
	const handle = ()=>{
		console.log('执行点击事件')
	};
</script>

运行至h5结果,标题显示了,点击事件有了:

image

Tips

  1. 使用HBuilderX创建vue3项目,HBuilderX的版本必须在3.2+ 。
  2. 更多vue3相关内容,可查看uniapp官方文档vue3教程
  3. 示例中是最简单的例子,需要做项目,还需要进一步学习vue3新特性。
  4. vue3的优点是很明显的,除了h5不支持ie,其他的全是优点,快去加油站加油吧~

关注我,不迷路

如果有任何疑问可以留言,更多相关技术也可以加QQ群交流:568984539

更多前端、uniapp、nodejs等相关知识可关注我个人博客:https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343

觉得有帮助的动动你的小手点个赞吧~

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐