vue

vue skill 概览

vue skill 适合解决什么问题

vue skill 是一份聚焦型指南，用来生成和审查符合当前最佳实践的 Vue 3 代码，重点覆盖 Composition API、<script setup lang="ts">、编译器宏、响应式 API，以及 Transition、Teleport、Suspense、KeepAlive 等内置组件。
如果你希望 AI agent 产出的 Vue Single File Components 一开始就遵循现代 Vue 写法，而不是退回到较旧的 Options API 模式，这个 vue skill 会特别有用。

谁应该安装这个 vue skill

这个 vue skill 适合前端开发者、全栈开发者，以及经常让 AI 生成 Vue 组件、composable 或做重构的用户。
如果你特别在意输出结果要以 TypeScript 为先、理解宏语法，并且与 Vue 3.5 时代的官方文档保持一致，而不是混杂 Vue 2 / 早期 Vue 3 的旧习惯，它的价值会更明显。

它真正解决的实际任务

大多数用户并不需要一份泛泛而谈的框架简介。真正需要的是让 agent 稳定写出这样的 Vue 代码：

• 默认使用 Composition API
• 优先使用 <script setup lang="ts">
• 正确处理 defineProps、defineEmits 和 defineModel
• 更审慎地选择 ref、shallowRef、computed 和 watch
• 只有在确实适合时才使用高级内置能力

这正是 vue for Frontend Development 的实际价值：减少 AI 生成代码后续清理和返工的成本。

这个 skill 真正有区分度的地方

它最强的差异点在于：有明确取向。源码内容明确偏好 TypeScript、<script setup lang="ts"> 和 Composition API，同时不鼓励 Reactive Props Destructure。它还提供了几类高度聚焦的参考资料：

• script setup 宏
• 响应式与较新的核心 API
• 高级内置组件与指令

因此，相比一个宽泛的“教我 Vue”提示词，这个 skill 更适合直接落地实现。

这个 skill 不打算覆盖什么

它不是一份完整的 Vue 生态地图。它不能替代路由、状态库、SSR 框架、测试或构建工具等主题的深度文档。
如果你的核心任务是 Nuxt 架构、Vue Router 配置、Pinia 设计或部署流水线，那么 vue skill 可以帮助你提升组件层代码风格，但不应该成为你唯一的信息来源。

如何使用 vue skill

vue 的安装上下文

在支持 skills 的环境中，用下面的命令安装：

npx skills add antfu/skills --skill vue

仓库信息表明，这个 skill 位于 antfu/skills 下的 skills/vue。这里并不是单独安装 Vue 框架本身；它提供的是更优的 AI 辅助 Vue 代码生成指导，不是框架 runtime。

建议先读这些文件

如果你想在使用 vue skill 之前先走一条信息密度最高的路径，建议按这个顺序阅读：

1. skills/vue/SKILL.md
2. skills/vue/references/script-setup-macros.md
3. skills/vue/references/core-new-apis.md
4. skills/vue/references/advanced-patterns.md
5. skills/vue/GENERATION.md

为什么是这个顺序：

• SKILL.md 先说明它的运行偏好和适用范围。
• 三个 reference 文件承载了 agent 最可能直接应用的实操细节。
• GENERATION.md 则说明这些内容由 Vue 官方文档生成，并跟踪的是较新的快照。

vue skill 需要哪些输入信息

vue usage 的效果，很大程度上取决于你给出的请求质量。建议至少告诉 agent：

• 组件用途
• props 和触发的事件
• 是否需要 v-model
• 预期的 state 结构
• 是否涉及异步数据
• 输出目标是组件、composable，还是模式示例
• 如果你不是最新 Vue 3，需说明版本限制
• 是否必须使用 TypeScript
• 是否有 UI 或性能约束

较弱的输入：

• “Make a Vue component for search.”

较强的输入：

• “Create a Vue 3.5 SFC using <script setup lang="ts"> for a searchable product list. Props: items, loading, modelValue. Emit update:modelValue and select. Use defineModel if appropriate, debounce local search input, and prefer shallowRef for large item arrays.”

把模糊目标改写成高质量 vue 提示词

想更好地调起 vue skill，关键是把实现选择说清楚。一个好用的提示结构通常是：

