美萌后台管理系统框架
此项目框架是基于Ant Design Pro。 下面将会讲述如何快速使用
目录结构
项目开始之前，你必须要知道项目目录的结构。以下结构是在官网基础上做了一定的延伸且仅针对必要文件目录进行说明
PS: ⚠️目录结构不允许修改
├── config # umi 配置，包含路由，构建等配置
│ ├── routes.ts # 路由配置
│ ├── config.ts # 构建配置
│ └── proxy.ts # 后台接口代理配置
├── mock # 本地模拟数据
├── public
│ └── favicon.png # Favicon
├── src
│ ├── assets # 本地静态资源
│ ├── components # 业务通用组件
│ ├── e2e # 集成测试用例
│ ├── layouts # 通用布局
│ ├── hooks # 业务通用hook文件
│ ├── styles # 样式文件 用于自定义与覆盖样式
│ ├── models # 全局 dva model
│ ├── pages # 业务页面入口和常用模板
│ ├── services # 后台接口服务--本项目废弃不使用。请使用request
│ ├── request # 后台接口服务
│ ├── utils # 工具库 提供通用工具函数
│ ├── locales # 国际化资源 --框架废弃未使用
│ ├── access.ts # 权限code与权限控制
│ ├── global.less # 全局样式
│ └── global.ts # 全局 JS
├── swagerApi # swagerApi接口代码生成工具
├── tests # 测试工具
├── README.md
└── package.json安装
目前框架存在两种体系：
- 单体仓库模式（使用yarn）
- MonoRepo 使用pnpm
对应的命令分别为
yarn // 单体安装
pnpm insall // MonoRepo运行命令
框架提供了许多有用的脚本命令。帮助你快速启动、构建项目。执行项目测试等。 所有的命令都在package.json中.
启动(start)
// 启动项目
yarn start
// OR
pnpm start
// 启动开发环境 此环境下数据接口会优先走`mock`目录下定义的接口数据 适用于后端服务不可用或者需要自行拟造测试数据时使用
yarn start:mock
// OR
pnpm start:mock关于mock的更多介绍。参考这里
构建项目(build)
框架内部默认提供了四种环境。即
- dev(开发环境)
- uat(测试环境)
- stg(预发布环境)
- prd(生产环境)
其对应命令如下:
// 启动本地开发环境
yarn|pnpm dev
// 打包测试环境
yarn|pnpm uat
// 打包stg环境
yarn|pnpm stg
// 打包开发环境
yarn|pnpm build在package.json的scripts种。你可以找到对应的命令
// ...ignore other scripts
"dev": "npm run start",
"development": "cross-env REACT_APP_ENV=development umi build",
"uat": "cross-env REACT_APP_ENV=uat umi build",
"stg": "cross-env REACT_APP_ENV=stg umi build",你会发现 不同的命令区别在于会通过 cross-env 给脚本注入了一个 REACT_APP_ENV 变量。 并且在webpack编译阶段 注入到了代码之中。框架正是通过这个变量来区别不同的环境
有些项目也使用了类似Vue Cli提供的类型 .env的模式处理变量。这个并未纳入正式标准 如果你做的项目有遇到这种并且有疑问。可以咨询你的上级或者研发部
代码检查
umi 内置了代码检查工具
npm run lint你也可以使用命令自动修复 lint error: 当然我们还是建议你配合开发工具插件。在开发阶段就解决所有 lint error
npm run lint:fix文档资源
官方资源
antd 基于 Ant Design 设计体系的 React UI 组件库
pro components Ant Design 定义了基础的设计规范，对应也提供了大量的基础组件。但是对于中后台类应用，我们希望提供更高程度的抽象，提供更上层的设计规范，并且对应提供相应的组件使得开发者可以快速搭建出高质量的页面。 在 ProComponents 中我们内置了一系列的设计规范，预设了常用的逻辑。在这个基础上我们同样提供了灵活的支持，比如对于 ProTable 来说你也可以把它完全当做 Ant Design 的 Table 来用，对于 ProForm 来说你也可以直接使用 Ant Design 的基础组件或者你的自定义组件。我们希望通过 Pro 系列组件提供快速高效大家高质量中后台应用的能力，进一步扩展 Ant Design 的能力，欢迎使用并提出宝贵的意见
Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。随着『设计者』的不断反馈，我们将持续迭代，逐步沉淀和总结出更多设计模式和相应的代码实现，阐述中后台产品模板/组件/业务场景的最佳实践， 如遇问题可以前往github搜寻反馈或提交建议. 你也可以找架构部寻求帮助
其他
项目中绝大部分内容都可以在antd pro 官网获得解答。这里列举文档中没有或额外新增的内容。