别再让 AI 瞎写 Vue 代码了！给它装上 Vue Skill 才是正解

在现代前端开发中，AI 越来越多地被用来辅助写代码、生成组件、甚至构建整个页面。但一个常见问题是：AI 很会生成代码，但代码不一定符合社区最佳实践。为了解决这个问题，Anthony Fu（Vue 核心社区贡献者）开源了一个 Skills 项目，旨在让 AI 在辅助写代码时“知道怎么写才正确”。这篇文章带你一步步理解、安装并在 Vue 项目中实践它。

Skills 是一种标准化的知识包（Markdown 文档/文件集），它把官方文档、最佳实践、代码习惯等结构化后整理好，让 AI Agent（如 Claude、GPT 等）可以直接用它作为“知识来源”，从而输出更专业、更贴近真实社区写法的代码。

用更通俗的话说：

❝ 把官方文档、学习笔记、最佳实践标准化成一堆“技能卡片”，AI 能按需调用它，而不是凭模糊记忆写代码。

antfu/skills 包含很多不同主题的技能，每一种代表一个关注点或技术栈。例如：

Skill 名称

用途简述

antfu

Anthony Fu 的个人最佳实践（pnpm、vitest、eslint 等）

vue

Vue 核心知识（响应式、组件、Composition API 等）

nuxt

Nuxt 框架重点（路由、服务端渲染等）

pinia

Vue 状态管理库 Pinia

vite

vite 构建工具

vitest

vitest 单元测试

unoCSS

原子化 CSS 引擎 UnoCSS

slidev

生成演示幻灯片的工具

vue-best-practices

vue + TS 最佳实践规范规则

这些 Skill 均来自官方文档或社区公认的写法，通过结构化提炼出来，方便 AI 引用。

如何安装 Skills

要安装这个技能集合，可以使用官方提供的 skills CLI：

pnpx skills add antfu/skills --skill='*'

这句命令会把 所有的 Skill 都安装到本地（默认是当前用户环境）。如果你只想装某个单独的 Skill，例如 Vue 技能：

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

或者装 Nuxt 相关技能：

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

安装成功后，你会看到类似结构：

skills/├── vue/│   ├── SKILL.md│   └── …├── nuxt/│   └── SKILL.md├── pinia/├── vite/└── …

每个文件夹中都有一个 SKILL.md，它就是 AI Agent 用来理解该技能的内容。

如何使用 Skills（AI 写代码场景）

❝ 安装好 Skill 后，你不需要去改变写代码方式，而是让 AI 调用这些技能辅助理解。

例如，你在 AI 聊天环境（Claude、GPT）中这样发问：

示例 1 — Vue 组件

写一个 Vue3 组件，实现一个可复用的按钮，并且支持 disabled、loading 属性，按最佳实践写。

AI 在有 Skill 后，可以在后台优先参考 vue/SKILL.md 的组件部分写代码，从而输出更规范的写法。

示例 2 — Nuxt 页面

创建一个 Nuxt 3 页面，包含文件路由、API 调用并展示数据。

有了 nuxt Skill，AI 将按官方规范生成 Nuxt 样板代码，包含正确路由格式与 useAsyncData 用法。

具体 Skill 例子详解

下面举两个常用 Skill 的核心内容，让你明白“这玩意儿到底帮了什么”。

✅ Vue Skill 解析

在 vue/SKILL.md 中，这些内容是重点：

核心概念

主题

内容

响应式系统

ref()

, reactive(), computed() 等基本 API

生命周期

组件挂载、销毁阶段钩子

事件 & Props

如何声明 props、处理自定义事件

代码建议

• 推荐使用