Vue组件命名需区分定义时与使用时：定义时文件名、name选项及注册名统一用PascalCase（如UserProfileCard.vue），基础组件加Base前缀；模板中推荐PascalCase（<UserProfileCard/>），但kebab-case（<user-profile-card/>）也合法；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> 中，Vue 编译器支持两种写法。PascalCase 更直观体现“这是自定义组件”，而 kebab-case 是 HTML 原生兼容写法。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- ✅ 推荐：
<UserProfileCard />—— 语义清晰，与 JS 导入名一致，IDE 补全友好 - ✅ 允许：
<user-profile-card />—— 在 DOM 模板或需要严格遵循 HTML 规范时必须用它 - ⚠️ 注意：不要混用，整个项目保持一种风格，避免
<UserProfileCard>和<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
