Back to Details

vue-best-practices

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Vue Best Practices

Vue 最佳实践

Use this skill as a rulebook for fixing common Vue 3 anti-patterns in production apps.
将本Skill作为修复生产应用中常见Vue 3反模式的规则手册。

Workflow

工作流程

  1. Open 
    AGENTS.md
    .
  2. Select only the relevant rule files from 
    rules/
    .
  3. Apply the smallest safe change that resolves the issue.
  4. Re-check behavior and run the project's lint, test, and build checks.
  1. 打开 
    AGENTS.md
    文件。
  2. 从 
    rules/
    目录中仅选择相关规则文件。
  3. 应用能够解决问题的最小安全变更。
  4. 重新检查代码行为并运行项目的 lint、测试和构建检查。

Repository Guardrails

仓库约束规则

  • Use Vue 3 Composition API with 
    <script setup lang="ts">
    .
  • Follow the existing state-management pattern already used by the project (Vuex, Pinia, etc.).
  • Do not create new global components.
  • Do not add comments unless the user explicitly asks for them.
  • Do not import Vue compiler macros (
    defineProps
    , 
    defineEmits
    , 
    defineExpose
    , 
    withDefaults
    ) from 
    vue
    .
  • Match ESLint style defaults in this repo: semicolons, single quotes, trailing commas for multiline, 2-space indent.
  • 使用带有 
    <script setup lang="ts">
    的 Vue 3 组合式API。
  • 遵循项目已采用的现有状态管理模式（Vuex、Pinia等）。
  • 不要创建新的全局组件。
  • 除非用户明确要求，否则不要添加注释。
  • 不要从 
    vue
    导入Vue编译器宏（
    defineProps
    、
    defineEmits
    、
    defineExpose
    、
    withDefaults
    ）。
  • 匹配本仓库的ESLint风格默认设置：分号、单引号、多行代码末尾加逗号、2空格缩进。

Output Expectations

输出要求

  • Explain which rules were applied and why.
  • Prefer composables and pure utilities over ad-hoc component logic.
  • Keep changes incremental; avoid broad rewrites unless asked.
  • 说明应用了哪些规则及其原因。
  • 优先使用组合式函数和纯工具类，而非临时组件逻辑。
  • 保持变更为增量式；除非被要求，否则避免大范围重写。