1. 说明要产出的对象
2. 指定 Vue 约定
3. 定义输入与输出
4. 补充行为与约束
5. 在存在权衡时要求解释理由

示例：

“Using the vue skill style, write a Vue 3 component with <script setup lang="ts">. Use Composition API only. Define typed props and emits, avoid Options API, and explain whether ref or shallowRef is the better fit for the main state. Include template and minimal styles.”

这会比一句笼统的“write Vue”效果更好，因为它和该 skill 的内建偏好是对齐的。

这个 skill 默认会把代码风格推向哪里

源码材料会明显把 agent 引导到这些方向：

• Vue 3.5
• Composition API
• <script setup lang="ts">
• 基于宏的组件定义
• 带类型的 props 和 emits
• 在性能敏感数据上有选择地使用 shallowRef

如果你需要 Options API、纯 JavaScript，或者更偏旧式的 Vue 写法，请明确说出来，因为这个 skill 默认是回避这些模式的。

vue usage 最适合的场景

这个 vue guide 最擅长的场景包括：

• 编写新的 Vue SFC
• 将旧组件重构为 <script setup>
• 定义带类型的 props、emits 和 model
• 在 ref、reactive、computed 和 watcher 之间做选择
• 使用 Transition、Teleport、Suspense 或 KeepAlive
• 生成遵循现代 Vue 模式的 composable 示例

但如果你的需求主要是纯视觉设计，或者与框架无关的前端任务，它的帮助就没那么大。

首次产出的实用工作流

一个可靠的流程是：

1. 先要求生成一个首版 Vue SFC，并明确 props、emits 和 state 结构。
2. 检查生成出来的 API 是否真的符合你的组件契约。
3. 再要求第二轮优化，收紧响应式选择、类型定义和边界情况。
4. 最后再加上过渡、suspense 边界等高级特性。

这个顺序很重要，因为在基础状态流还不清晰时，高级 Vue 能力很容易被滥用。

会直接影响输出质量的仓库细节

从 skill 源码中能提取出一些很有价值的细节：

• defineModel 被视为在 Vue 3.4+ 可用
• withDefaults 在 Vue 3.4 及以下依然重要
• reactive() 在解构后会丢失响应性
• 当不需要深层响应时，更推荐 shallowRef
• Transition、Suspense 等内置能力有对应的实用模式说明

这些正是能让生成代码超越“浅看一眼仓库”水平的关键信息。

非常适合这个 skill 的请求示例

好的 vue usage 请求包括：

• “Refactor this Options API component into <script setup lang="ts">.”
• “Generate typed defineProps and defineEmits for this form component.”
• “Show a Vue 3 example using Teleport for a modal.”
• “Explain whether to use watch, watchEffect, or computed here.”
• “Rewrite this component to use defineModel on Vue 3.4+.”

安装前常见的不匹配场景

不要指望仅凭 vue skill 就解决这些问题：

• 项目脚手架
• 路由架构
• 大型应用中的全局状态设计
• SSR 或 Nuxt 特有决策
• 测试运行器配置
• CSS 框架集成细节

如果这些才是你的主要阻碍，那应把它安装为“提升组件生成质量”的工具，而不是完整的 Vue 技术栈指南。

vue skill 常见问题

这个 vue skill 适合初学者吗？

适合，但前提是你已经在使用 Vue 3，并且希望 AI 输出更干净。它不是一套给新手的完整课程，但它通过偏向一种清晰风格——使用 <script setup lang="ts"> 的 Composition API——来减少混乱。
这种一致性对较新的用户很有帮助，能避免不同写法混杂在一起。

vue skill 支持较旧的 Vue 模式吗？

支持，但不会作为默认首选。源码明确写了应始终优先 Composition API，而不是 Options API。
如果你的代码库历史包袱较重，仍然可以使用这个 skill，但你需要明确提出兼容性约束，并且仔细审查迁移结果。

它和普通的 Vue 提示词有什么区别？

普通提示词往往会生成风格不一致的 Vue 代码：API 混用、类型较弱、宏写法过时。vue skill 给 agent 的是一套更收敛的执行手册，包含偏好设定、现代宏用法和定向参考资料。通常意味着你后续要手动修正的内容更少。

