基础环境
程序
Nodejs 12.16.3
Npm 6.14.4
Yarn 1.22.0
组件
umi: "3.2.1"
react: "16.8.6"
antd: "4.2.0"
@ant-design/pro-layout: "5.0.8"
@ant-design/pro-table: "2.2.7"
nodejs的安装教程到处都有，这里就不再复述了。由于umi和antd发展很快，接口也不兼容，因此本示例仅针对当前版本有效，升级后有可能无法运行。
配置文件
本示例采用Typescript开发，因此需要配置tsconfig.json
{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "esnext",
"lib": ["esnext", "dom"],
"sourceMap": true,
"baseUrl": ".",
"jsx": "react",
"allowSyntheticDefaultImports": true,
"moduleResolution": "node",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"allowJs": true,
"skipLibCheck": true,
"experimentalDecorators": true,
"strict": true,
"paths": {
"@/*": ["./src/*"],
"@@/*": ["./src/.umi/*"]
}
},
"exclude": [
"node_modules",
"build",
"dist",
"scripts",
"src/.umi/*",
"webpack",
"jest"
]
}
其它eslint相关文件不再举例，可直接参考示例项目源码。
目录结构
config
umi约定存放配置文件的目录，最重要的就是路由表，这里的路由表不仅控制路由，而且还控制了左侧导航菜单的生成、页面布局、权限控制等等，具体可参考umi文档。
routes: [
{
path: "/user",
component: "../layouts/UserLayout",
routes: [
{
name: "login",
path: "/user/login",
component: "./user/login",
},
],
},
{
path: "/",
component: "../layouts/SecurityLayout",
routes: [
{
path: "/",
component: "../layouts/BasicLayout",
authority: ["admin", "user"],
routes: [
{
path: "/",
redirect: "/welcome",
},
{
path: "/welcome",
name: "welcome",
icon: "smile",
component: "./Welcome",
},
...
],
},
{
component: "./404",
},
],
},
{
component: "./404",
},
],
mock
umi约定存放模拟服务的目录，该目录下的文件都会被自动mock，从而实现前后端分离开发。
function getRule(req: Request, res: Response, u: string) {
...
}
function postRule(req: Request, res: Response, u: string) {
...
}
export default {
"GET /api/rule": getRule,
"POST /api/rule": postRule,
};
public
存放静态资源文件，自动映射到根目录，可直接在less文件中引用。
tests
单元测试工具代码，不需要修改。真正的单元测试用例放在src/e2e目录下。
src/components
全局组件，通常全项目通用的组件放在这个目录下，而某个页面内使用的组件放在页面自己目录下的components目录，但这个并不会真正限制组件的使用范围。
src/e2e
单元测试用例，执行yarn test会执行该目录下的测试用例。
src/layouts
页面布局代码，同样的，这也只是一个约定，并不会有强制作用。
src/locales
国际化代码，可以在之前的config中设置缺省语言，这里就会调用对应的ts文件。
src/models
符合redux规范的模型定义，这里使用了dva来进行简化开发，因此只需要定义state、effects和reducers三个部分就可以了，其它工作框架都帮你完成了。
src/services
存放request访问代码，这里使用了umi-request来简化request，并在utils中定义了一个具有统一错误处理的封装函数。
src/pages
按页面存放代码的目录，每个页面目录下又都可以有自己的components、locales和models、services。
添加页面
首先在src/pages目录下创建一个页面目录，这个目录下至少包含一个index.tsx文件，通常还会包含styles.less。
一个最简单的index.tsx
export default (): React.ReactNode => (
);
其中PageHeaderWrapper是pro-layout布局中的一个包裹节点，用于包裹客户区，并生成面包屑导航之类的公共组件，具体可参考ProLayout文档。
然后在config中修改配置，在routes中增加页面和组件的对应关系，具体可参考umi文档。
同时需要修改locales文件，添加相应的文字信息，保存后页面会自动刷新。
其它
项目源码已上传码云：demo.antdpro.starter