Vue3命名规范指南

在 Vue 3 中，遵循一致的命名规范可以提高代码的可读性和维护性。以下是常见的命名规范和实践建议：

1. 组件命名

• PascalCase（大驼峰式）
  单文件组件（.vue 文件）和组件引用时推荐使用 PascalCase，便于区分原生 HTML 元素。

  vue

  <!-- 文件名: MyComponent.vue -->
  <template>
    <div>My Component</div>
  </template>
  
  <!-- 使用 -->
  <MyComponent />

• kebab-case（短横线分隔式）
  在 DOM 模板（如 HTML 文件）中，由于 HTML 不区分大小写，建议使用 kebab-case：

  html

  <my-component></my-component>

  运行 HTML

2. Props 命名

• camelCase（小驼峰式）
  Props 在 JavaScript 中定义时使用 camelCase，在模板中转换为 kebab-case：

  js

  // 组件定义
  props: ['myPropName'];
  
  // 使用
  <MyComponent my-prop-name="value" />

3. 自定义事件

• kebab-case
  事件名推荐使用 kebab-case（HTML 属性大小写不敏感）：

  js

  // 触发事件
  emit('my-event');
  
  // 监听事件
  <MyComponent @my-event="handleEvent" />

4. 生命周期钩子

• camelCase
  所有 Vue 生命周期钩子均为 camelCase（如 mounted, beforeUpdate）。

  js

  export default {
    mounted() {
      // ...
    },
  };

5. 组合式 API（Composables）

• 以 use 开头
  可组合函数通常以 use 开头，遵循 React 社区的约定（如 useFetch, useCounter）。

  js

  // useCounter.js
  export function useCounter() {
    // ...
  }

6. 变量与方法

• camelCase
  变量、方法、计算属性等使用 camelCase：

  js

  const myData = ref(0);
  function handleClick() { /* ... */ }
  const computedValue = computed(() => /* ... */);

7. 自定义指令

• kebab-case
  自定义指令名称使用 kebab-case（如 v-focus）：

  js

  app.directive('focus', {
    mounted(el) {
      el.focus();
    },
  });

8. 插槽（Slots）

• kebab-case
  插槽名称推荐使用 kebab-case：

  vue

  <!-- 定义插槽 -->
  <slot name="header-content"></slot>
  
  <!-- 使用插槽 -->
  <template v-slot:header-content>...</template>

9. 路由与状态管理

• Vue Router

  • 路由命名使用 camelCase 或 kebab-case（如 userProfile 或 user-profile）。

• Pinia/Vuex

  • Store 模块命名使用 camelCase（如 userStore）。

规范总结

注意事项

1. HTML 大小写不敏感：在 DOM 模板中，组件名、Props、事件名等需使用 kebab-case。

2. 一致性：项目团队应统一规范，可通过 ESLint 等工具自动检查。

3. 与框架约定对齐：如 Vue Router 的命名路由、Pinia 的 Store 命名等，需遵循各自文档的建议。

遵循这些规范能让代码更清晰，减少因命名导致的潜在问题。