87 lines
4.3 KiB
Markdown
87 lines
4.3 KiB
Markdown
|
---
|
|||
|
|
name: jjb-project-directory-structure
|
|||
|
|
description: 定义 JJB 微应用标准项目目录结构。在搭建项目、创建 src/pages/api/enumerate/hooks/utils 等目录或查阅 main.js、Container、InjectContext 时使用。
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 项目页面结构
|
|||
|
|
|
|||
|
|
## 项目目录结构示意图
|
|||
|
|
|
|||
|
|
> **说明**：以下为项目的**经典/标准目录结构示意图**，展示了微应用的标准文件组织方式。实际项目中的文件结构可能会根据具体需求略有调整，但整体结构保持一致。
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
项目根目录/
|
|||
|
|
├── public/
|
|||
|
|
│ └── index.html # 项目 HTML 模板
|
|||
|
|
├── src/
|
|||
|
|
│ ├── main.js # 应用入口文件
|
|||
|
|
│ ├── pages/ # 应用页面文件夹
|
|||
|
|
│ │ └── Container/ # 应用页面入口容器（常规页面存放于此，外部页面可直接放在 pages/ 下）
|
|||
|
|
│ │ ├── Entry/ # 应用首页
|
|||
|
|
│ │ ├── UserList/ # 示例：用户列表页
|
|||
|
|
│ │ │ ├── index.js
|
|||
|
|
│ │ │ └── index.less
|
|||
|
|
│ │ └── UserDetail_id/ # 示例：用户详情页（动态路由）
|
|||
|
|
│ │ ├── index.js
|
|||
|
|
│ │ └── index.less
|
|||
|
|
│ ├── components/ # 公共组件目录
|
|||
|
|
│ │ └── CommonButton/
|
|||
|
|
│ │ ├── index.js
|
|||
|
|
│ │ └── index.less
|
|||
|
|
│ ├── api/ # 应用接口服务管理
|
|||
|
|
│ │ ├── user/ # 用户相关接口（小驼峰命名）
|
|||
|
|
│ │ │ └── index.js
|
|||
|
|
│ │ └── order/ # 订单相关接口
|
|||
|
|
│ │ └── index.js
|
|||
|
|
│ ├── enumerate/ # 应用枚举、常量、命名空间
|
|||
|
|
│ │ ├── namespace/ # 命名空间定义
|
|||
|
|
│ │ │ └── index.js
|
|||
|
|
│ │ ├── enum/ # 枚举值
|
|||
|
|
│ │ │ └── index.js
|
|||
|
|
│ │ ├── constant/ # 常量
|
|||
|
|
│ │ │ └── index.js
|
|||
|
|
│ │ └── context/ # React 全局 Context（导出 InjectContext）
|
|||
|
|
│ │ └── index.js
|
|||
|
|
│ ├── hooks/ # 自定义 Hooks 目录
|
|||
|
|
│ │ └── useDict.js # 示例：字典数据 Hook
|
|||
|
|
│ └── utils/ # 工具函数库
|
|||
|
|
│ └── index.js
|
|||
|
|
├── jjb.config.js # 应用配置文件
|
|||
|
|
├── jjb.babel.js # Babel 配置文件
|
|||
|
|
└── package.json
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 核心文件说明
|
|||
|
|
|
|||
|
|
- **应用入口文件**：`src/main.js`
|
|||
|
|
- 应用的启动入口文件，负责初始化 React 应用、注册路由、注册模型等
|
|||
|
|
|
|||
|
|
- **应用页面文件夹**：`src/pages`
|
|||
|
|
- 存放所有页面组件的根目录
|
|||
|
|
|
|||
|
|
- **应用接口服务管理**：`src/api`
|
|||
|
|
- 存放所有接口定义文件，使用 `declareRequest` 定义接口请求
|
|||
|
|
- 目录命名规范：统一使用 **小驼峰（camelCase）** 命名
|
|||
|
|
|
|||
|
|
- **应用枚举、常量、命名空间**：`src/enumerate`
|
|||
|
|
- `namespace/`：命名空间定义，使用 `defineNamespace` 定义
|
|||
|
|
- `enum/`：枚举值定义
|
|||
|
|
- `constant/`：常量定义
|
|||
|
|
- `context/`：React 全局 Context 定义，导出 `InjectContext` 上下文
|
|||
|
|
|
|||
|
|
- **自定义 Hooks 目录**：`src/hooks/`
|
|||
|
|
- 用于存放自定义 Hooks，如字典数据 Hook、业务逻辑 Hook 等
|
|||
|
|
- 字典数据获取统一使用 Hooks 方式（详细规范参考 [`11-接口与数据层规范`](../../11-接口与数据层规范/05-字典数据获取规范/SKILL.md)）
|
|||
|
|
|
|||
|
|
- **应用页面入口容器**：`src/pages/Container`
|
|||
|
|
- **核心职责**：
|
|||
|
|
1. 作为应用页面入口容器，存放常规路由页面（在底座中访问的页面）
|
|||
|
|
2. 负责应用全局主题配置
|
|||
|
|
3. 负责 `InjectContext` 上下文注册（值为 `antd useApp()` 值）
|
|||
|
|
4. 可以通过 `InjectContext` 访问 `antd/App` 里面的数据
|
|||
|
|
- **`InjectContext` 来源**：`InjectContext` 从 `src/enumerate/context` 导出，在 `src/pages/Container` 中进行注册和使用
|
|||
|
|
- **路由约束说明**：详细的路由约束规则请参考 [`03-页面目录规则`](../03-页面目录规则/SKILL.md)
|
|||
|
|
|
|||
|
|
- **项目 HTML 模板**：`public/index.html`
|
|||
|
|
- 项目的 HTML 模板文件，支持 EJS 模板语法，可通过 `windowInject` 配置注入外部资源
|