前言
自己利用业余时间，基于React、Ant、Webpack、Mobx、React-Router写了一个后台管理模板，接下来会出三部曲系列，分为前端、后端、运维到发布，从零搭建React后台管理模板，目前已在公司内部搭建了几套项目，并都已上线，希望这个系列，帮助自己梳理各技术最新知识点，同时也希望对看到的人有所帮助。
项目效果：
登录页：
404页：
列表页：
GitHub源码地址
在线预览地址
技术栈
- React
- Ant
- React-Router
- Mobx
- Webpack
- ES6
- Babel
- Axios
- Eslint
- Stylelint
项目结构
│ .babelrc // babelrc配置 │ .eslintrc.json // eslint配置 │ .gitignore // git忽略配置 │ package.json // 依赖包配置 │ README.md // 项目说明 │ stylelint.config.js // stylelint配置 │ ├─dist // 打包输出目录 ├─public // 项目公开目录 │ index.html │ ├─script // webpack配置 │ webpack.base.conf.js // webpack通用配置 │ webpack.dev.js // webpack开发环境配置 │ webpack.prod.js // webpack生产环境配置 │ └─src // src入口目录 │ config.js // 基础配置文件 │ index.jsx // 项目入口文件 │ request.jsx // 接口请求配置 │ routeConfig.jsx // 路由配置 │ ├─assets // 静态资源 │ └─images │ sign_bg.jpg │ ├─components // 公用组件 │ ├─LayoutHeader │ │ index.jsx │ │ index.less │ │ │ ├─PrivateRoute │ │ index.jsx │ │ │ └─Socket │ index.jsx │ ├─mobx // mobx配置 │ │ basicStore.js │ │ rootStore.js │ │ │ ├─AddGoods │ │ store.js │ │ │ ├─CounterStore │ │ store.js │ │ │ └─Dashboard │ store.js │ ├─pages // 页面组件 │ ├─AddGoods │ │ index.jsx │ │ index.less │ │ │ ├─Counter │ │ index.jsx │ │ index.less │ │ │ ├─Dashboard │ │ index.jsx │ │ index.less │ │ │ ├─Home │ │ │ index.jsx │ │ │ index.less │ │ │ │ │ └─components │ │ menu.jsx │ │ │ └─User │ error.jsx │ error.less │ login.jsx │ login.less │ ├─servers // 接口配置 │ dashboard.js │ ├─styles // 公共样式 │ index.less │ └─utils // 工具库 index.js
各大库版本
"dependencies": { "@babel/cli": "^7.8.0", "@babel/core": "^7.8.0", "@babel/plugin-proposal-class-properties": "^7.8.0", "@babel/plugin-proposal-decorators": "^7.8.0", "@babel/plugin-proposal-json-strings": "^7.8.0", "@babel/plugin-syntax-dynamic-import": "^7.8.0", "@babel/plugin-syntax-import-meta": "^7.8.0", "@babel/plugin-transform-runtime": "^7.8.0", "@babel/polyfill": "^7.8.0", "@babel/preset-env": "^7.8.2", "@babel/preset-react": "^7.8.0", "@babel/preset-stage-2": "^7.8.0", "antd": "^4.0.0", "axios": "^0.19.2", "babel-eslint": "^10.0.3", "babel-loader": "^8.0.0", "babel-plugin-import": "^1.13.0", "babel-plugin-react-css-modules": "^5.2.6", "classnames": "^2.2.6", "clean-webpack-plugin": "^3.0.0", "compression-webpack-plugin": "^3.0.1", "core-js": "^3.6.4", "cross-env": "^6.0.3", "css-loader": "^3.2.0", "dayjs": "^1.8.15", "eslint": "^6.8.0", "eslint-config-standard": "^14.1.0", "eslint-loader": "^3.0.3", "eslint-plugin-import": "^2.20.0", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-node": "^11.0.0", "eslint-plugin-promise": "^4.2.1", "eslint-plugin-react": "^7.17.0", "eslint-plugin-standard": "^4.0.1", "file-loader": "^5.0.2", "history": "^4.7.2", "html-webpack-plugin": "^3.2.0", "install": "^0.12.2", "is-promise": "^2.1.0", "less": "^3.8.1", "less-loader": "^5.0.0", "lint-staged": "^10.0.8", "mini-css-extract-plugin": "^0.8.0", "mobx": "^5.13.1", "mobx-react": "^6.1.4", "npm": "^6.10.2", "optimize-css-assets-webpack-plugin": "^5.0.1", "postcss-loader": "^3.0.0", "pre-commit": "^1.2.2", "progress-bar-webpack-plugin": "^1.12.1", "prop-types": "^15.7.2", "react": "^16.12.0", "react-dom": "^16.12.0", "react-router": "^5.1.2", "react-router-dom": "^5.1.2", "react-scripts": "^3.0.0", "speed-measure-webpack-plugin": "^1.3.1", "stylelint": "^13.0.0", "stylelint-config-standard": "^19.0.0", "terser-webpack-plugin": "^2.2.1", "webpack": "^4.41.2", "webpack-bundle-analyzer": "^3.6.0", "webpack-cli": "^3.3.10", "webpack-dev-server": "^3.10.1" },
