dva-typescript-antd-starter-kit

A admin dashboard application demo based on antd-mobile. Now it is not perfect, then I will continue to improve the project. If you don’t understand Chinese, it doesn’t matter. Clone this repo and npm install, You can use it directly.

About

The structure of the project imitates ant-design-pro,but without using the default configuration of dva, manually configure webpack4. The package in the project uses the latest version.

Browser Support

Latest ✔	No	No	No	No	No

Installation

npm install

Running Dev Server

npm run dev

Building

npm run build

cnpm

如果你使用webstorm和阿里的cnpm那么，直接双击左下角npm中的cnpm即可

Mock

click mockjs，start mock data, You can see the effect of the mock data in the "Home2".

Linter

eslint:fix Can automatically repair a part of the code

styleint detect style

prettier format code

Babel

update to babel7

react-hot-loader

dynamic import react-hot-loader in development mode

Contents

├── /build/                   
├── /dist/     
├── /mock/      
├── /src/              
│ ├── /assets/        
│ │ └── /images/       
│ │ └── /style/        
│ │ └── /svg/          
│ ├── /common/        
│ ├── /components/     
│ ├── /layouts/        
│ ├── /models/         
│ ├── /routes/         
│ ├── /services/       
│ ├── /utils/          
│ │ └── request.js     
│ │ └── utils.js 
│ ├── favicon.ico      
│ ├── index.html       
│ ├── index.less       
│ ├── index.tsx        
│ └── route.tsx 
├── .browserslistrc      
├── .editorconfig     
├── .eslintrc          
├── .gitignore  
├── .lintstagedrc     
├── .stylelintrc       
├── babel.config.js  
├── package.json       
├── postcss.config.js  
├── README.md  
├── tsconfig.json      
├── tslint.json        
└── webpack.config.js  

Package

dependencies

• antd-mobile A configurable Mobile UI.
• axios Promise based HTTP client for the browser and node.js.
• classnames A simple javascript utility for conditionally joining classNames together.
• dva Lightweight front-end framework based on redux, redux-saga and react-router.
• dva-loading Auto loading plugin for dva. 👏 You don't need to write showLoading and hideLoading any more.
• history Manage session history with JavaScript.
• lodash A modern JavaScript utility library delivering modularity, performance, & extras.
• mockjs A simulation data generator.
• moment A lightweight JavaScript date library for parsing, validating, manipulating, and formatting dates.
• query-string Parse and stringify URL query strings.
• rc-form React High Order Form Component(web & react-native).
• react A declarative, efficient, and flexible JavaScript library for building user interfaces.
• react-dom This package serves as the entry point of the DOM-related rendering paths. It is intended to be paired with the isomorphic React, which will be shipped as react to npm.
• styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅 .
• react-hot-loader Tweak React components in real time.

devDependencies

• @babel/core Babel is a compiler for writing next generation JavaScript.
• @babel/plugin-proposal-class-properties Babel is a compiler for writing next generation JavaScript.
• @babel/plugin-proposal-decorators Babel is a compiler for writing next generation JavaScript.
• @babel/plugin-syntax-dynamic-import Babel is a compiler for writing next generation JavaScript.
• @babel/plugin-transform-runtime Babel is a compiler for writing next generation JavaScript.
• @babel/preset-env Babel is a compiler for writing next generation JavaScript.
• @babel/preset-react Babel is a compiler for writing next generation JavaScript.
• @babel/preset-typescript Babel is a compiler for writing next generation JavaScript.
• @babel/runtime Babel is a compiler for writing next generation JavaScript.
• @types/classnames This package contains type definitions for react.
• @types/lodash This package contains type definitions for lodash.
• @types/react This package contains type definitions for classnames.
• @types/react-dom This package contains type definitions for react-dom.
• @types/webpack This package contains type definitions for webpack.
• @types/webpack-env This package contains type definitions for webpack-env.
• @typescript-eslint/eslint-plugin This package contains type definitions for typescript-eslint/eslint-plugin.
• @types/typescript-eslint/parser This package contains type definitions for typescript-eslint/parser.
• autoprefixer Parse CSS and add vendor prefixes to rules by Can I Use.
• babel-loader Webpack plugin for Babel.
• babel-plugin-import Modularly import plugin for babel.
• browser-sync Keep multiple browsers & devices in sync when building websites.
• browser-sync-webpack-plugin Easily use BrowserSync in your Webpack project.
• clean-webpack-plugin A webpack plugin to remove your build folder(s) before building.
• copy-webpack-plugin Copy files and directories with webpack.
• css-loader CSS Loader.
• cssnano A modular minifier, built on top of the PostCSS ecosystem.
• cssnano-preset-advanced A modular minifier, built on top of the PostCSS ecosystem.
• eslint A fully pluggable tool for identifying and reporting on patterns in JavaScript.
• eslint-config-airbnb A mostly reasonable approach to JavaScript.
• eslint-config-prettier Turns off all rules that are unnecessary or might conflict with Prettier.
• eslint-import-resolver-webpack
• eslint-plugin-import ESLint plugin with rules that help validate proper imports.
• eslint-plugin-jsx-a11y Static AST checker for a11y rules on JSX elements.
• eslint-plugin-prettier ESLint plugin for Prettier formatting.
• eslint-plugin-react React specific linting rules for ESLint.
• expect
• file-loader File Loader.
• happypack Happiness in the form of faster webpack build times.
• hard-source-webpack-plugin
• html-webpack-plugin Simplifies creation of HTML files to serve your webpack bundles.
• image-webpack-loader Image loader module for webpack.
• husky Git hooks made easy.
• json-server Get a full fake REST API with zero coding in less than 30 seconds (seriously).
• less Less. The dynamic stylesheet language.
• less-loader Compiles Less to CSS.
• less-vars-to-js Read LESS variables from the contents of a file and returning them as a javascript object.
• lint-staged Run linters on git staged files.
• mini-css-extract-plugin Lightweight CSS extraction plugin.
• node-sass 🌈 Node.js bindings to libsass.
• postcss-import PostCSS plugin to inline @import rules content.
• postcss-loader PostCSS loader for webpack.
• postcss-preset-env Convert modern CSS into something browsers understand.
• prettier Prettier is an opinionated code formatter.
• sass-loader Compiles Sass to CSS.
• source-map-loader extract sourceMappingURL comments from modules and offer it to webpack.
• style-loader Style Loader.
• stylelint A mighty, modern CSS linter.
• stylelint-config-prettier Turns off all rules that are unnecessary or might conflict with prettier.
• stylelint-config-rational-order Stylelint config that sorts related property declarations by grouping together in the rational order 🚦.
• stylelint-config-standard The standard shareable config for stylelint.
• stylelint-declaration-block-no-ignored-properties Disallow property values that are ignored due to another property value in the same rule.
• stylelint-order A plugin pack of order related linting rules for stylelint.
• svg-sprite-loader Webpack loader for creating SVG sprites.
• terser-webpack-plugin Terser Plugin.
• typescript TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
• url-loader URL Loader.
• webpack A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows to load parts for the application on demand. Through "loaders," modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
• webpack-cli Webpack's Command Line Interface.
• webpack-dev-server Serves a webpack app. Updates the browser on changes.
• webpack-merge SMerge designed for Webpack (MIT).