# 项目介绍
本脚手架使用了 umi@4 (opens new window) + typescript (opens new window), 以及 antd@4 (opens new window)。对这三样完全不熟悉的朋友,强烈建议先做了解之后再来。(再见)
其次,本脚手架使用 @umijs/max (opens new window),快速得到企业中台项目需要的基本功能,如: 权限控制、统一数据流管理、统一状态管理、多语言和 antd (opens new window) 配置。
所以对上述使用到的插件不熟悉的朋友,也需要先了解 @umijs/max (opens new window) 之后再往下看,再见。
接下来,就是介绍脚手架的部分了。首先介绍下项目结构:
.
├── config/
├── mock/
├── public/
├── src
│ ├── components
│ ├── constants
│ ├── layouts
│ ├── locales
│ ├── models
│ ├── pages
│ ├── services
│ ├── types
│ ├── utils
│ ├── access.ts
│ └── app.ts
│
├── package.json
├── tailwind.config.js
├── tailwind.css
├── tsconfig.json
└── typings.d.ts
# 项目结构介绍
# package.json
没什么好说的,依赖管理
# tsconfig.json
希望使用 typescript
编码的核心配置文件,勿动(除非你知道自己在干嘛)。
# typings.d.ts
希望在 .ts
、.tsx
模块中,引入.css
、.less
、.png
、.jpg
而不产生语法错误的核心配置文件,勿动(除非你知道自己在干嘛)。
# config 目录
umi
配置文件支持 <root>/.umirc.ts
或者 <root>/config/config.ts
二选一(共存时,仅 .umitc.ts
有效)。
我们脚手架里采用了 <root>/config/config.ts
形式
# mock 目录
存储 mock
文件,此目录下所有 .ts
文件会被解析为 mock
文件。
# public 目录
此目录下所有文件会被 copy
到输出路径。
# src
目录
应用源码,都在这里了。
下面介绍应用启动,即,浏览器打开 URL
, 回车敲下后,源码的运行大致流程(方便开发者阅读理解,及后续扩展变更)。
程序代码执行路径大致如下:
# 特性列表
路由 →