Getting Started

chenshuai2144afc163viztorddcat1115RaymonfgardnerChaituVRyutingzhao1991Ustimovnestoralonsoyagudaevliushmhlfarrocomemoryzablkdriamayushdasandersonlinnikogu
Last updated on 2021-06-04 10:57:65

Ant Design Pro is a production-ready solution for admin interfaces. Built on the design principles developed by Ant Design, this project introduces higher level components; we have developed templates, components, and a corresponding design kit to improve the user and development experience for admin interfaces.

Tips before development

Ant Design Pro is a front-end scaffolding. By default, readers have already understood some basic front-end knowledge, and understand umi and Ant Design. If you are a pure novice, it is recommended to read Beginner's Need to know. Sharpen the knife and chop wood by mistake. Knowing some basic knowledge can make the learning curve smoother.

Init

We provide create umi to quickly initialize scaffolding.

# use by npm
npx create-umi myapp
# use by yarn
yarn create umi myapp

Create umi offers a wide range of options to meet the scaffolding needs of different users, and we can choose to develop the language JavaScript or TypeScript.

language

You can also choose whether to get all the chunks.

easy

Select the version of antd, 3 or 4.

antd

A successful scaffold log.

end

Development

The development can begin after the initialization of the scaffolding is successful, and we have provided some commands to assist in the development.

start

Running this script starts the service and automatically opens the default browser to show your page. When you re-edit the code, the page will also refresh automatically.

start

build

Running this script will compile your project, and you can find the compiled files in the dist directory of the project for deployment.

build

If you need to deploy, you can review the [deployment]((/docs/deploy).

analyze

The analyze script does the same thing as build, but he opens a page showing your dependency information. If you need to optimize performance and package size, you need it.

analyze

lint

We offer a range of lint scripts, including TypeScript, less, css, md files. You can use this script to see what problems your code has. In commit we automatically run the related lint.

lint

lint:fix

Same as lint, but the lint error is fixed automatically.

lint:fix

i18n-remove

This script will attempt to remove all i18n code from the project, which is not good for complex run-time code and is used with caution.

more cli https://umijs.org/docs/cli

Document overview
Beginner's Need to know