基于 React、Mobx、Webpack 和 React-Router 的项目模板。

前言

自己利用业余时间，基于 React 、Ant 、Webpack 、Mobx 、React-Router 、TS 写了一个后台管理模板，目前已在公司内部搭建了几套项目，并都已上线，希望帮助自己梳理各技术最新知识点，同时也希望对看到的人有所帮助。

项目效果：

登录页：

404 页：

列表页：

分支

main hooks + ts

class class + ts

js class + js

如何快上手

一个基本列表展示

源码地址

Tristana

在线预览地址

Demo

技术栈

• React
• Ant
• React-Router
• Mobx
• Webpack
• ES6
• Babel
• Axios
• Eslint
• Stylelint
• TS

项目结构

.
├── LICENSE
├── README.md
├── README2.md
├── declaration.d.ts
├── package.json
├── prettier.config.js
├── public
│   └── index.html
├── script
│   ├── webpack.base.conf.js
│   ├── webpack.dev.js
│   └── webpack.prod.js
├── src
│   ├── app.tsx
│   ├── assets
│   ├── components
│   ├── config.ts
│   ├── index.tsx
│   ├── locales
│   ├── mobx
│   ├── mock
│   ├── pages
│   ├── request.tsx
│   ├── routeConfig.tsx
│   ├── servers
│   ├── styles
│   ├── typings
│   └── utils
├── stylelint.config.js
└── tsconfig.json

各大库版本

"dependencies": {
        "@ant-design/icons": "^4.2.2",
        "@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-proposal-optional-chaining": "^7.10.1",
        "@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",
        "@pmmmwh/react-refresh-webpack-plugin": "^0.3.3",
        "@sentry/react": "^5.18.1",
        "@types/react": "^16.9.48",
        "@types/react-dom": "^16.9.8",
        "@typescript-eslint/eslint-plugin": "^3.10.1",
        "@typescript-eslint/parser": "^3.10.1",
        "antd": "^4.5.3",
        "antd-dayjs-webpack-plugin": "^1.0.0",
        "awesome-typescript-loader": "^5.2.1",
        "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",
        "copy-webpack-plugin": "^5.1.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-prettier": "^6.11.0",
        "eslint-config-standard": "^14.1.0",
        "eslint-loader": "^3.0.4",
        "eslint-plugin-import": "^2.22.0",
        "eslint-plugin-promise": "^4.2.1",
        "eslint-plugin-react": "^7.20.6",
        "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.15.6",
        "mobx-react": "^6.1.4",
        "mobx-react-router": "^4.1.0",
        "mockjs": "^1.1.0",
        "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-intl-universal": "^2.2.5",
        "react-refresh": "^0.8.3",
        "react-router": "^5.1.2",
        "react-router-dom": "^5.1.2",
        "react-scripts": "^3.0.0",
        "socket.io-client": "^2.3.0",
        "source-map-loader": "^1.0.2",
        "speed-measure-webpack-plugin": "^1.3.1",
        "style-loader": "^1.2.1",
        "stylelint": "^13.0.0",
        "stylelint-config-prettier": "^8.0.2",
        "stylelint-config-standard": "^19.0.0",
        "terser-webpack-plugin": "^2.2.1",
        "trtc-js-sdk": "^4.6.3",
        "ts-import-plugin": "^1.6.6",
        "typescript": "^4.0.2",
        "webpack": "^4.41.2",
        "webpack-bundle-analyzer": "^3.6.0",
        "webpack-cli": "^3.3.10",
        "webpack-dev-server": "^3.10.1"
    },

最后

如果你觉得还不错或者有帮助的同学，欢迎关注，多多 star ；欢迎关注我的Blog