antd pro是蚂蚁金服团队开发的一个开箱即用的中后台解决方案,而且不得不说这个框架对小白来说真的很友好,本人接触之前没看过react,redux,dva什么的,但是在边看边改的过程中发现这个框架真的很好上手,也是一本很好的“教科书”。现在我把这一个月来学到的东西整理下,希望能帮助到大家~
开始师兄交给我的工作是用这个框架复现之前做过的一个教育局系统,所以下面的讲解也是基于复现这个系统所做的工作。
1.新增js,less文件
做第一步之前,建议先到antd pro的官方帮助文档看一下“路由和菜单”小节的内容,帮助理解路由和菜单是怎么配置的。
现在比如我们要增加一个菜单项,并包含子菜单,如下图所示
在/src/pages
下面新建一个文件夹home
,然后里面“首页”、“公告”、“机构展示”每个每菜单项都要建立一个js文件个和less文件,注意首字母大写。建好后如下:
上图里面那个models先忽略掉,这是后面放内容时才要用的。less样式文件默认使用 CSS Modules,如果需要,你可以在样式文件的头部引入 antd 样式变量文件:</