Vue3开发Skill vue

---

name: vue description: 在编辑 .vue 文件、创建 Vue 3 组件、编写 composables 或测试 Vue 代码时使用 - 提供 Composition API 模式、props/emits 最佳实践、VueUse 集成和响应式解构指导 license: MIT

Vue 3 开发

Vue 3 Composition API 模式、组件架构和测试实践的参考。

当前稳定版本： Vue 3.5+ 增强了响应式性能（内存减少 56%，数组追踪速度提升 10 倍），新增 SSR 功能，并改善了开发体验。

概述

Vue 3 项目的渐进式参考系统。仅加载与当前任务相关的文件以最小化上下文使用（约 250 个令牌基础，每个子文件 500-1500 个令牌）。

使用时机

在以下情况使用此技能：

• 编写 .vue 组件
• 创建 composables（use* 函数）
• 构建客户端工具
• 测试 Vue 组件/composables

对于以下情况使用 nuxt 技能代替：

• 服务器路由、API 端点
• 基于文件的路由、中间件
• Nuxt 特定模式

对于样式化的 UI 组件： 使用 nuxt-ui 技能 对于无头可访问组件： 使用 reka-ui 技能 对于 VueUse composables： 使用 vueuse 技能

快速参考

正在处理…	加载文件
components/ 中的 .vue	references/components.md
composables/ 中的文件	references/composables.md
utils/ 中的文件	references/utils-client.md
.spec.ts 或 .test.ts	references/testing.md
TypeScript 模式	references/typescript.md
Vue Router 类型	references/router.md
响应式（ref, watch）	references/reactivity.md
自定义指令	references/directives.md
Provide/inject	references/provide-inject.md
边缘情况, vue-tsc	references/gotchas.md

加载文件

根据你的任务考虑加载这些参考文件：

• [ ] references/components.md - 如果在 components/ 中工作或编写 .vue 文件
• [ ] references/composables.md - 如果创建 composables（use* 函数）
• [ ] references/utils-client.md - 如果在 utils/ 中工作或编写客户端工具
• [ ] references/testing.md - 如果编写 .spec.ts 或 .test.ts 文件
• [ ] references/typescript.md - 如果处理 Vue TypeScript 模式或泛型
• [ ] references/router.md - 如果处理 Vue Router 或路由类型
• [ ] references/reactivity.md - 如果使用 ref、reactive、computed、watch 或 watchEffect
• [ ] references/directives.md - 如果创建或使用自定义指令
• [ ] references/provide-inject.md - 如果使用 provide/inject 模式
• [ ] references/gotchas.md - 如果调试边缘情况或水合问题

不要一次加载所有文件。 仅加载与当前任务相关的文件。

可用指导

references/components.md - 带有响应式解构的 Props、emits 模式、用于 v-model 的 defineModel、插槽简写

references/composables.md - Composition API 结构、VueUse 集成、生命周期钩子、异步模式、响应式陷阱

references/utils-client.md - 纯函数、格式化器、验证器、转换器、何时不使用工具

references/testing.md - Vitest + @vue/test-utils、组件测试、composable 测试、路由器模拟

references/typescript.md - 用于 provide/inject 的 InjectionKey、vue-tsc 严格模板、tsconfig 设置、泛型组件

references/router.md - 路由元类型、使用 unplugin-vue-router 的类型参数、滚动行为、导航守卫

references/reactivity.md - ref、reactive、computed、watch、watchEffect、响应式基础

references/directives.md - 自定义指令钩子、v-focus、v-click-outside、v-tooltip 模式

references/provide-inject.md - InjectionKey 类型、应用级 provide、只读模式

references/gotchas.md - 常见陷阱、vue-tsc 边缘情况、水合问题、竞争条件（来自 vuejs-ai/skills）