Vue3 项目目录结构最佳实践

从规范的目录结构入手，能让团队协作更高效。一个命名统一、层次分明的项目，不仅帮助新成员快速上手，也避免老成员在混乱文件中迷失方向。以下是推荐的项目骨架：

my-vue3-project/
├── src/
│   ├── assets/                      # 静态资源（图片、字体等）
│   ├── components/
│   │   ├── common/                  # 通用UI组件（跨项目复用，无业务逻辑）
│   │   │   └── BaseButton.vue
│   │   └── biz/                     # 通用业务组件（跨页面复用，含业务逻辑）
│   │       └── BizUserCard.vue
│   ├── composables/                 # 组合式函数（可复用的状态逻辑）
│   │   └── useUser.ts
│   ├── layouts/                     # 布局组件（页面整体结构）
│   │   ├── default.vue
│   │   └── components/              # 布局专用组件（仅布局层使用）
│   │       └── AppHeader.vue
│   ├── pages/                       # 页面组件（路由对应，kebab-case命名）
│   │   ├── user-profile.vue
│   │   └── user/                    # 页面模块
│   │       ├── list.vue
│   │       └── components/          # 页面专用组件（仅当前模块使用）
│   │           └── UserFilter.vue
│   ├── router/                      # 路由配置（管理页面路由）
│   │   ├── index.ts
│   │   └── user-routes.ts
│   ├── stores/                      # Pinia状态管理（全局共享状态）
│   │   └── userStore.ts
│   ├── services/                    # API服务层（封装后端接口调用）
│   │   └── userService.ts
│   ├── utils/                       # 工具函数（纯函数，无副作用）
│   │   ├── formatDate.ts
│   │   └── validateEmail.ts
│   ├── types/                       # TypeScript类型定义（接口、枚举等）
│   │   ├── User.ts
│   │   └── api.ts
│   ├── styles/                      # 全局样式（变量、混入、重置样式）
│   │   └── global.scss
│   ├── App.vue
│   └── main.ts
├── tests/
│   └── unit/                        # 单元测试（与src目录结构对应）
│       ├── components/
│       └── utils/
└── package.json

此处有一个关键细节：pages/user/ 下存放的是页面文件 list.vue，而该页面的专属组件则归属于 pages/user/components/。这种分层方式让每个页面的“领地”清晰分明，避免组件被埋没在深层目录中而难以查找。

Vue3 文件命名规则指南

命名看似琐碎，但一旦团队达成共识，便能消除大量“这个文件究竟是做什么的”疑惑。下面是一套经多个项目验证的命名规则，可直接采纳。

总结一下：页面文件名采用 kebab-case 以与路由路径对齐；其余组件和类使用 PascalCase；函数、工具等纯逻辑采用 camelCase。规则并不复杂，关键在于坚持执行。

Vue3 组件编写规范

组件分类与命名

组件应该如何放置、如何命名？这是团队协作中常遇到的难题。下表基本能覆盖日常场景。

核心思路是：组件越通用，前缀越“长”（Base / Biz），目录位置越靠上；组件越专用，越应靠近对应的页面文件。

单文件组件结构（SFC）

Vue3 的