4.3 KiB

Raw Blame History

name	description
jjb-project-directory-structure	定义 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-接口与数据层规范）
应用页面入口容器：src/pages/Container
- 核心职责：
  1. 作为应用页面入口容器，存放常规路由页面（在底座中访问的页面）
  2. 负责应用全局主题配置
  3. 负责 InjectContext 上下文注册（值为 antd useApp() 值）
  4. 可以通过 InjectContext 访问 antd/App 里面的数据
- InjectContext 来源：InjectContext 从 src/enumerate/context 导出，在 src/pages/Container 中进行注册和使用
- 路由约束说明：详细的路由约束规则请参考 03-页面目录规则
项目 HTML 模板：public/index.html
- 项目的 HTML 模板文件，支持 EJS 模板语法，可通过 windowInject 配置注入外部资源

4.3 KiB Raw Blame History Unescape Escape

项目页面结构

项目目录结构示意图

核心文件说明

4.3 KiB

Raw Blame History