Vue
专为Vue 3应用提供构建、调试与代码审查的AI助手
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Vue。 它的用途是：专为Vue 3应用提供构建、调试与代码审查的AI助手 完整的 Skill 内容见：https://321skill.com/skills/vue-x-2/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我的Vue 3组件里有一个用`ref`包装的数组，我向其中`push`了新项，但模板没有更新。’ 它会检查你的代码，指出可能的原因，比如直接对`.value`进行了重新赋值破坏了响应性，并建议使用解构或`Array.prototype`方法。或者，当你说：‘Pinia store的状态更新了，但组件没反应。’ 它会引导你检查是否使用了正确的`storeToRefs`或在模板中正确访问了状态。
介绍
这个Skill旨在解决Vue 3开发中常见的疑难杂症。当你的应用出现UI不更新、响应性丢失、侦听器不触发或循环、Pinia状态管理报错、Vue Router路由参数变更不刷新组件、模板引用为null、SSR水合不匹配、性能卡顿等问题时，它可以提供精准的诊断和修复建议。
它通过分析你的代码上下文和错误信息，定位问题的根本原因。例如，它会检查你是否在解构时丢失了响应性，是否忘记了.value，或者组件是否因缓存而未正确更新。它还能审查代码结构，帮助你将Vue 2的Options API迁移到Composition API和<script setup>。
它最适合正在开发或维护Vue 3应用的前端和全栈开发者。无论是遇到棘手的响应式bug，还是在进行代码重构和性能优化，这个Skill都能提供专业的指导。
使用时，请尽可能清晰地描述你遇到的问题、复现步骤和相关的代码片段。对于复杂的性能问题，提供最小可复现示例或性能分析截图会更有帮助。请注意，它主要聚焦于Vue 3核心生态，对于Nuxt、Vite构建配置或React/Svelte框架的问题，建议使用对应的专用Skill。
核心特点
与通用前端开发Skill相比，它深度聚焦Vue 3的核心痛点，如响应性原理、Composition API、Pinia和Vue Router的特定错误，能提供框架级的精准诊断，而非泛泛的代码建议。
注意事项
不适用于Nuxt框架的SSR、路由和数据获取，也不处理Vite构建配置、React或Svelte相关的问题。
常见问题
Vue 3中解构响应式对象后失去响应性怎么办？
使用`toRefs`或`storeToRefs`（针对Pinia）来保持解构后的响应性。
Pinia报错“getActivePinia() was called but there was no active Pinia”如何解决？
确保在Vue应用挂载（`app.mount()`）之前正确安装并使用了Pinia实例。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/vue-x-2/raw/index.md 读取 Vue 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/vue-x-2/raw/index.md（查看排版版本）