Vue 核心团队成员 SerKo 宣布 vue-best-practices v19 正式发布，该项目专为 Vue 3 AI 编程打造，消息随后被 Vue 作者尤雨溪转发。
这次更新主要针对 AI 编写 Vue 代码时常见的三个问题：组件臃肿、过度封装、组件通信混乱。项目名为 vuejs-ai/skills，目前已获得近 3000 Star。
什么是 vuejs-ai/skills？
vuejs-ai/skills 是一套为 Vue 3 AI 编程设计的 Skills，本质上是给 Codex、Claude Code 等 AI 编程工具补充一套 Vue 开发最佳实践，让 AI 生成代码时遵循更合理的组件设计、响应式和状态管理规范。
目前项目提供 8 个 Skills，覆盖 Vue 日常开发的主要场景：
- vue-best-practices：Vue 3 最佳实践
- vue-router-best-practices：路由开发规范
- vue-pinia-best-practices：Pinia 状态管理
- vue-testing-best-practices：组件与 E2E 测试
- vue-jsx-best-practices：JSX 开发
- vue-options-api-best-practices：Options API 开发
- vue-debug-guides：Vue 问题排查
- create-adaptable-composable：可复用 Composable 开发
v19 核心更新
1. 优化过多的 Props / Emits
AI 写 Vue 组件时容易把大量属性和事件全部塞进一个组件。v19 强调合理划分组件职责，避免单个组件承担过多功能，同时也不会单纯因为代码行数多就强制拆分组件。
2. 避免 Composable 过度导出
AI 倾向于将所有逻辑塞进 useXxx() 函数，最终把内部状态和方法全部暴露。v19 要求只暴露消费者真正需要的状态和操作，按职责拆分业务逻辑，避免巨型 useFeature()。
3. 解决 Props Drilling 和 Emit Hell
多层组件通信是 Vue 开发中的常见痛点。v19 建议在合适场景下使用 provide/inject 来避免逐层传递，但普通父子组件通信仍推荐 Props / Emits，只有当中间组件单纯负责传递数据时才考虑 provide/inject。
更多开发细节覆盖
vue-best-practices 还覆盖了多项 Vue 开发细节：
- 响应式管理：合理使用 ref、reactive、computed
- 组件规范：推荐 Composition API、script setup 和 TypeScript
- 数据流设计：明确状态归属，避免重复状态
- 性能优化：列表虚拟化、v-memo、v-once
- SSR 开发：服务端渲染相关最佳实践
- 生命周期管理：正确处理副作用与资源清理
如何使用
安装命令：
npx skills add vuejs-ai/skills支持 Codex、Claude Code 等兼容 Skills 机制的 AI Agent。安装后可直接使用 Use vue skill 指令让 AI 遵循最佳实践重构代码。
SerKo 在评论区确认，相关 Vue 规则同样适用于 Nuxt 项目。
目前该仓库属于社区实验性项目，尚未正式归入 Vue 官方组织。
