Vue
Vue 3 应用构建、调试与审查专家
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Vue。 它的用途是：Vue 3 应用构建、调试与审查专家 完整的 Skill 内容见：https://321skill.com/skills/vue-x-9/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我的 Pinia store 报错 "getActivePinia() was called but there was no active Pinia"，请帮我检查代码。' AI 会定位到错误调用位置，并建议在 main.ts 中确保 app.use(createPinia())，同时在 setup 函数内调用 useStore，或使用 pinia 实例传递给外部函数。
介绍
本 Skill 专门解决 Vue 3 开发中的常见痛点：UI 在状态变更后不更新、响应式对象在解构或重新赋值后丢失响应性、忘记 .value 导致数据不同步、watch 从未触发或陷入死循环（“Maximum recursive updates exceeded”）、props 或 v-model 停止同步、模板 ref 为 null、SSR 水合不匹配、路由参数变化不重载组件、Pinia 报“getActivePinia() was called but there was no active Pinia”、控制台出现“Failed to resolve component”或“Extraneous non-props attributes”、未捕获的错误导致页面空白、长列表或大对象导致输入卡顿、图表库放入 ref() 后失效、scoped 样式无法穿透子组件、以及从 Vue 2 Options API 迁移到 Composition API 和 script setup 时遇到的问题。
使用方法：直接向 AI 描述你遇到的具体问题（如“模板 ref 为 null”或“watch 陷入循环”），并附上相关代码片段。AI 会分析代码逻辑，指出响应式链断裂点、watch 条件错误、组件注册遗漏等根因，并给出修复方案。对于迁移场景，AI 会自动将 Options API 代码转换为 Composition API + script setup 的等价实现。
适合 Vue 3 前端开发者、从 Vue 2 迁移到 Vue 3 的团队、全栈开发者（需处理 Vue 前端部分）、以及正在学习 Vue 3 组合式 API 的高校学生和求职者。
使用建议：尽量提供完整的代码上下文（组件代码、父组件、Store 定义等），并说明 Vue 版本（3.2/3.3/3.4）。本 Skill 不处理 Nuxt 特有的 SSR 路由、数据获取、Vite 构建配置，以及 React/Svelte 相关问题。对于性能优化，建议配合浏览器 DevTools 的 Vue 插件一起使用。
核心特点
本 Skill 针对 Vue 3 最常踩的 20+ 个具体陷阱（如响应式丢失、watch 循环、Pinia 未初始化等）提供精准诊断，而非泛泛的 Vue 知识问答；同时覆盖 Options API 到 Composition API 的自动迁移，这是其他通用 VSCode 插件或 ChatGPT 插件难以做到的。
注意事项
不适用于 Nuxt 特定 SSR、路由、数据获取，Vite 构建配置，以及 React/Svelte 项目。
常见问题
为什么我的模板 ref 为 null？
常见原因：组件未挂载前访问 ref、使用了与 ref 同名的变量覆盖、或者 ref 定义在 v-if 子节点中但条件未满足。检查是否在 onMounted 中访问，以及 ref 名称是否与 data 变量冲突。
Pinia 报错 'getActivePinia() was called but there was no active Pinia' 如何解决？
这个错误通常是因为在组件 setup 函数外部（如路由守卫、普通函数）调用 useStore 时，Pinia 实例尚未注入。解决方案：确保在 main.ts 中 app.use(createPinia())，且 useStore 只在 setup 内或通过 inject 提供的 Pinia 实例中调用。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/vue-x-9/raw/index.md 读取 Vue 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/vue-x-9/raw/index.md（查看排版版本）