【ES6+ReactJs】第4章： Ant Design

2.1、什么是Ant Design？
Ant Design是阿里蚂蚁金服团队基于React开发的ui组件，主要用于中后台系统的使用。官网：https://ant.design/index-cn

设计语言：

随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 Ant Design。基于『确定』和
『自然』的设计价值观，通过模块化的解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。
特性：

提炼自企业级中后台产品的交互语言和视觉风格。开箱即用的高质量 React 组件。
使用 TypeScript 构建，提供完整的类型定义文件。全链路开发和设计工具体系。

2.2、开始使用
2.2.1、引入Ant Design
Ant Design 是一个服务于企业级产品的设计体系，组件库是它的 React 实现，antd 被发布为一个 npm 包方便开发者安装并使用。
在 umi 中，你可以通过在插件集 umi-plugin-react 中配置 antd 打开 antd 插件，antd 插件会帮你引入 antd 并实现按需编译。
在config.js文件中进行配置：

2.2.2、小试牛刀
接下来，我们开始使用antd的组件，以tabs组件为例，地 址：https://ant.design/components/tabs-cn/

效果：

看下官方给出的使用示例：

下面我们参考官方给出的示例，进行使用： 创建MyTabs.js文件：


到此，我们已经掌握了antd组件的基本使用。

2.3、布局
antd布局：https://ant.design/components/layout-cn/

在后台系统页面布局中，往往是经典的三部分布局，像这样：

下面，我们通过antd组件来完成这个布局。

2.3.1、组件概述

：布局容器，其下可嵌套 或 本身，可以放在任何父容器中。
Header ：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 中。Sider ：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在Layout 中。
Content ：内容部分，自带默认样式，其下可嵌套任何元素，只能放在中。
：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 中。

2.3.2、搭建整体框架
在src目录下创建layouts目录，并且在layouts目录下创建index.js文件，写入内容：

接下来，配置路由：（非必须）

config.js文件：

前面所定义的布局是全局布局，那么，在子页面中如何使用这个全局布局呢？

首先，需要在布局文件中，将Content内容替换成{this.props.children}，意思是引入传递的内容。

接下来配置路由（注意，在布局路由下面进行配置）：

说明：下面的路由配置，是表明你需要通过手动配置的方式上进行访问页面，而不采用umi默认的路由方式。


2.3.4、美化页面
接下来，对页面做一些美化的工作：


2.3.5、引入导航条
使用Menu组件作为导航条：https://ant.design/components/menu-cn/



2.3.6、为导航添加链接
下面，我们对左侧的导航条添加链接，点击相应的链接在右侧进行相应页面的显示。

在src目录下创建user目录，并且在user目录下创建UserAdd.js和UserList.js文件，用于 模拟实现新增用户和查询用户列表功能。

UserAdd.js：

UserList.js：

接下来，配置路由：

为菜单添加链接：


注意：这里使用了umi的link标签，目的是出现记录点击的菜单。
测试：


2.4.1、基本用法
参考官方文档进行实现：https://ant.design/components/table-cn/ 改造UserList.js页面：


实现效果：

2.4.2、将数据分离到model中
model的实现：UserListData.js

修改UserList.js中的逻辑：


mock数据：MockListData.js