vue

Vue 3 开发

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

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

概览

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

适用场景

以下情况请使用此技能：

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

以下情况请改用 nuxt 技能：

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

对于带样式的 UI 组件： 使用 nuxt-ui 技能
对于无头且易于访问的组件： 使用 reka-ui 技能
对于 VueUse 组合式函数： 使用 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

加载文件

根据文件上下文，每次加载一个文件：

• 组件相关 → references/components.md
• 组合式函数相关 → references/composables.md
• 工具相关 → references/utils-client.md
• 测试 → references/testing.md
• TypeScript → references/typescript.md
• Vue Router → references/router.md

不要一次性加载所有文件——这会把上下文浪费在不相关的模式上。

可用指南

references/components.md - 使用响应式解构处理 Props、emits 模式、使用 defineModel 实现 v-model、插槽简写

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

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

references/testing.md - Vitest + @vue/test-utils、组件测试、组合式函数测试、路由模拟

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

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

示例

resources/examples/ 中提供了可运行的示例：

• component-example.vue - 包含所有模式的完整组件
• composable-example.ts - 可复用的组合函数