Vue Skills 使用指南:让AI写出的Vue 3代码更规范

摘要:如果你用过AI写Vue 3代码,应该遇到过这种情况:代码能跑,但写法不太对。比如该用computed的地方用了ref,或者TypeScript类型写得乱七八糟。这不是AI的问题,是没人教过AIVue的正确写法是什么。

如果你用过AI写Vue 3代码,应该遇到过这种情况:代码能跑,但写法不太对。比如该用computed的地方用了ref,或者TypeScript类型写得乱七八糟。

这不是AI的问题,是没人教过AI"Vue的正确写法是什么"。

Vue团队成员Yunfei He开发了一个叫vue-skills的开源项目,专门解决这件事。尤雨溪也转发推荐过。简单说,它就是一套给AI看的"Vue 3避坑指南"。


vue-skills是什么

vue-skills不是组件库,也不是脚手架。它是一套规则集,把Vue 3的最佳实践、Composition API的常见坑、TypeScript的配合方式,整理成AI能理解并执行的规范

你可以把它理解成:给AI装了一本"Vue 3官方用法说明书"。以后你让AI写Vue代码,它会先翻翻这本书,再动手写


它解决了什么问题

AI写Vue代码有两个老毛病:

一是"时空错乱"。AI的训练数据里有Vue 2也有Vue 3,有时候它会把Options API和Composition API混着用,写出来的代码四不像。

二是"能跑就行"。AI生成的代码逻辑上没错,但写法上可能不是最优的。比如ref套ref这种反模式,AI不觉得有问题,但你review代码时会很头疼

vue-skills就是解决这两个问题的。它明确告诉AI:Vue 3应该这样写,那样写是坑,别踩。


里面包含哪些规则

目前vue-skills覆盖了几个核心领域

vue-best-practices:这是最核心的部分。涵盖Composition API的正确用法、TypeScript配合Vue的高频问题、项目结构规范、性能优化建议等。

pinia-best-practices:专门针对Pinia状态管理。包括Store怎么设计、类型怎么推导、哪些写法容易出错。

vue-router-best-practices:Vue Router 4的使用规范,涉及导航守卫、路由参数处理、路由组件生命周期等。

vue-testing-best-practices:测试相关规范,覆盖Vitest、Vue Test Utils、Playwright的使用方式。

vue-development-guides:构建Vue或Nuxt项目的通用指南,包括组件拆分原则、数据流管理、核心设计理念。

create-adaptable-composable:帮助生成可复用的composables,使用MaybeRef和MaybeRefOrGetter这类灵活输入模式。


怎么安装和使用

安装很简单,一行命令搞定:

npx add-skill hyf0/vue-skills

运行后按提示选择就行,安装完成会在项目目录里生成对应的配置文件

使用时的关键点:每次向AI提问时,在问题前面加上Use vue skill这个前缀。

举个例子:

Use vue skill, 帮我创建一个Vue 3组件,用Composition API和TypeScript,实现一个计数器功能。

加上这个前缀后,AI就会自动参考vue-skills里的规则来生成代码,而不是凭自己的"感觉"瞎写


哪些AI工具支持

目前支持Agent Skills协议的AI编程助手都能用,包括:

  • Cursor

  • Claude Code

  • VS Code Agent

  • GitHub Copilot Agent

  • Gemini CLI

这些工具会自动识别本地安装的Skills,不需要额外配置


一个真实的使用场景

假设你写了一个Pinia Store,不确定写法对不对。以前你可能会去翻文档、搜Stack Overflow。现在你直接问AI:

"Use vue skill, 帮我检查这个Pinia Store的写法有没有问题"

AI会按照vue-skills里的pinia-best-practices规则来review你的代码,指出问题并给出修改建议。整个过程可能也就一两分钟


它和普通Prompt有什么区别

有人可能会说:我自己写一段Prompt,告诉AI"写Vue 3要用Composition API、要用TypeScript",不也一样吗?

区别在于:Skills是结构化的、可验证的、持续维护的

你自己写的Prompt,AI可能理解不到位,也可能选择性忽略。而Skills里的每条规则都经过测试,确保"启用后代码质量确实提升了"才会放进去。而且Skills由Vue团队成员维护,会跟随Vue生态的演进持续更新。


写在最后

vue-skills目前还是早期实验项目,规则集还在完善中。但它代表了一个方向:AI写代码的质量,不只取决于模型本身,更取决于你给AI喂了什么"技能"。

如果你是Vue开发者,平时经常用AI辅助编程,vue-skills值得试试。它不是必需品,但用了之后,AI生成代码的质量会有明显提升。

项目GitHub地址:https://github.com/hyf0/vue-skills

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_13667