Vue3的命名规范

命名规范

一、组件命名规范

1. 单文件组件命名
   • 使用 PascalCase（大驼峰） 命名法，如 UserProfile.vue

   • 必须由 2-3 个单词组成，避免与 HTML 原生标签冲突（如 <header> → <AppHeader>）

   • 文件名与组件名严格一致，便于代码追踪

2. 全局注册命名
   • 全局组件推荐使用 PascalCase，保持与单文件命名一致

   • 示例：app.component('UserProfile', UserProfile)

3. 局部注册命名
   • DOM 模板中优先使用 kebab-case（短横线分隔），如 <user-profile>

   • JavaScript 中仍使用 PascalCase 导入

4. 命名语义化原则
   • 名称需体现功能（如 SearchInput、ImageGallery）

   • 基础组件可添加统一前缀（如 BaseButton、AppHeader）

   • 父子组件采用关联前缀（如 TodoList → TodoListItem）

---

二、Props 命名规范

1. 声明方式
   • JavaScript 中采用 camelCase（小驼峰），如 userName

   • 模板中使用 kebab-case 转换，如 <user-profile user-name="value">

2. 类型与验证
   • 必须显式声明类型和验证规则：

   props: {status: {type: String,required: true,validator: (v) => ['success', 'error'].includes(v)}
   }
   

---

三、事件命名规范

1. 命名规则
   • 使用 kebab-case，遵循 动词-名词 结构（如 update:user-info）

   • 状态变更事件建议用 名词-动词（如 state-change）

2. 声明方式
   • 推荐通过 defineEmits 显式定义参数类型：

   const emit = defineEmits({'search': (query: string) => !!query.trim()
   })
   

---

四、组合式 API 规范

1. 可组合函数命名
   • 以 use 开头，采用 PascalCase（如 useFetch、useCounter）

   • 返回多个值时可使用复数形式（如 useFormValidators）

2. 响应式变量
   • 基础类型用 ref，对象类型用 reactive

   • 解构时通过 toRefs 保持响应性

---

五、代码风格规范

1. 变量与方法
   • 使用 camelCase 命名（如 currentPage、getUserInfo）

   • 避免单个单词命名（如 data → userData）

2. 模板指令
   • v-for 必须绑定唯一 key

   • 禁止 v-if 与 v-for 同级使用，优先用计算属性过滤数据

3. 样式命名
   • CSS 类名使用 BEM 规范（如 .user-profile__title--active）

   • 组件样式添加 scoped 属性隔离作用域

---

六、路由与状态管理

1. 路由命名
   • 路径参数用 kebab-case（如 /user/:user-id）

   • 路由配置采用 camelCase（如 userProfile）

2. 状态模块
   • Pinia/Vuex 模块名使用 camelCase（如 userStore）

   • 复杂状态拆分到独立模块（如 cartStore、authStore）

---

七、其他核心原则

原则	说明	示例/参考
一致性	项目内统一命名风格，可通过 ESLint 自动检查	配置 .eslintrc
可读性	避免缩写（如 Usr → User），优先完整单词	Dashboard vs Dash
类型安全	组合式 API 中优先使用 TypeScript 类型标注	interface User
性能优化	大型列表使用 v-virtual-scroll，避免不必要的响应式数据	虚拟滚动方案

---

总结建议

1. 工具集成
   通过 Volar + ESLint + Prettier 实现自动化规范检查
2. 文档对齐
   复杂组件需编写 .md 文档说明 Props/Events 用法
3. 团队协作
   使用 .editorconfig 统一编辑器配置，减少格式冲突