尤雨溪转发：vuejs-ai/skills 发布 vue-best-practices v19，AI 写 Vue 3 更规范

Vue 核心团队成员 SerKo 最近正式宣布，vue-best-practices 迎来 v19 版本发布。更值得注意的是，Vue 作者尤雨溪也转发推荐了这条消息。

这次更新主要针对 AI 编写 Vue 代码时的几个高频问题：组件臃肿、过度封装、组件通信混乱。

项目名为 vuejs-ai/skills，目前在 GitHub 上已经获得近 3000 Star。

什么是 vuejs-ai/skills？

vuejs-ai/skills 是一套专门为 Vue 3 AI 编程打造的 Skills。简单来说，就是给 Codex、Claude Code 等 AI 编程工具补上一套 Vue 开发最佳实践，让 AI 写代码时遵循更合理的组件设计、响应式和状态管理规范。

目前项目提供 8 个 Skills：

• 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 开发

基本覆盖了 Vue 日常开发的主要场景。

v19 核心更新

这次 vue-best-practices v19 主要围绕 组件设计、逻辑封装和数据流 三个方向进行优化。

1. 优化过多的 Props / Emits

AI 写 Vue 组件时，经常把大量属性和事件全部塞进一个组件。

<script setup lang="ts">
defineProps<{
  user: User
  loading: boolean
  editable: boolean
  permissions: string[]
  settings: Settings
}>()

defineEmits<{
  save: []
  cancel: []
  delete: []
  refresh: []
}>()
</script>

随着业务增加，组件越来越臃肿，后期修改一个功能就可能波及多个地方。v19 强调 合理划分组件职责，避免单个组件承担过多功能。同时也不会单纯因为代码行数多就强制拆分组件。

2. 避免 Composable 过度导出

这个问题在 AI 生成的 Vue 代码里同样常见。AI 喜欢把所有逻辑塞进 useXxx()，最后将内部状态和方法全部暴露出去。

export function useUser() {
  const user = ref(null)
  const loading = ref(false)
  const error = ref(null)

  function fetchUser() {}
  function updateUser() {}
  function resetUser() {}

  return {
    user,
    loading,
    error,
    fetchUser,
    updateUser,
    resetUser
  }
}

当业务复杂到一定程度，一个 composable 可能返回几十个属性和方法。v19 要求 只暴露消费者真正需要的状态和操作，将内部实现细节封装起来。同时按照职责拆分业务逻辑，避免出现巨型 useFeature()。

3. 解决 Props Drilling 和 Emit Hell

这次更新还有一个重点：优化多层组件通信。例如下面这种组件结构：

App
  └─ UserPage
      └─ UserPanel
          └─ UserForm

如果 UserForm 需要使用 App 中的数据，传统写法可能需要逐层传递 props，事件也需要一层层通过 emit 往上传。当组件嵌套很深时，维护起来非常痛苦。

v19 建议在合适场景下使用 provide/inject：

// 父组件
provide('user', user)

// 后代组件
const user = inject('user')

实际项目中，还可以配合 InjectionKey 实现类型安全。需要注意，普通父子组件通信依然推荐使用 Props / Emits。只有当中间组件单纯负责传递数据时，才考虑使用 provide/inject。

不止组件规范

查看项目源码可以发现，vue-best-practices 还覆盖了不少 Vue 开发细节，主要包括：

• 响应式管理：合理使用 ref、reactive、computed
• 组件规范：推荐 Composition API、script setup 和 TypeScript
• 数据流设计：明确状态归属，避免重复状态
• 性能优化：列表虚拟化、v-memo、v-once
• SSR 开发：服务端渲染相关最佳实践
• 生命周期管理：正确处理副作用与资源清理

另外，Skill 还要求 AI 在编码前阅读核心参考文档，并在完成后检查组件边界、响应式状态和数据流。这些规则都直接写在项目的 SKILL.md 中。

如何使用？

安装非常简单，终端执行：

npx skills add vuejs-ai/skills

根据提示选择需要的 Skills 和 AI 编程工具即可。支持兼容 Skills 机制的 AI Agent，例如 Codex、Claude Code 等。

安装完成后，可以直接这样向 AI 提问：

Use vue skill

帮我重构当前 Vue 3 页面，
优化组件拆分和状态管理，
减少不必要的 props、emits，
遵循 Vue 最佳实践。

官方建议加入 Use vue skill，提高 Skill 被正确调用的概率。

另外，Nuxt 项目也可以使用。SerKo 已经在评论区确认，相关 Vue 规则同样适用。

写在最后

对于经常使用 Codex、Claude Code 开发 Vue 项目的朋友，这套 Skills 值得一试。尤其是 老项目重构、复杂组件拆分、状态管理优化，都有比较直接的帮助。

不过，目前仓库仍属于 社区实验性项目，还没有正式归入 Vue 官方组织。

项目地址：https://github.com/vuejs-ai/skills

如果您对 Vue 3 或 AI 辅助开发感兴趣，不妨到 云栈社区 与更多前端开发者一起交流。