前言
学习总结使用，博客如中有错误的地方，请指正。改系列文章主要记录了搭建一个管后台的步骤，主要实现的功能有：使用路由模拟登录、退出、以及切换不同的页面；使用redux实现面包屑；引入使用其他常用的组件，比如highchart、富文本等，后续会继续完善。
github地址：https://github.com/huangtao5921/react-antDesgin-admin （欢迎Star）
项目展示地址：https://huangtao5921.github.io/react-admin/
一、认识目录文件
上一篇博客 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
二、认识目录文件
为了适应我们的项目，我们把上面的文件删除一些，然后添加一些文件，图片的话随便找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及布局（三）