Vue 2大型项目组件规范核心是通过分层目录与语义化命名明确职责与复用范围：全局组件放src/components/并加Base/Layout前缀；业务组件置于对应模块下；页面组件就近存放；统一PascalCase命名，禁用模糊名称；导出引用需严格约束。
Vue 2 大型项目中，组件目录结构和命名规范的核心目标是：让每个文件“在哪”和“叫什么”都能准确传达它的职责与复用范围。结构混乱或命名随意，会导致查找困难、误复用、重构踩坑——尤其在多人协作、长期迭代的项目里，这比写错一行逻辑更难修复。
按复用层级分层组织组件目录
不要把所有 .vue 文件塞进 src/components 下。应明确划分三类组件，并对应不同存放位置：
-
全局通用组件（如 Button、Modal、Icon）：放在 src/components/，再按用途细分子目录，例如：
src/components/ui/BaseButton.vue
src/components/layout/MainLayout.vue -
业务级复用组件（如 OrderCard、UserAvatar、ProductFilter）：属于某个业务域，高频跨页面使用，但不具全系统通用性。应放在对应模块下，例如：
src/modules/order/components/OrderSummary.vue
src/modules/user/components/UserBadge.vue -
页面专属组件（如 HomeBanner、UserProfileForm、OrderTimeline）：只服务于单一页面，强耦合该页数据流或状态。必须就近存于页面目录内：
src/views/Home/components/SectionHero.vue
src/views/UserProfile/components/UserEditModal.vue
命名要体现语义与层级
文件名和组件名不是为了“看起来高级”，而是为了让人一眼判断它能不能复用、适不适合引入。
-
文件命名统一用 PascalCase（首字母大写驼峰），如
BaseInput.vue、UserSettingsForm.vue、HomeFeaturedList.vue；避免baseinput.vue或user_settings_form.vue这类写法。 -
基础组件加前缀 Base（如 BaseButton、BaseTable），表示无业务逻辑、纯展示封装；
布局类组件加前缀 Layout（如 LayoutDashboard、LayoutSidebar）；
业务组件不加前缀，但用业务关键词开头（如 OrderList、ProductCard、UserProfileHeader）。 - 禁止模糊命名：不用 Comp1、NewModal、TempView 这类名称；也不用 User、List、Detail 这种过于宽泛的单一名词——必须带上下文，如 UserCard、OrderItemList、ProductDetailHeader。
页面模块保持扁平+自包含
每个页面（即路由终点）应是一个独立可理解的单元，目录结构要“开箱即读”：
立即学习“前端免费学习笔记（深入）”；
- 页面主组件命名为
index.vue（推荐）或PageName.vue，放在src/views/PageName/下；
例如：src/views/Home/index.vue是首页入口，配合 Vue Router 动态导入最自然。 - 其专属子组件统一收在同级
components/目录下，路径短、依赖清，改起来不牵连其他模块。 - 页面内若需组合式逻辑（如表单校验、分页请求），可配
composables/子目录（即使 Vue 2 不原生支持，也可用普通 JS 函数模拟），例如：src/views/UserProfile/composables/useUserProfileForm.js。
导出与引用要有约束机制
防止“绕过规范”的捷径行为，是守住边界的最后一道防线：
- 全局组件（
src/components/下）必须在src/components/index.js中显式导出，并在main.js全局注册；禁止页面代码用相对路径直接 import 它们。 - 业务组件和页面组件一律用相对路径引用（如
./components/UserSearchBar.vue），确保模块可整体迁移或抽离。 - 所有组件在模板中使用时，标签名必须与文件名 PascalCase 一致（如
<BaseButton></BaseButton>），不写成<base-button>—— Vue 2 对大小写敏感，且统一写法减少歧义。
