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.

Browser Support

Latest ✔	Latest ✔	No	No	No	No

Demo

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

Installation

npm install
npm install -g json-server # global

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

eslint:fix Can automatically repair a part of the code

styleint detect style

prettier format code

Babel

update to babel7

Webpack

update to webpack5

Contents

├── /build/                   
├── /dist/     
├── /mock/      
├── /src/              
│ ├── /assets/        
│ │ └── /images/       
│ │ └── /style/               
│ ├── /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       
└── webpack.config.js  

Package

dependencies

• @ant-design/icons A UI Design Language..
• 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.
• dayjs Day.js 2KB immutable date-time library alternative to Moment.js with the same modern API.
• 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.
• query-string Parse and stringify URL query strings.
• 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.
• swr React Hooks library for remote data fetching.

devDependencies

• @babel/core Babel is a compiler for writing next generation JavaScript.
• @babel/plugin-proposal-nullish-coalescing-operator Babel is a compiler for writing next generation JavaScript.
• @babel/plugin-proposal-optional-chaining 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.
• @pmmmwh/react-refresh-webpack-plugin A Webpack plugin to enable "Fast Refresh" (also previously known as Hot Reloading) for React components.
• @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.
• @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.
• clean-webpack-plugin A webpack plugin to remove your build folder(s) before building.
• compression-webpack-plugin Prepare compressed versions of assets to serve them with Content-Encoding.
• 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.
• eslint-plugin-react-hooks This ESLint plugin enforces the Rules of Hooks.
• file-loader File Loader.
• html-webpack-plugin Simplifies creation of HTML files to serve your webpack bundles.
• husky Git hooks made easy.
• image-webpack-loader Image loader module for webpack.
• ip IP address tools for node.js.
• 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.
• postcss Transforming styles with JS plugins.
• 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.
• react-refresh
• sass-loader Compiles Sass to CSS.
• source-map-loader extract sourceMappingURL comments from modules and offer it to webpack.
• 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).