dva-typescript-antd-starter-kit

A admin dashboard application demo based on antd 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 intall, 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

Demo

https://wanliyunyan.github.io/dva-typescript-antd-starter-kit/dist

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 "列表页-查询表格".

Linter

tslint: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 A UI Design Language.
• 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.
• 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.
• react A declarative, efficient, and flexible JavaScript library for building user interfaces.
• react-container-query Parse CSS and add vendor prefixes to rules by Can I Use.
• 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.
• react-hot-loader Tweak React components in real time.
• react-perf-devtool A browser developer tool extension to inspect performance of React components.

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.
• autoprefixer Parse CSS and add vendor prefixes to rules by Can I Use.
• babel-eslint A wrapper for Babel's parser used for ESLint.
• babel-loader Webpack plugin for Babel.
• babel-plugin-import Modularly import plugin for babel.
• 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-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-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).
• ip IP address tools for node.js.
• 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.
• 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.
• tslint An extensible linter for the TypeScript language.
• tslint-config-prettier Use tslint with prettier without any conflict.
• tslint-react Lint rules related to React & JSX for TSLint.
• 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).