vue-development-guides

📁 hello-lizhihua/skills_zh-cn 📅 9 days ago
1
总安装量
1
周安装量
#51336
全站排名
安装命令
npx skills add https://github.com/hello-lizhihua/skills_zh-cn --skill vue-development-guides

Agent 安装分布

trae 1

Skill 文档

Vue.js 开发指南

任务清单

  • 遵循核心原则
  • 除非有充分理由,否则遵循默认设置
  • 遵循响应式最佳实践
  • 遵循组件最佳实践
    • 遵循 Vue SFC 最佳实践
    • 保持组件专注
      • 需要时将大组件拆分为小组件
      • 如果适用,将状态/副作用移入组合式函数
    • 遵循数据流最佳实践

核心原则

  • 保持状态可预测: 单一事实来源,派生其他所有内容。
  • 使数据流显式: 大多数情况下,Props 向下,Events 向上。
  • 倾向于小型、专注的组件: 更易于测试、复用和维护。
  • 避免不必要的重新渲染: 明智地使用计算属性和侦听器。
  • 可读性至关重要: 编写清晰、自文档化的代码。

默认设置(除非用户另有说明)

  • 优先使用 组合式 API 而非选项式 API。

响应式

重要:在创建、更新组件或组合式函数时,必须遵循 references/reactivity-guide.md 进行响应式状态管理。

组件

重要:在使用 Vue SFC 时,必须遵循 references/sfc-guide.md 中的最佳实践。

  • 默认优先使用 <script setup lang="ts"> (TypeScript) 的 Vue 单文件组件 (SFC)。
  • 在 Vue SFC 中,保持各部分顺序为:<script> → <template> → <style>。

保持组件专注

当一个组件具有 超过一个明确的职责(例如数据编排 + UI,或多个独立的 UI 部分)时,对其进行拆分。

  • 优先选择 较小的组件 + 组合式函数 而非一个“巨型组件”
  • 将 UI 部分 移入子组件(props 输入,events 输出)。
  • 将 状态/副作用 移入组合式函数 (useXxx())。

注意:此规则默认也适用于 Vue / Nuxt 项目中的入口组件(例如 App.vue)。

数据流

重要:在使用以下方式在组件之间传递和接收数据时,必须遵循 references/data-flow-guide.md:

  • Props
  • Emits
  • v-model
  • provide/inject

对于跨应用共享数据,请遵循 references/state-management-guide.md 并考虑使用 Store 作为状态管理解决方案。