写一个VUE3.0为前端的例子

Vue3.0是一个流行的JavaScript框架，主要用于构建用户界面。这里是一个简单的Vue3组件例子，它展示了一个计数器功能：

<!-- main.js -->
<script setup lang="ts">
import { ref } from 'vue';

// 定义一个响应式的变量
const count = ref(0);

// 组件内的事件处理函数
function increment() {
  count.value++;
}

function decrement() {
  count.value--;
}
</script>

<template>
  <div>
    <h1>Vue3 Count器: {{ count }}</h1>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
</template>

在这个例子中，`ref`从Vue3的Composition API引入，用于创建响应式的值。`increment`和`decrement`函数绑定了点击按钮后的操作，当用户点击“+1”或“-1”按钮时，计数器的值会相应地增加或减少。

要在实际项目中使用，你需要先安装Vue3及其依赖项，然后在HTML文件中引入`<script setup>`标签，并在项目的入口文件（如main.js）中配置路由、状态管理等其他细节。