vue组件命名应统一用pascalcase，分层加前缀：基础组件加base前缀（如basebutton.vue），业务组件体现模块与功能（如userlist.vue），页面组件以page或view结尾（如dashboardpage.vue），文件夹按职责划分而非技术类型堆砌。

组件名太长太乱，本质是命名缺乏约束、结构缺少分层。核心不是“缩写”，而是用一致的规则把语义表达清楚——谁用、在哪用、干什么用，三个问题答完，名字自然简洁有力。

组件命名：统一用 PascalCase，但要分层加前缀

所有 .vue 组件文件名必须用大驼峰（PascalCase），如 UserProfileCard.vue、OrderStatusBadge.vue。这不是为了好看，而是让 IDE 能正确识别、Vue Devtools 能精准定位、团队协作时无需猜意图。

• 基础组件统一加 Base 前缀，如 BaseButton.vue、BaseInput.vue。这类组件不绑定业务逻辑，只封装原生行为和样式，放在 src/components/base/
• 业务组件体现模块+功能，如 UserList.vue（用户模块下的列表）、ProductFilterPanel.vue（商品模块下的筛选面板），放在对应业务目录下，例如 src/views/user/components/ 或 src/modules/product/components/
• 页面级组件建议用 Page 或 View 结尾，如 DashboardPage.vue、LoginView.vue，便于和复用组件区分，也方便路由配置时一眼识别

文件夹组织：按职责切分，不按技术类型堆砌

别再建一个叫 “components” 的巨型文件夹，把所有 .vue 文件全塞进去。真正的分层，是让每个文件夹回答一个问题：“它为什么存在？”

• src/components/base/：只放可跨项目复用的原子组件（Button、Input、Modal）
• src/components/business/：放组合型业务组件（如 SearchBarWithFilters、OrderSummaryCard），它们依赖 base 组件，但自带业务逻辑
• src/views/：只放路由直接加载的页面组件，每个文件对应一个 URL 路径，命名用 kebab-case（如 user-profile.vue），避免和 PascalCase 组件名混淆
• 模块化项目可进一步设 src/modules/xxx/，比如 src/modules/inventory/ 下包含自己的 components、api、store，实现高内聚低耦合

命名避坑：三类词坚决不用

名字一长，往往是因为混进了不该出现的信息。以下三类词在组件名里基本是冗余信号：

• 动词开头：如 HandleUserClick.vue、RenderProductList.vue —— 组件是 UI 实体，不是函数，用名词或名词短语更准确
• 模糊通用词：如 Info.vue、Data.vue、Item.vue —— 完全看不出上下文，换成 UserInfoCard.vue、ProductListItem.vue 立刻清晰
• 环境或状态后缀：如 UserCardMobile.vue、UserInfoLoading.vue —— 响应式适配和加载态应通过 props 或插槽控制，而非拆成多个文件

配套小技巧：让规范真正落地

光有规则不够，得让人愿意用、容易用：

• 在 vue.config.js 或 vite.config.ts 中配置路径别名，如 @/components/base，减少相对路径出错
• 用 ESLint 插件 eslint-plugin-vue + 自定义规则，对组件文件名强制 PascalCase 校验
• 新建组件时，用脚手架命令生成标准结构：pnpm run create:component UserProfileCard，自动创建文件、注册入口、更新 index.ts 导出