vue组件命名需区分定义时与使用时：定义时文件名、name选项及注册名统一用pascalcase（如userprofilecard.vue），基础组件加base前缀；模板中推荐pascalcase（），但kebab-case（）也合法；props用camelcase，自定义事件用kebab-case；非组件文件统一用kebab-case。
Vue 组件命名不是随意选个名字就行，核心是区分“定义时”和“使用时”两种场景，对应不同规则，且必须兼顾可读性、一致性与 HTML 特性。
组件文件名和注册名统一用 PascalCase
所有 .vue 文件名、组件内部 name 选项、以及全局/局部注册时的组件名，都应采用 PascalCase（首字母大写，单词连写）。
- ✅ 正确示例：
UserProfileCard.vue、OrderSummaryPanel.vue、BaseModal.vue - ❌ 避免：
userprofilecard.vue（全小写）、user-profile-card.vue（kebab-case）、UserProfilecard.vue（大小写不规范） - 基础组件建议加
Base前缀，业务组件可用Business或领域词，如AdminDashboard.vue
模板中使用组件推荐 PascalCase，但 kebab-case 也合法
在单文件组件的 <template></template> 中，Vue 编译器支持两种写法。PascalCase 更直观体现“这是自定义组件”，而 kebab-case 是 HTML 原生兼容写法。
- ✅ 推荐：
<userprofilecard></userprofilecard>—— 语义清晰，与 JS 导入名一致，IDE 补全友好 - ✅ 允许：
<user-profile-card></user-profile-card>—— 在 DOM 模板或需要严格遵循 HTML 规范时必须用它 - ⚠️ 注意：不要混用，整个项目保持一种风格，避免
<userprofilecard></userprofilecard>和<user-profile-card></user-profile-card>同时出现
Props 和事件名按角色分层命名
组件对外暴露的接口需明确职责边界，命名方式与组件本身不同。
-
Props 用 camelCase：如
userName、isDisabled、maxUploadSize -
自定义事件 必须用 kebab-case：如
update-user-info、item-removed、form-submitted - 事件名优先动词开头，表达动作意图，避免模糊名词如
change，改用input-changed或value-updated
非组件文件和资源统一用 kebab-case
让文件类型一目了然，减少歧义。
- 工具函数：
date-format.js、api-helper.js - 路由配置：
router-index.js、routes-admin.js - 样式资源：
button-primary.css、icon-edit.svg - 文件夹名：
components-shared、views-dashboard、utils-common
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
