在日常开发中，很多前端项目在初期开发速度很快，但随着功能不断增加，代码结构混乱、组件难以复用、逻辑重复等问题接踵而至。为了让项目更易于维护和扩展，一个合理的项目结构至关重要。
本文将结合实践经验，分享如何构建一个可维护的前端项目结构，适用于 Vue、React 等现代框架。
1. 项目结构划分的基本原则
- 高内聚低耦合：同一模块下的文件应具有相关性，模块之间尽量解耦。
- 职责单一：每个目录或文件应承担单一职责，比如组件、服务、工具函数分别存放。
- 统一规范：命名规则、文件格式、路径引用等保持一致，方便团队协作。
2. 推荐的目录结构（以 Vue3 为例）
bash
复制编辑
src/
│
├── assets/ # 静态资源（图片、字体等）
├── components/ # 通用组件（可复用，无业务逻辑）
├── views/ # 页面级组件（有完整业务逻辑）
├── layouts/ # 页面布局（如主框架、登录页布局）
├── router/ # 路由配置
├── store/ # 状态管理（如 pinia、vuex）
├── services/ # 与后端交互的 API 封装
├── utils/ # 工具函数（如格式化、验证等）
├── directives/ # 自定义指令
├── hooks/ # 通用逻辑函数（组合式 API 封装）
└── App.vue / main.ts
3. 常见实践建议
- 使用模块化路由和状态管理：大型项目中建议将 router 和 store 分模块管理，避免单文件过长。
- 封装 API 请求逻辑：统一管理请求地址、请求方法和错误处理逻辑，利于后期维护。
- 组件按功能组织而非类型组织：例如
User/下可以有UserList.vue、UserDetail.vue、userApi.ts，便于理解和迁移。 - 统一风格与规范：借助 ESLint + Prettier + Commitlint 规范代码风格与提交格式，提升团队协作效率。
4. 项目初始化模板推荐
如果你经常搭建新项目，可以使用如 vite + vue3 + ts + pinia + vue-router + eslint + prettier 搭建一个基础模板，节省初始配置时间。
一个良好的项目结构，不仅能提升开发效率，还能降低新成员上手成本。希望本文对你有帮助，欢迎在评论区交流你的项目结构设计思路。
