uniapp 中vue3尝鲜，huilderX中创建vue3版本的uniapp 项目

yunchong_zhao

于 2021-10-23 23:03:42 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 前端 vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/yunchong_zhao/article/details/120927838

javascript 同时被 3 个专栏收录

346 篇文章

订阅专栏

前端

342 篇文章

订阅专栏

vue

104 篇文章

订阅专栏

本文介绍了如何在最新版的HbuilderX中手动将项目升级为Vue3版本，并通过一个简单的计数器实例展示了Vue3的setup语法。在manifest.json中修改配置后，利用ref和Vue3的响应式特性实现加减计数功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最新版本的HbuilderX 已经支持创建vue3版本的uniapp 项目了
但是默认创建的还是 vue2版本,需要我们手动更改到 vue3版本
在manifest.json 可视化配置页面进行更改
在这里插入图片描述

然后我们就可以写vue3的语法了

我们就拿最经典的计数器作为尝鲜吧

<template>
	<view class="content">
		<button type="primary" @click="addCount">加一</button>
		{{count}}
		<button type="warn" @click="deCount">减一</button>
	</view>
</template>

import { ref } from "vue"
	export default {
		setup() {
			const count = ref(0)
			const addCount = () => {
				 count.value += 1
			}
			const deCount = () => {
				count.value  -= 1
			}
			return {
				count,
				addCount,
				deCount
			}
		},
	}