react + react-router + redux + ant-Desgin 搭建react管理后台 -- 引入ant-Desgin并测试（三）

前言

　　学习总结使用，博客如中有错误的地方，请指正。改系列文章主要记录了搭建一个管后台的步骤，主要实现的功能有：使用路由模拟登录、退出、以及切换不同的页面；使用redux实现面包屑；引入使用其他常用的组件，比如highchart、富文本等，后续会继续完善。

　　github地址：https://github.com/huangtao5921/react-antDesgin-admin （欢迎Star）

　　项目展示地址：https://huangtao5921.github.io/react-admin/ 

一、关于react的UI框架

　　上一篇文章中 react + react-router + redux + ant-Desgin 搭建react管理后台 -- 新增项目文件（二）已经将文件目录调整好。

　　接下来要做的是引入UI框架，并将静态页面大体布好。针对react的UI框架有很多，用的时候先调研一下，最好选择知名度比较高的，还一直在维护的，避免用的时候踩坑。此项目选择的是Ant-design，Ant-design是阿里巴巴团队出品的ReactUI组件库，地址：https://ant.design/index-cn。

二、引入ant-Desgin

　　根据ant-Desgin文档，从 yarn 或 npm 安装并引入 antd。

$ yarn add antd

　　然后修改 src/App.js，引入 antd 的按钮组件。

import React from 'react';
import Button from 'antd/lib/button';
import './App.css';

function App() {
  return (
    <div className="App">
      <Button type="primary">Button</Button>
    </div>
  );
}

export default App;

　　删除src/App.css内的所有css，在文件顶部引入 antd/dist/antd.css。

@import '~antd/dist/antd.css';

　　此时已经看到页面上已经有antd 的蓝色按钮组件，说明我们引入antd Design成功了，接下来就可以使用antd的UI组件进行开发了。

　　注：交流问题的可以加QQ群：531947619

　　

 下一篇：react + react-router + redux + ant-Desgin 搭建react管理后台 -- 路由搭建（四）