一步步实现一个后台管理系统Ant Design Lite

相信很多人都用过Ant Design Pro，通过修改和删减文件，省却很多的配置，可以很快地进入项目的开发。但是从我的使用经验上，对我来说有如下几个痛点：

1. 登录页太繁杂
2. 权限控制不灵活，特别是页面子元素级别的控制时
3. 页面适配，后台系统PC端的操作逻辑和Mobile端的应该是不同的，简单的适配并不让功能两端通用
4. 某些逻辑相互影响，删减文件需要三思后行

几个痛点让我萌发了创建一个瘦身版Ant Design Pro的想法，命名为Ant Design Lite，只有 Login 和 Home 两个主页面，但是麻雀虽小五脏俱全，该有的功能还是不缺的。 主要的特点如下：

1. 技术栈为：react-router + react-redux + redux-saga
2. 支持 .scss 和 cssmodule
3. 支持自定义 Ant Design 主题
4. 支持装饰器
5. 支持中英文语言切换
6. 支持 proxy
7. 支持别名@
8. 支持页面权限和子元素权限
9. 按需加载Ant Design组件

除此之外，还列出来一步一步实现的关键过程，对新手十分友好。在此基础上开启新的后台管理系统项目也是非常容易的。

预计的过程讲解如下：

1. 开启 CSSModule
2. 按需加载 Ant Design 并自定义主题
3. 设置别名 @
4. 开启装饰器支持
5. 设置 proxy
6. 设置页面权限

项目中有些代码直接从 Ant Design Pro 中拷贝过来，GitHub地址是 Ant Design Lite ，欢迎 fork 和 star。 最后上图：

转载于:https://juejin.im/post/5cc16fd8f265da038733a4db