跳到主要内容

目录结构

前端工程采用 Monorepo 设计,在目录结构上以易用性一致性为基本原则,实现高效、合理的目录结构。

目录设计基本原则:
  1. 易用性:应符合架构特征,开发者能简单确定在何处创建 or 查找文件/文件夹;

    为实现易用性,文件夹/文件结构应清晰直观,这样开发人员就不会在查找或创建文件和文件夹上花费过多时间。

  2. 一致性:开发人员应始终遵循统一的文件夹/文件结构规范;

    为保持一致性,在开发及代码审查时应确保新建的文件/文件夹遵守该结构。简单的文件夹结构更容易遵循,复杂的结构可能会导致混乱和文件/文件夹,导致放错位置影响开发。

总体目录结构

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 # 入口文件