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

简介: 基于React、Mobx、Webpack 和 React-Router的项目模板。 #88

前言


自己利用业余时间,基于React、Ant、Webpack、Mobx、React-Router写了一个后台管理模板,接下来会出三部曲系列,分为前端、后端、运维到发布,从零搭建React后台管理模板,目前已在公司内部搭建了几套项目,并都已上线,希望这个系列,帮助自己梳理各技术最新知识点,同时也希望对看到的人有所帮助。


项目效果:


登录页:

404页:

列表页:


GitHub源码地址


Tristana


在线预览地址


Tristana


技术栈


  • 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"
  },
目录
相关文章
|
17天前
|
前端开发 JavaScript 安全
|
17天前
|
前端开发 JavaScript Java
|
28天前
|
缓存 前端开发 JavaScript
「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!(三)
「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!
|
28天前
|
缓存 前端开发 JavaScript
「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!(二)
「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!
|
28天前
|
前端开发 JavaScript
「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!(一)
「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!
|
1月前
|
存储 JavaScript 开发者
Mobx+Mobx-React快速上手 简单可扩展的状态管理解决方案
Mobx+Mobx-React快速上手 简单可扩展的状态管理解决方案
24 0
|
1月前
|
JavaScript 前端开发
在项目中引入webpack打包工具
在项目中引入webpack打包工具
|
1月前
|
前端开发 API 数据安全/隐私保护
【第45期】一文解决React项目的权限管理
【第45期】一文解决React项目的权限管理
32 0
|
1月前
|
Web App开发 资源调度 JavaScript
竟然可以在一个项目中混用 Vue 和 React?
竟然可以在一个项目中混用 Vue 和 React?
|
1月前
|
前端开发 JavaScript API
Github 上 8 个很棒的 React 项目
Github 上 8 个很棒的 React 项目

相关产品

  • 云迁移中心