antd-umi-sys

If you like this project please send a ⭐, thank you!

Please give me a Star if you like this project.Thank you so much.

Introduction to the

Enterprise system, data visualization platform. Recommend a browser: Google Chrome github:https://github.com/mpw0311/antd-umi-sysCopy the code

Technology stack

  • Front-end frameworks: React and UMI
  • Front-end component library: ANTD
  • Front-end data visualization: Echarts, D3.js
  • Front-end data flow management: REDUx, DVA
  • Grammar: es6/7
  • Front-end style: less
  • Front-end and back-end communication: FETCH
  • Project packaging: Webpack

features

  • Single page application;
  • Modular and componentized development;
  • Combining dVA data flow scheme based on REdux and Redux-Saga;
  • Reduced-form routing does not need to maintain a redundant route configuration, and supports permissions, dynamic routing, and nested routing.
  • Plug-in, one click to load on demand, compatible with IE9, switch preact, etc.
  • Out of the box, install react, Preact, WebPack, React-Router, Babel, Jest, etc.
  • Rich Echarts graphic components: line chart, bar chart, bar chart, area chart, pie chart, Sankey chart, etc
  • Mock mocks data requests

[antd-umi-sys]

Environment to prepare

1. Install Node and ensure that the node version is 8 or later. $node -v 8.x 2 (NVM is recommended for node version management on MAC) Then install UMI globally and make sure the version is 2.0.0 or above. $NPM install - g umi (or yarn global add umi) $umi - v 2.0.0 3. The git download address scaffolding code: https://github.com/mpw0311/antd-umi-sys 4. 5. Start local development: NPM start 6. Package release: NPM run buildCopy the code

The directory structure

├ ─ ─ dist /// Default build output directory├ ─ ─ a mock /// Mock file directory, express based├ ─ ─ node_modules// Third-party libraries and tools├ ─ ─ the public// Public files (files in this folder will not be processed by the packaging tool, and will be copied as is)├ ─ ─ the config / ├ ─ ─ config. Js// Umi configuration, same as.umirc.js, one or the other└ ─ ─ SRC /// Source directory, optional├ ─ ─ assets// Public files (such as images, js files in this folder will be packaged by Webpack)├ ─ ─ the components /// Project components├ ─ ─ layouts /// Global layout├ ─ ─ main/index. Js// System internal layout├ ─ ─ the login/index. Js// Login page layout├ ─ ─ pages /// page directory, where files are routes├ ─ ─. Umi /// dev temporary directory, which needs to be added to.gitignore├ ─ ─document.ejs                / / HTML templates├ ─ ─404.js                      / / 404 pages├ ─ ─ the login /// System login page├ ─ ─ index. Js// Login page UI component├ ─ ─ index. Less// Component style├ ─ ─ the components / ├ ─ ─ model. Js// Data model├ ─ ─ sevice. Js// Data interface├ ─ ─ sys /// System folder├ ─ ─ page /// Page 1, name it any way, export the React component├ ─ ─ index. Js/ / UI components├ ─ ─ index. Less// Component style├ ─ ─ the components / ├ ─ ─ component. Js// Page component├ ─ ─ model. Js// Data model├ ─ ─ sevice. Js// Data interface├ ─ ─ utils /// Utility functions├ ─ ─ themes /// Custom style├ ─ ─global.css                      // Convention global style file, automatically imported, also can use global.less├ ─ ─global.js                       // Polyfill can be added here├ ─ ─ config. Js// Configure system information├ ─ ─. Umirc. Js// umi configuration, same as config/config.js, either of two options├ ─ ─ themes. Config. Js// Theme configuration├ ─ ─ eslintrcJs, JSX, ES6 (ES2015), etc├ ─ ─ the env// Environment variables└ ─ ─ package. JsonCopy the code

Git address