#Vue 生态 Skills

Vue 3 的 Composition API 和 <script setup> 语法简洁且类型友好，Claude Code 对 Vue 生态有良好的支持。以下 Skills 覆盖 Vue 3 开发的完整工具链。

#推荐 Skills

#Vue Best Practices

vue-best-practices 来自 vuejs-ai，是一套完整的 Vue 开发工作流指南，涵盖架构确认、组件设计、响应式系统、性能优化和自检清单。推荐在所有 Vue 项目中使用。

npx skills add https://github.com/antfu/skills --skill vue-best-practices

核心工作流（按顺序执行）：

#Vue（Vue 官方文档）

vue 基于 Vue 3.5 官方文档生成，覆盖 Composition API、<script setup> 宏、响应式系统和内置组件。

npx skills add https://github.com/antfu/skills --skill vue

覆盖范围：

核心偏好：

• 优先使用 TypeScript
• 优先使用 <script setup lang="ts"> 而非 <script>
• 性能优先使用 shallowRef 而非 ref（不需要深层响应时）
• 始终使用 Composition API 而非 Options API

#Pinia

pinia 基于 Pinia v3.0.4 官方文档，覆盖 Store 定义、插件、Composables 集成、测试和 SSR。

npx skills add https://github.com/antfu/skills --skill pinia

覆盖范围：

关键建议：

• 优先使用 Setup Store（复杂逻辑、Composables、watchers）
• 使用 storeToRefs() 解构 state/getters 保持响应性
• Actions 可直接解构（已绑定到 Store）
• 在函数内调用 Store（非模块顶层），特别是 SSR 场景
• 为每个 Store 添加 HMR 支持

#Vite

vite 基于 Vite 8 beta（Rolldown 驱动），覆盖配置、插件 API、SSR 和 Rolldown 迁移。

npx skills add https://github.com/antfu/skills --skill vite

覆盖范围：

#VueUse Functions

vueuse-functions 是一个决策和实现指南，将需求映射到最合适的 VueUse 组合式函数，覆盖 200+ 个函数。

npx skills add https://github.com/antfu/skills --skill vueuse-functions

常用函数分类：

使用策略：

#Vue Router Best Practices

vue-router-best-practices 来自 vuejs-ai，覆盖 Vue Router 4 的导航守卫、路由参数和路由-组件生命周期交互。

npx skills add https://github.com/antfu/skills --skill vue-router-best-practices

覆盖场景：

#Skills 组合建议

#下一步

• React 生态 Skills — React 推荐 Skills
• 前端通用 Skills — 跨框架的前端 Skills
• Vue 开发最佳实践 — 完整的 Vue 开发指南
• 技能市场 — 浏览和安装社区 Skills