1 了解 Ant Design Pro

Ant Design Pro 是基于 Ant Design 的一个开箱即用的，企业级中后台前端/设计解决方案。

效果：
在这里插入图片描述

源码地址：https://github.com/ant-design/ant-design-pro

特性:：
在这里插入图片描述

2 快速入门

2.1 部署安装

下载地址：https://github.com/ant-design/ant-design-pro

在这里插入图片描述

第一步：将 ant-design-pro-master.zip 解压到任意目录

Ant Design Pro 提供的目录如下:

├── config                   # umi 配置，包含路由，构建等配置 
├── mock                     # 本地模拟数据 
├── public
│   └── favicon.png          # Favicon
├── src
│ ├──assets                  # 本地静态资源
│ ├──components              # 业务通用组件
│ ├──e2e                     # 集成测试用例
│ ├──layouts                 # 通用布局
│ ├──models                  # 全局 dva model
│ ├──pages                   # 业务页面入口和常用模板
│ ├──services                # 后台接口服务
│ ├──utils                   # 工具库
│ ├──locales                 # 国际化资源
│ ├──global.less             # 全局样式
│ └──global.js               # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

第二步，导入项目到 Idea 中

在这里插入图片描述

第三步：进行初始化以及启动

安装相关依赖：

tyarn install

启动服务：

tyarn start

测试：
在这里插入图片描述

可以看到，系统已经启动完成。

2.2 菜单和路由

默认的菜单是不能直接投入到项目开发的，所以，我们需要搞清楚如何自定义菜单和路由。

在 pro 中，菜单和路由，在 router.config.js 配置文件中进行管理：
在这里插入图片描述

打开 router.config.js 后，可以看出，pro 提供了有 2 套路由(布局)，分别是 /user 和 /：

在这里插入图片描述

/user 的布局：
在这里插入图片描述

接下来，我们先重点关注，/ 路由：

    routes: [
      // dashboard
      { path: '/', redirect: '/dashboard/analysis' },
      {
        path: '/dashboard',
        name: 'dashboard',
        icon: 'dashboard',
        routes: [
          {
            path: '/dashboard/analysis',
            name: 'analysis',
            component: './Dashboard/Analysis',
          },
          {
            path: '/dashboard/monitor',
            name: 'monitor',
            component: './Dashboard/Monitor',
          },
          {
            path: '/dashboard/workplace',
            name: 'workplace',
            component: './Dashboard/Workplace',
          },
        ],
      },

所以，可以得出结论，菜单是由路由的配置生成的。

接下来进行实验，新增一个路由:

      // new
      {
        path: '/new',
        name: 'new',
        icon: 'user',
        routes: [
          {
            path: '/new/analysis',
            name: 'analysis',
            component: './Dashboard/Analysis',
          }, {
            path: '/new/monitor',
            name: 'monitor',
            component: './Dashboard/Monitor',
          }, {
            path: '/new/workplace',
            name: 'workplace',
            component: './Dashboard/Workplace',
          }, ],
      },

在这里插入图片描述

测试：
在这里插入图片描述

可以看出，新的菜单以及添加到页面中，只是显示的文字不对。那么文字在哪里配置呢?

其实，文字是在国际化文件中进行配置的：

在这里插入图片描述

新增配置如下：

'menu.new': 'New Dashboard', 
'menu.new.analysis': 'New 分析页', 
'menu.new.monitor': 'New 监控页', 
'menu.new.workplace': 'New 工作台',

在这里插入图片描述

进行测试：
在这里插入图片描述

2.3 新增页面

上面我们添加了新的菜单，但是页面依然使用的是模板中的页面，那么如何新增页面呢?

所有的页面依然是保存的 src/pages 中，在 pages 目录下，以功能为单元创建目录，如：

在这里插入图片描述

创建文件 NewAnalysis.js：

import React from 'react';

class NewAnalysis extends React.Component {
  render() {
    return (
      <div>NewAnalysis</div>
    );
  }
}

export default NewAnalysis;