Vue 命名规范指南

Vue 命名规范指南

良好的命名规范可以提高代码的可读性和可维护性。以下是 Vue 项目中推荐的命名规范：

1. 组件命名

单文件组件 (SFC)

除index外，使用PascalBase风格

• PascalCase (大驼峰式)：MyComponent.vue
• 多单词命名：避免与 HTML 元素冲突，如 UserProfile.vue

基础组件 (展示型组件)

• 前缀 Base：BaseButton.vue, BaseIcon.vue

单例组件 (每个页面只使用一次)

• 前缀 The：TheHeader.vue, TheSidebar.vue

紧密耦合的组件

• 父组件名作为前缀：TodoList.vue 和 TodoListItem.vue

2. Props 命名

• camelCase (小驼峰式)：userName, initialValue
• 避免使用 DOM 属性命名

3. 方法命名

• camelCase：getUserInfo(), handleClick()
• 常用前缀：
  • handle - 处理用户交互：handleSubmit()
  • fetch - 获取数据：fetchUserData()
  • show - 显示某些内容：showModal()
  • toggle - 切换状态：toggleMenu()

4. 自定义事件命名

• kebab-case (短横线连接)：user-updated, form-submitted
• 建议使用动词或动词短语：close-modal, upload-success

5. 指令命名

• 小写字母：v-loading, v-focus
• 自定义指令应使用 v- 前缀

6. 变量命名

• camelCase：userData, isLoading
• 布尔值使用 is, has, can 等前缀：isVisible, hasPermission

7. 常量命名

• 全大写 + 下划线：MAX_COUNT, API_URL

8. 文件夹和文件命名

• kebab-case：user-profile, api-service.js
• 组件目录：components/
• 页面目录：views/ 或 pages/

9. 其他约定

• 避免使用 $ 和 _ 前缀，这些在 Vue 生态中有特殊含义
• 私有属性/方法可以使用 _ 前缀：_privateMethod()

遵循这些命名规范可以使你的 Vue 项目更加一致和易于维护。团队内部可以根据实际情况调整这些规范，但重要的是保持一致性。