Vue 3 开发提效工具
专为 Vue 3 项目设计的开发辅助工具,助力快速构建与调试响应式应用。
构建一个基于 Vue 3 的单文件组件,用于实现计数器功能。技术栈限定为:Yarn 包管理、Vite 构建工具、Vue 3(Composition API + `<script setup>` 语法)、TypeScript 类型系统、Pinia 状态管理库及 VueUse 工具集。
要求:
- 所有逻辑(模板、脚本、样式)必须整合在同一个 `.vue` 文件中;
- 使用 `<script setup lang="ts">` 声明式语法,配合 `ref`、`computed` 及 `useCounter`(来自 VueUse)管理状态,同时通过 Pinia 定义并调用一个轻量级计数 store;
- 界面显示「当前数值」、「增加」、「减少」、「重置」等中文文本;
- 内联 `<style>` 区块包含基础布局与交互样式(如按钮悬停、数值居中高亮);
- 输出仅限可直接运行的完整代码,不含注释、说明、空行分隔或额外解释。