当前位置:首页>java>拒绝 AI 写“烂代码”,来看看这个vue官方skills

拒绝 AI 写“烂代码”,来看看这个vue官方skills

  • 2026-08-27 04:20:13
拒绝 AI 写“烂代码”,来看看这个vue官方skills

现状:AI的"经验主义"陷阱

用Cursor或其他编辑器写代码时,你是否遇到过这种尴尬:

"帮我写一个Vue组件" → AI愉快地给你生成了Vue 2的Options API"配置一下Vite" → 返回了一堆两年前的废弃配置项

问题根源在于:大模型的知识有截止日期。它就像一个读过很多书但很久没更新知识的程序员,凭着"肌肉记忆"写代码,结果往往是过时的。

最近Anthony Fu(Vue/Vite核心成员)开源的antfu/skills项目,给这个问题提供了一个优雅的解决方案。

核心思路:给AI配个"官方手册"

想象你要请一个外援程序员,你会给他什么?不是让他凭记忆写,而是扔给他一本厚厚的内部开发手册。

antfu/skills做的就是这件事——把Vue、Vite、Nuxt等框架的最新文档,打包成AI能理解的"技能包"。

传统方式:

// 你苦苦写Prompt:"请用Vue 3.5最新特性,使用Composition API, 不要使用废弃的语法,记得用TypeScript..."// AI还是可能搞错,因为它"以为"自己记得

使用Skill后:

// 直接注入官方上下文集// AI相当于拿着Vue 3.5的源码和文档在写代码// 不仅不会错,还能用出最佳实践

实战:三步接入你的开发流

第一步:安装技能包

npx skills vue# 这会抓取Vue/Nuxt/Vite的最新核心概念

第二步:在Cursor中配置系统提示

打开Cursor设置,将生成的Skill内容粘贴到System Prompt:

你是一位精通Vue生态的专家。请严格遵循以下规则:- 优先使用Vue 3.5的Composition API- 响应式数据使用ref/reactive,避免Options API- 使用useTemplateRef替代字符串ref(Vue 3.5新特性)- 组件命名遵循PascalCase,自动导入优先...

第三步:实际使用场景

场景A:生成符合生态的组件

<!-- 不配置Skill时,AI可能这样写(过时): --><template>  <div>{{ msg }}</div></template><script>export default {  data() {    return { msg: 'Hello' }  }}</script><!-- 配置Skill后,AI这样写(最新实践): --><script setup lang="ts">import { ref, useTemplateRef } from 'vue'const msg = ref('Hello')const inputRef = useTemplateRef<HTMLInputElement>('input')// 自动使用Vue 3.5推荐的useTemplateRef而非字符串ref</script><template>  <div>    <span>{{ msg }}</span>    <input ref="input">  </div></template>

场景B:代码审查

直接把Skill规则丢给AI:"按照这些规则检查我的代码"

// 你的旧代码const count = ref(0)watch(count, (newVal) => {console.log(newVal)})// AI基于Skill给出的建议:// "建议改用watchEffect或明确immediate选项,// 且Vue 3.5中对于简单副作用推荐使用flush: 'sync'"

背后:从Prompt工程到上下文工程

antfu/skills的深层意义在于,它标志着**Context Engineering(上下文工程)**的崛起。

过去我们需要绞尽脑汁写Prompt(提示词),现在框架作者直接把"标准答案"打包好。这背后是集成了MCP(Model Context Protocol)协议,让IDE能直接对接官方知识库。

对开发者的实际价值:

  • • 告别版本焦虑:不用担心AI用过时API写祖传代码
  • • 统一团队规范:新人也能写出符合核心团队风格的代码
  • • 降低学习成本:直接问AI"Vue 3.5有哪些变化",回答基于最新文档而非训练数据

结语

当AI有了"实时查文档"的能力,它才真正从"聊天机器人"变成了"靠谱队友`。

对于还在用AI写过期代码的开发者来说,接入antfu/skills可能是今晚最值得花半小时做的配置升级。


项目地址:github.com/antfu/skills

最新文章

随机文章