/SKILL.md

name, description, license

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

Vue 3 开发

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

当前稳定版： Vue 3.5+，具备增强的响应式性能（内存占用减少 56%，数组追踪速度提升 10 倍）、新的 SSR 功能以及改进的开发体验。

概述

Vue 3 项目的渐进式参考系统。仅加载与当前任务相关的文件，以尽量减少上下文占用（基础约 250 tokens，每个子文件 500-1500 tokens）。

何时使用

在以下场景使用本技能：

• 编写 .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 - 如果正在调试边界情况或水合问题

不要一次性加载所有文件。 只加载与当前任务相关的内容。

快速开始

<script setup lang="ts">
const { count = 0 } = defineProps<{ count?: number }>()
const emit = defineEmits<{ update: [value: number] }>()
</script>

<template>
  <button @click="emit('update', count + 1)">
    计数：{{ count }}
  </button>
</template>

可用指南

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

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

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

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、readonly 模式

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