react + react-router + redux + ant-Desgin 搭建react管理後臺 -- 新增項目文件（二）

前言

　　學習總結使用，博客如中有錯誤的地方，請指正。改系列文章主要記錄了搭建一個管後臺的步驟，主要實現的功能有：使用路由模擬登陸、退出、以及切換不一樣的頁面；使用redux實現麪包屑；引入使用其餘經常使用的組件，好比highchart、富文本等，後續會繼續完善。

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

　　項目展現地址：https://huangtao5921.github.io/react-admin/ 

 

1、認識目錄文件

　　上一篇博客 react + react-router + redux + ant-Desgin 搭建react管理後臺 -- 初始化項目（一）已經初始化了一個基本的項目，接下來認識一下整個項目目錄結構：

├── config                           // webpack配置，裏面還包含其餘的文件
├── node_modules               // 項目依賴包文件夾
├── piblic
│   ├── favicon.ico                // 瀏覽器icon
│   ├── index.html                // 單頁面入口文件
│   ├── manifest.json            
├── src
│   ├── App.css                    // 可刪除
│   ├── App.js
│   ├── App.test.js               // 可刪除
│   ├── index.css                 // 可刪除
│   ├── index.js                   // 與index.html關聯的入口文件
│   ├── logo.svg                  // 可刪除
│   └── serviceWorker.js
├── .gitignore
├── package.json                // 項目依賴目錄、腳本以及其餘信息
├── README.md
└── yarn.lock

 

2、認識目錄文件

　　爲了適應咱們的項目，咱們把上面的文件刪除一些，而後添加一些文件，圖片的話隨便找4張。目錄結構以下所示：

├── config                        // webpack配置
├── node_modules                  // 項目依賴包文件夾
├── piblic
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── components                 // 組件
│   │    └── layout                // 佈局組件
│   │          ├── HeaderBar.js    // 頭部
│   │          └── SiderBar.js     // 左側邊欄
├── config                         // 配置文件
│   │    └── menuConfig.js         // 配置側邊欄
├── images                         // 圖片 
│   │    ├── bj.jpg
│   │    ├── connect.jpg
│   │    ├── custom.jpeg
│   │    └── logo.jpeg
├── pages                          // 頁面，須要可再加
│   │    ├── user
│   │    │    ├── list             // 用戶列表，裏面包含List.js
│   │    │    └── connect          // 聯繫，裏面包含Connect.js，connect.css
│   │    ├── home
│   │    │    └── Home.js          // 首頁
│   │    ├── tool
│   │    │    └── rich             // 富文本
│   │    ├── notFind
│   │    │    └── NotFind.js       // 404
│   │    └── login
│   │          └── Login.js        // 登陸頁
├── redux                          // redux部分
│   │    ├── action
│   │    │    └── index.js
│   │    ├── reducer
│   │    │    └── index.js
│   │    └── store
│   │          └── index.js
├── routes
│   │    └── Main.js              // 配置基本的路由
│   ├── App.js
│   ├── index.js
│   ├── app.css                    // 基本公共樣式
│   └── serviceWorker.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock

　　咱們這個項目是用的React腳手架搭建，爲了簡單，咱們書寫樣式直接用的是css文件，有須要能夠引入less，網上有如何引入的教程。

　　到目前爲止，咱們已經將項目的文件建好了，接下來就是開始寫代碼了。

　　注：交流問題的能夠加QQ羣：531947619

　　

 下一篇：react + react-router + redux + ant-Desgin 搭建react管理後臺 -- 引入ant-Desgin及佈局（三）