详解使用React全家桶搭建一个后台管理系统

引子

学生时代为了掌握某个知识点会不断地做习题，做总结，步入岗位之后何尝不是一样呢？做业务就如同做习题，如果‘课后'适当地进行总结，必然更快地提升自己的水平。 由于公司采用的react+node的技术栈，于是就完成了一个reactSPA小项目，计划日后把平时工作中遇到的业务以及学习中遇到有趣的东西给抽象成demo展示出来。目前该项目只是把雏形搭好，效果如下。在此文的基础上，写了篇新文章使用React全家桶搭建一个后台管理系统,欢迎围观。(附注：因为项目不时更新，文章不一定会即时更新，所以以实际的项目为准)

其实这套界面风格不仅仅可以作为后台管理系统界面，也可以修改成一个可以展示项目并且美观的博客。项目地址在这里(本地跑效果更佳)，如果有好的意见欢迎提issue或pr。

目录结构

项目的初始结构和构造原因已罗列如上，由于过些日子会引人ts，所以项目结构必然还会改动，但肯定基于这基本雏形扩展的。

下面对目录结构作以下说明

1. 项目最初始是用create-react-app初始化的，create-react-app 是Facebook官方提供的react脚手架，也是业界最优秀的 React 应用开发工具之一;
2. 中间件目录到时候可以引人日志中间件等;
3. container和components存放的都是react组件，区别是：只要和主页样式有关的组件就放在container中，和功能有关的模块(比如我实现分装的表格组件、弹出输入框组件等)就应放到components中;
4. 前端有些通用配置最好是存到全局(浏览器)中，这样调用起来就不用引用了，方便;
5. ajax模块需要自己实现的原因是到时候要是自己需要有跨域cors之类的需求，需要自定义多种Ajax请求(用fetch的情况下，未来fetch会越来越强大)

技术栈相关

虽然用到的技术栈众多，但是自己也谈不上熟练运用，多半是边查API边用的，所以只罗列些自己用相关的技术栈解决的点;

webpack(2.6)

①按需加载：

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），在config/webpack.config.dev.js 文件中作如下修改:

{
 test: /\.(js|jsx)$/,
 include: paths.appSrc,
 loader: 'babel',
 query: {
   plugins: [
    ['import', [{ libraryName: "antd", style: 'css' }]],
   ],
  cacheDirectory: true
 }
},

②引人less: