面试题：介绍下 Vue 组件的命名规范？

在 Vue 开发中，遵循良好的组件命名规范有助于提升代码的可读性、可维护性，并避免潜在的解析错误。以下是 Vue 组件的命名规范，涵盖文件命名、注册命名和模板使用三个方面。

---

一、组件文件命名规范

1. PascalCase（大驼峰）命名法（推荐）

• 文件名：UserProfile.vue、DataChart.vue
• 优点：清晰可读，与 JavaScript 类名风格一致，避免大小写敏感问题（尤其在 Linux 系统中）。
• Vue 官方推荐使用 PascalCase。

2. kebab-case（短横线）命名法（也可接受）

• 文件名：user-profile.vue、data-chart.vue
• 优点：符合 HTML 属性命名习惯，与模板中使用方式一致。
• 在文件系统中兼容性好。

✅ 建议：统一团队风格，推荐使用 PascalCase。

⚠️ 避免使用 camelCase（小驼峰）如 userProfile.vue，易与变量混淆。

---

二、组件注册命名规范

1. 全局注册（Vue.component 或 app.component）

// 方式一：使用 PascalCase（推荐）
Vue.component('UserProfile', UserProfile)

// 方式二：使用 kebab-case（也可）
Vue.component('user-profile', UserProfile)

2. 局部注册（在 components 选项中）

import UserProfile from './UserProfile.vue'
import DataChart from './DataChart.vue'

export default {
  components: {
    UserProfile,     // 推荐：保持 PascalCase
    DataChart
  }
}

✅ 推荐：组件注册名使用 PascalCase，与导入的变量名一致。

---

三、模板中使用组件的规范

在 .vue 模板或 JSX 中使用组件时，推荐使用 kebab-case，因为：

• HTML 标签名不区分大小写，<UserProfile> 会被解析为 <userprofile>。
• Vue 支持在模板中使用 kebab-case 自动匹配 PascalCase 注册的组件。

<template>
  <!-- 推荐：使用 kebab-case -->
  <user-profile />
  <data-chart />

  <!-- 也可使用 PascalCase（在单文件组件中支持） -->
  <UserProfile />
  <DataChart />
</template>

✅ 最佳实践：

• 模板中优先使用 kebab-case，更符合 HTML 规范。
• 在单文件组件（SFC）中，PascalCase 也可用，但为了统一和可移植性，建议用 kebab-case。

---

四、特殊注意事项

1. 避免使用 HTML 原生标签名
   如：<header>、<table>、<button> 等，防止冲突。
2. 避免使用 Vue 内部保留名
   如：component、slot、template 等。
3. 语义化命名
   组件名应清晰表达其功能，如：
   • UserAvatar（用户头像）
   • SearchInput（搜索输入框）
   • ModalDialog（模态对话框）
4. 高阶组件/基础组件前缀
   • 基础组件可加 Base 前缀：BaseButton.vue、BaseInput.vue
   • 高阶组件可加 App 或 Page 前缀：AppHeader.vue、PageLayout.vue

---

总结：推荐规范

项目	推荐命名方式
组件文件名	PascalCase.vue（如 UserProfile.vue）
组件注册名	PascalCase（如 UserProfile）
模板中使用	kebab-case（如 <user-profile />）
命名语义	清晰、具体、避免原生标签名

📌 一句话原则：
文件 PascalCase，注册 PascalCase，模板 kebab-case，语义清晰不冲突。

遵循此规范，能有效提升团队协作效率和项目可维护性。