从零开始搭建react全家桶+Antd+Axios+ES6+ +webpack 后台管理系统 (一、准备)

1、项目描述

1. 此项目为一个前后台分离的后台管理系统的SPA，包括前端PC应用和后端应用
2. 包括用户管理、商品分类管理、商品管理、权限管理等功能模板
3. 前端:使用react全家桶+antd+axios+es6+ +webpack等技术
4. 后端：使用node+express+Mongodb等技术
5. 采用模块化，组件化，工程化的模式开发。

2、你能从此项目中学到什么？

1. 掌握使用react-router-dom
2. 学会使用redux+react-redux+redux-thunk管理应用组件状态
3. 掌axios与后端进行数据交互
4. 掌握antd组件库构建界面
5. 学会使用echarts或者bizcharts实现数据可视化展示
6. 学会使用react-deaft-wysiwyg实现富文本编辑器

3、使用create-react-app（脚手架）搭建项目

• create-react-app是react官方提供的用于搭建基于react+webpack+es6项目的脚手架

• 操作

   npm install -g create-react-app    :全局下载工具
   
   create-react-app react-admin  ：下载模板项目
  
   cd react-admin    
  
   npm start
    
   访问：localhost：3000
  
  
   搭建好的目录是这样：
  

因为我们要写自己的项目，所以要更改一些目录结构
建议改成如下

4、引入antd

1、npm install antd --save

3、在应用中使用antd组件

4、自定义antd 主题

需求： 使用antd的默认颜色bule改为Green

1、下载工具包

npm install less less-loader

npm install react-app-rewird customize-cra bebel-plugin-import

2、定义加载配置的js模块：config-overrides.js（新建的js，在根目录下）

3、修改package.json文件

修改为

重启刷新

最后蓝色按钮改成绿色按钮了