相信很多人都用过Ant Design Pro
,通过修改和删减文件,省却很多的配置,可以很快地进入项目的开发。但是从我的使用经验上,对我来说有如下几个痛点:
- 登录页太繁杂
- 权限控制不灵活,特别是页面子元素级别的控制时
- 页面适配,后台系统PC端的操作逻辑和Mobile端的应该是不同的,简单的适配并不让功能两端通用
- 某些逻辑相互影响,删减文件需要三思后行
几个痛点让我萌发了创建一个瘦身版Ant Design Pro
的想法,命名为Ant Design Lite
,只有 Login
和 Home
两个主页面,但是麻雀虽小五脏俱全,该有的功能还是不缺的。 主要的特点如下:
- 技术栈为:
react-router
+react-redux
+redux-saga
- 支持
.scss
和cssmodule
- 支持自定义
Ant Design
主题 - 支持装饰器
- 支持中英文语言切换
- 支持
proxy
- 支持别名
@
- 支持页面权限和子元素权限
- 按需加载
Ant Design
组件
除此之外,还列出来一步一步实现的关键过程,对新手十分友好。在此基础上开启新的后台管理系统项目也是非常容易的。
预计的过程讲解如下:
- 开启
CSSModule
- 按需加载
Ant Design
并自定义主题 - 设置别名
@
- 开启装饰器支持
- 设置
proxy
- 设置页面权限
项目中有些代码直接从 Ant Design Pro
中拷贝过来,GitHub地址是 Ant Design Lite ,欢迎 fork
和 star
。 最后上图: