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/ 

 

1、关于react的UI框架

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

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

 

2、引入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管理后台 -- 路由搭建（四）