如果我用的是 Nuxt 或更大的技术栈，只安装 vue 就够了吗？

不够。vue install 能帮助你处理组件和响应式层面的指导，但更大的技术栈问题仍然需要 Nuxt、路由、状态管理、数据获取和部署方面的知识。
把它理解为 Vue 代码生成层，而不是整套应用架构 skill，会更准确。

什么情况下不该用 vue skill？

如果你的任务是下面这些，就可以跳过它：

• 与框架无关的 UI 代码
• React/Angular/Svelte 相关工作
• 纯后端实现
• 以 Nuxt 特有约定为主、几乎不涉及原生 Vue 组件实现
• 严格维护遗留 Options API，且不允许使用现代模式

它覆盖高级 Vue 特性吗？

覆盖，但比较克制。附带的参考资料包含 Transition、Teleport、Suspense、KeepAlive、指令、响应式 API、生命周期钩子和宏。
这已经足够应对很多真实的前端任务，但它并不打算变成一本完整的 Vue 百科。

如何改进 vue skill 的使用效果

先明确版本与兼容性边界

这个 skill 基于 Vue 3.5 时代的指导。如果你的应用使用的是 Vue 3.3、3.4，或者宏支持存在更老的限制，请一开始就说清楚。
这对 defineModel 这类特性尤其重要，也会影响 props 默认值的处理方式。

不要只说 UI 想法，要给出组件契约

想提升 vue 输出质量，最快的方法是直接提供：

• prop 名称和类型
• 触发的事件
• model 绑定
• 异步状态
• 空状态与错误状态
• 父子组件职责边界

这个 skill 在“契约明确”的前提下很擅长落地实现；但如果你只给一个模糊的 UI 描述，让它自行推断完整 API，它的表现就会弱一些。

明确要求它解释响应式选择

很多 Vue 问题并不出在模板语法，而是状态建模。可以直接在提示词里要求这些权衡：

• “Use shallowRef if deep tracking is unnecessary.”
• “Explain whether computed or watch is more appropriate.”
• “Avoid destructuring reactive objects unless using toRefs.”

这比抽象地要求“best practices”更有效，因为它直接对齐了 references 中最有价值的部分，也更能提升代码质量。

尽早识别常见失败模式

拿到首轮结果后，优先检查这些问题：

• 明明要 Composition API，却出现了 Options API
• 用了普通 <script>，而不是 <script setup lang="ts">
• defineProps 或 defineEmits 没有类型
• 不必要的深层响应式
• 本该用 computed 的地方误用了 watcher
• 没有实际需求却加入了高级内置能力

这些是通用生成最容易偏离该 skill 目标质量线的地方。

一次只迭代一个重点

在第一轮回答之后，不要试图一次性把所有内容都改完。更稳妥的方式是分阶段优化：

1. API 形状
2. 类型与宏
3. 响应式正确性
4. 渲染状态
5. 高级交互模式

这样更容易验证每一步修改，也能让 agent 持续贴着 vue guide 的方向前进，而不是不可控地把整个组件重新生成一遍。

把 reference 文件当作升级路径来用

如果第一版结果已经接近可用，但还不够扎实，可以直接引导 agent 参考 skill 自带文件：

• references/script-setup-macros.md：处理 props、emits、models、slots 和宏语法
• references/core-new-apis.md：处理响应式、watchers 和 composables
• references/advanced-patterns.md：处理内置组件和指令

这是提升 vue for Frontend Development 输出质量最实用的方法之一，不必从头重写整个提示词。

分别要一个最小版和一个生产版

一个高收益模式是：

• 第一次请求：最小可运行的 SFC
• 第二次请求：加入类型、状态、可访问性和性能选择的生产版

这样既能避免首稿过度膨胀，也更容易看清哪些地方才是真正需要做 Vue 特定决策的。

让这个 skill 与你的代码库规则保持一致

如果你团队的约定和这个 skill 的默认偏好不一致，请直接说清楚。例如：

• 只用 JavaScript
• 不用 defineModel
• 避免 Suspense
• 用显式 prop 对象，而不是纯类型声明
• 除非特别要求，否则不要使用高级内置能力

vue skill 是有明确立场的，这本身是优点；但只有把这些默认值调整到与你真实仓库约束一致时，结果才会最好。