react + react-router + redux + ant-Desgin 搭建react管理后台 -- 新增项目文件(二)
前言
学习总结使用,博客如中有错误的地方,请指正。改系列文章主要记录了搭建一个管后台的步骤,主要实现的功能有:使用路由模拟登录、退出、以及切换不同的页面;使用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及布局(三)