mobx_antd_react

Middle and back SPA complete project scaffolding. Source code address: github.com/Tianlikai/m…

Writing in the front

This is an iterative project, a mid-back project that keeps pace with The Times.

If it helps you build your project, please give a star. Thank you.

The characteristics of

  • Webpack is a configuration that works with real project development
  • The Router does basic permission handling, jumps, and a route configuration function to better organize project modules
  • Mobx handles data flow and is easy to use
  • Axios organizes API interfaces based on modules
  • Based on ANTD provides form, form, upload high – order components. Common services in the above scenarios are unified
  • Load modules on demand based on routes and components

File directory

Folder | ├ ─ ─ node_modules: module └ ─ ─... ├ ─ ─ _mocker_ : mock interface data ├ ─ ─ the build: webpack configuration file | ├ ─ ─ env: environment variable configuration | ├ ─ ─ index: call webpack entry file | ├ ─ ─ webpack. Base. Config: General configuration webpack | ├ ─ ─ webpack. Dev. Config: webpack development configuration | ├ ─ ─ webpack. DLL. Config: webpack public library package | └ ─ ─ webpack. Prod. Config: Webpack production configuration ├ ─ ─ dist: packaging generated directory ├ ─ ─ the SRC: development directory | ├ ─ ─ API: API configuration, axios package | ├ ─ ─ components: common components | ├ ─ ─ hoc: Common business | ├ ─ ─ layouts: layout components | ├ ─ ─ routes: project routing | | ├ ─ ─ ErrorPage: navigation error page | | ├ ─ ─ Home: the main road by module | | ├ ─ ─ the Login: The login page | | └ ─ ─ index. Js: routing configuration file | ├ ─ ─ Settings: the configuration file | | ├ ─ ─ const. Js: constants file | | ├ ─ ─ headConfig. Js: At the top of the module configuration | | ├ ─ ─ permissions. Js: permission configuration | | └ ─ ─ sideMenu. Js: directory | ├ ─ ─ the static: static file | ├ ─ ─ store: mobx store file | ├ ─ ─ utils: Tool function | ├ ─ ─ index. Ejs: template file | ├ ─ ─ index. The js: entry file | └ ─ ─ style.css. SCSS: Public Style ├─.babelrc Configuration file ├─.EditorConfig No OS Code Format ├─.EsLintignore esLint Ignore ├─.esLintrc. Json EsLint ├─ .gitignore Git ignore File ├── ├─ package.json Project Rely on NPM ├── Postcss.config.js postCSS plugin config ├── Readme. MD Project informationCopy the code

Technology stack

  • The react 16.3 xx
  • react-dom
  • react-router 4.xx
  • react-loadable
  • Mobx data flow
  • webpack 4.xx
  • ESLint code specification
  • Axios asynchronous request
  • antd ui
  • Mock mocks interface data
  • echarts

The development environment

  • Git clone github.com/Tianlikai/m…
  • npm i
  • npm run build:dll
  • npm run dev

The production environment

  • npm run build

To optimize a

  • Verify the code when submitting it, enforce the specification of the code
  • Loading is changed to a placeholder for better experience
  • Replace the React life cycle, as well as the use of the new API, the React from 16.3 17 will be gradually abolished componentWillReceiveProps componentWillMount, componentWillUpdate

future

  • Asynchronous rendering

Update the path

V 2.0.1

  • Modify the project file organization structure
  • – Modified project routing configuration (better combined with import dynamic loading, and common module splitting)
  • Update the WebPack configuration to split the development and production environments into smaller Webpack files and merge them through webpack-Merge
  • Api interfaces are not uniformly configured. They are differentiated by function modules
  • Add forms, forms, upload advanced components
  • Add a simple Dashboard page