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管理後臺 -- 路由搭建（四）