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及布局（三）