当前位置：首页 > news >正文

前端指南——项目代码结构解析（React为例）

news 来源：原创 2025/5/10 7:03:19

文件结构

文件项目
├── doc
│   ├── technology.md
├── node_modules
├── public
├── shell
├── src
│   ├── auto-generated
│   │   ├── apis
│   │   ├── models
│   ├── components
│   │   ├── 组件A
│   │   ├── 组件B
│   │   ├── index.tsx
│   ├── hooks
│   │   ├── 自定义Hooks.js
│   ├── images
│   ├── less
│   ├── pages
│   │   ├── A
│   │   ├── B
│   │   ├── c
│   └── store
│       ├── 业务A
│       ├── 业务B
│   ├── types
│   ├── utils
│   │   ├── 工具A.js
│   │   ├── 工具B.js
└── README.md

src各个文件夹的作用与协作关系

1. auto-generated：API自动生成代码

作用：通过 apihub.config.ts 配置的 APIHub 工具自动生成，封装与后端接口的交互逻辑。
- 配置文件 apihub.config.ts 定义了服务的项目 ID，并指定生成规则（如 functionStyle 风格的 API 函数）。
- 生成的代码位于 src/auto-generated/apis ，包含具体的 API 请求函数（如 GetXxxApiV1Product 、 PutXxxV1ResourceR