目录结构
前端工程采用 Monorepo 设计,在目录结构上以易用性、一致性为基本原则,实现高效、合理的目录结构。
目录设计基本原则:
-
易用性:应符合架构特征,开发者能简单确定在何处创建 or 查找文件/文件夹;
为实现易用性,文件夹/文件结构应清晰直观,这样开发人员就不会在查找或创建文件和文件夹上花费过多时间。
-
一致性:开发人员应始终遵循统一的文件夹/文件结构规范;
为保持一致性,在开发及代码审查时应确保新建的文件/文件夹遵守该结构。简单的文件夹结构更容易遵循,复杂的结构可能会导致混乱和文件/文件夹,导致放错位置影响开发。
总体目录结构
beaver-iot-web
├── apps # 应用目录
│ ├── web # Web 应用
│ └── ... # 其他应用
│
├── packages # 子库目录
│ ├── locales # 国际化处理库
│ ├── shared # 共享资源库
│ ├── spec # 项目规范库
│ └── ... # 其他
│
├── README.md
├── package.json
├── pnpm-lock.yaml
└── pnpm-workspace.yaml
应用目录结构
web/src
├── assets # 静态资源
├── components # 通用组件
├── layouts # 布局
├── pages # 页面
│ ├── home
│ │ ├── components # 页面组件
│ │ ├── hooks # 页面通用逻辑
│ │ ├── views # 子路由页面
│ │ └── index.tsx # 页面入口
│ │
│ ├── user
│ └── ...
│
├── routes # 全局路由
├── services # 通用服务
├── stores # 全局状态
├── styles # 样式资源
└── main.ts # 入口文件