dva-typescript-antd-starter-kit

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).

This site is open source. Improve this page.