vue组件命名需遵循pascalcase多词规范以避免冲突，文件名用kebab-case确保兼容性，基础组件加base-前缀，业务组件按功能分层，模板中使用pascalcase自闭合标签，并规范props和data命名与声明。
Vue 组件命名不是随便起个名字就行，它直接关系到可读性、协作效率和长期维护成本。核心原则是：避免冲突、见名知意、统一风格。
组件名称（name 选项）用 PascalCase，且必须多词
组件的 name 选项必须是多个单词组成的 PascalCase 格式，比如 UserInfoCard、OrderSummaryPanel。这能防止与 HTML 原生标签（如 button、menu）或未来可能新增的标签重名。
- ✅ 正确：
name: 'UserProfileHeader' - ❌ 错误：
name: 'userprofileheader'（小写）、name: 'UserProfile'（仅两词但实际语义单薄）、name: 'user-profile-header'（kebab-case 不适用于 name 选项）
组件文件名统一用 kebab-case
文件系统对大小写不敏感，所以 MyButton.vue 和 mybutton.vue 在某些环境中可能冲突。官方推荐使用 kebab-case 文件名，如 base-button.vue、user-profile-options.vue，既清晰又安全。
- ✅ 推荐：
base-input.vue、todo-list-item.vue - ❌ 避免：
BaseInput.vue（易在 Windows/macOS 上出错）、mycomponent.vue（不易识别，违反语义）
基础组件加 base- 前缀，业务组件按功能分层命名
通用型、无业务逻辑的原子组件，统一以 base- 开头；与特定页面或模块强关联的子组件，则用父组件名作前缀，保持上下文明确。
- 基础组件：
base-button.vue、base-icon.vue（不用缩写，如btn或ico） - 业务耦合组件：
product-detail-tabs.vue、checkout-step-summary.vue - 避免模糊命名：
Info.vue、Item.vue这类名字无法体现用途，应改为UserContactInfo.vue、CartItem.vue
模板中使用组件时用 PascalCase 自闭合写法
在 <template></template> 中引入组件，应采用 PascalCase 并写成自闭合标签，这是 Vue 模板解析器的标准识别方式，也利于 IDE 补全和语法高亮。
- ✅ 正确：
<userprofilecard></userprofilecard>、<basebutton size="large"></basebutton> - ❌ 不推荐：
<user-profile-card></user-profile-card>（冗长）、<base-button></base-button>（与文件名混淆，且非标准写法）
Props 和 data 的配套规范不能忽略
命名只是第一步，配合的细节决定质量：
- Props 使用 camelCase，必须声明类型（
type），并明确required或default - Data 必须为函数返回对象，避免多个实例共享同一引用
- 所有组件建议启用
scoped样式，防止样式污染 - 复杂属性建议换行书写，提升可读性：
:visible="isModalOpen"<br>:on-confirm="handleConfirm"<br>:disabled="isLoading"
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
