Antd pro探索与实战（一）新增页面

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

1.新增js,less文件

做第一步之前，建议先到antd pro的官方帮助文档看一下“路由和菜单”小节的内容，帮助理解路由和菜单是怎么配置的。
现在比如我们要增加一个菜单项，并包含子菜单，如下图所示

在/src/pages下面新建一个文件夹home，然后里面“首页”、“公告”、“机构展示”每个每菜单项都要建立一个js文件个和less文件，注意首字母大写。建好后如下：

上图里面那个models先忽略掉，这是后面放内容时才要用的。less样式文件默认使用 CSS Modules，如果需要，你可以在样式文件的头部引入 antd 样式变量文件：

**@import "~antd/lib/style/themes/default.less";**

2.配置路由

要让页面显示出来，我们要到/config/router.config.js/里面配置路由

// app
  {
    path: '/',
    component: '../layouts/BasicLayout',
    Routes: ['src/pages/Authorized'],
    authority: ['admin', 'user'],
    routes: [
      // Home
      { path: '/', redirect: '/home/homepage' },
      {
        path: '/home',
        name: 'home',
        icon: 'home',
        routes: [
          {
            path: '/home/homepage',
            name: 'homepage',
            //component: './Home/Homepage',
          },
          {
            path: '/home/announce',
            name: 'announce',
            //component: './Home/Announce',
          },
          {
            path: '/home/display',
            name: 'display',
            //component: './Home/display',
          },
        ],
      },
      {
        component: '404',
      },
    ],
  },
];

里面的component先不用管，那个是以后往页面里放入组件后再加上的。现在我们可以看到框架上已经可以显示出菜单了，而且点一点，里面页面是灰的，然后菜单是英文组成的。

3.将菜单名改成中文

atd pro支持国际化，菜单的名称在/src/locales/zh-CN/menu.js里面修改

export default {
  'menu.home': '教育统计首页',
  'menu.home.homepage': '首页',
  'menu.home.announce': '公告',
  'menu.home.display': '机构展示',
};

完成！