由于Antd Design Pro比较重，我们的项目其实用不了那么多功能，只是一个后台管理，基本布局，CRUD就可以了，而且我们自己的权限系统各有差别，改造起来也要花费时间，我们完全可以使用umi与Prolayout快速搭建一个适合我们自己的轻量的后台管理
Umi官方网站 umijs.org/
ProLayout API与案例 procomponents.ant.design/components/…
1.umi项目初始
- umi 会默认帮我们安装集成prolayout，我们只需要执行
yarn create @umijs/umi-app就可以初始化一个umi项目 - 目录结构如下
-mock mock数据
-src 项目代码存放目录
-eslintrc.js eslint配置文件
-.prettierrc 代码格式化配置
-.umirc.ts umi配置文件
-tsconfig.json ts配置文件
-typings.d.ts 全局类型声明文件
2.构建项目基础结构目录
- 一般代码或资源按照功能分类存放在如下目录，方便管理和维护
-mock mock数据
-.umi umi编译文件
-assets 静态资源
-components 公共组件
-config 项目配置文件
-constants 公共字典
-hooks 公共hooks文件
-layouts 全局布局文件，可别写成了layout，别问我为什么^_^
-models 公共数据流
-pages 页面
-services 公共接口文件
-styles 全局样式文件
-utils 工具类方法
3.基础框架构建
3.1 使用@ant-design/pro-layout一步构建后台管理基础布局
- 在layouts文件下新建 index.tsx
import { FC } from 'react';
import ProLayout from '@ant-design/pro-layout';
// 侧边栏的默认关闭需要设置 breakpoint={false} ，如果只设置 defaultCollapsed 会无效
const BasicLayout: FC = ({ children }) => {
return (
<ProLayout layout="mix" fixSiderbar defaultCollapsed breakpoint={false}>
{children}
</ProLayout>
);
};
export default BasicLayout;
- 如此快速生成了基础框架，接下来，我们只要在定制一下具体的内容，比如：顶部Header（包含一些退出、头像展示、logo、标题等）、侧边菜单（根据后台返回权限菜单动态生成、约定式路由），中间内容（具体的业务场景），面包屑、封装请求，这样一个精简的后台管理项目就构建好了
3.2 自定义Header
- 为了更好的管理我们在自定义Header之前，先重新构建一下 layouts 目录
- 命名参照 Ant Design Pro
—layouts
—BasicLayout 布局文件
—Header 顶部
—index.tsx 实现我们自己的顶部 header 内容
—index.tsx 主文件，负责导出 layouts 全局布局
—Security.tsx 权限校验文件（路径合法性，token等）
- 这是我们的Header
import { FC } from 'react';
import styles from './index.less';
const Header: FC = () => {
return <div className={styles['header']}>这里是Header的内容</div>;
};
export default Header;
- 这里我只加了一句话，以及变了一个背景色，接下来就是css搞起来了，写出你想要的Header即可
- 引入Header，要想使用我们自己定义的这个Header，我们就需要使用 pro-layout 提供的
headerRender属性，他传入一个函数，该函数返回一个ReactNode，我们只需要让他返回我们的自定义Header组件即可
3.3 侧边栏菜单生成
- 权限，无疑是一个后台管理系统最重要，也是最值得思量的地方，当然也是最麻烦的
- 前端的菜单一般都是根据当前登录人的权限动态生成的，他只能有自己具有权限的菜单，不能非法访问，我们一般都需要遍历后台返回的数据，取出权限菜单，然后经过处理，显示到页面，pro-layout给我们提供了一个自定义生成菜单的属性
menuDataRender，以及一个自定义每个菜单项样式的属性menuItemRender, 这两个属性的具体参数以及用法，可以参考之前的官网API menuDataRender传入一个函数，该函数返回当前登录人所有权限菜单数组，返回值必须是一个数组，并且每一项都必须符合它的要求，这里可能会用到遍历啊，递归啊之类的，它要的格式是固定的，我们只需要拿出自己的本领提供给它即可menuItemRender传入一个渲染函数，生成菜单项
- 页面效果
- 这里菜单数组需要返回什么样的数据，请移步官方API介绍，详细阅读，我们只需要将后台返回的数据，处理成它要的样子，然后直接传给它，它就可以帮我们直接生成菜单了。而且到现在，我们一个路由都没有配置，这就是umi约定式路由的强大，我们只需要建立正确的文件目录，它就可以帮我们生成路由，具体 约定式路由 的介绍，请移步umi官方网站，详细查阅，包括 动态路由 等一并学习了解一下
3.4 面包屑生成
- 面包屑生成
3.5 基础权限校验（token、路径合法性）
- 403、404页面
- 用户信息失效重新登录
