Antd pro探索与实战(一)新增页面

本文介绍了Antd Pro作为中后台解决方案的易用性,适合初学者。通过新增js和less文件、配置路由以及将菜单名改为中文,详细解析了如何在Antd Pro中添加新页面。首先,需要理解路由和菜单的配置,然后创建对应的js和less文件,最后通过国际化支持修改菜单为中文。
摘要由CSDN通过智能技术生成

antd pro是蚂蚁金服团队开发的一个开箱即用的中后台解决方案,而且不得不说这个框架对小白来说真的很友好,本人接触之前没看过react,redux,dva什么的,但是在边看边改的过程中发现这个框架真的很好上手,也是一本很好的“教科书”。现在我把这一个月来学到的东西整理下,希望能帮助到大家~
开始师兄交给我的工作是用这个框架复现之前做过的一个教育局系统,所以下面的讲解也是基于复现这个系统所做的工作。

1.新增js,less文件

做第一步之前,建议先到antd pro的官方帮助文档看一下“路由和菜单”小节的内容,帮助理解路由和菜单是怎么配置的。
现在比如我们要增加一个菜单项,并包含子菜单,如下图所示
建立第一个菜单项
/src/pages下面新建一个文件夹home,然后里面“首页”、“公告”、“机构展示”每个每菜单项都要建立一个js文件个和less文件,注意首字母大写。建好后如下:
新建home文件夹
上图里面那个models先忽略掉,这是后面放内容时才要用的。less样式文件默认使用 CSS Modules,如果需要,你可以在样式文件的头部引入 antd 样式变量文件:</

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值