Shulou(Shulou.com)06/02 Report--

This article mainly shows you "how to install Ant Design Pro", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to install Ant Design Pro" this article.

1. What is Ant Design Pro

Ant Design Pro is an enterprise-level mid-background front-end / design solution. Adhering to the design values of Ant Design, we are committed to continue to build upward on the basis of design specifications and basic components, extract typical templates / business components / supporting design resources, and further enhance the experience of "users" and "designers" in the process of enterprise-level mid-background product design and development.

Yarn (or npm), node, and git need to be installed locally. Our technology stack is based on ES2015+, React, UmiJS, dva, G2, and antd, and it is very helpful to know and learn these knowledge in advance.

2. Installation

Prepared environment

Node js seems to be 10.13 or above.

The version of my node js is 12.14.0

The npm server is abroad, and its access is slow, so it can be replaced with a domestic source:

Npm config set registry https://registry.npm.taobao.org

You can also install cnpm (the domestic source used) and replace it with cnpm wherever you need the npm command

Npm install-g cnpm-- registry= https://registry.npm.taobao.org

Method 1: git installation

Git clone https://github.com/ant-design/ant-design-pro.gitcd ant-design-pronpm installnpm start

Method 2: the method recommended by the official website

Create a new empty folder as the project directory and execute it under the directory:

Yarn create umi

Or

Npm create umi

Then wait for the dependency to be installed, and then you will be prompted to select a template. We will select the first ant-design-pro:

Select the boilerplate type (Use arrow keys) ❯ ant-design-pro-Create project with an layout-only ant-design-pro boilerplate, use together with umi block. App-Create project with a simple boilerplate, support typescript. Block-Create a umi block. Library-Create a library with umi. Plugin-Create a umi plugin.

After selecting a template, the selected version will pop up. We choose v5 (v5 is the typescript version by default, which is also the latest development mode of antd pro. V4 can choose two versions of javascript/typescript. If you do not want to use typescript, you can select v4, and then select javascript. We will also be asked to choose simple and complete versions.

Ant Design Pro scaffolding will be installed automatically.

After the installation has been completed for you to generate a complete development framework, covering the background development of various functions and potholes, if we choose is the simple version, the following is the directory structure of the entire project.

├── config # umi configuration, including routin Build equal configuration ├── mock # local simulation data ├── public │ └── favicon.png # Favicon ├── src │ ├── assets # local static resources │ ├── components # business common components │ ├── e2e # integration test case │ ├── layouts # General layout │ ├── models # Global dva model │ ├── pages # Service Page Portal and Common templates │ ├── services # background Interface Service │ ├── utils # Toollibrary │ ├── locales # internationalization Resource │ ├── global.less # Global style │ └── global.ts # Global JS ├── tests # Test tool ├── README.md └── package.json

Then start installing the dependencies and start the project by executing the following command

Npm installnpm start

If you report an error after several retries, you can consider changing the cnpm.

Cnpm installcnpm start

Wait for webpack building to complete

After the startup is completed, you will automatically open a browser to access http://localhost:8000, and you will see the following page as a sign of success.

In fact, it is very simple, when starting, we add a parameter fetch:blocks, which will automatically install the complete component into our code.

Cnpm run fetch:blocks

If we choose the full version of complete

That's what the directory structure looks like.

── config # umi configuration, including routin Build equal configuration ├── mock # local simulation data ├── public │ └── favicon.png # Favicon ├── src │ ├── assets # local static resources │ ├── components # business common components │ ├── e2e # integration test case │ ├── layouts # General layout │ ├── models # Global dva model │ ├── pages # Service Page Portal and Common templates │ ├── services # background Interface Service │ ├── utils # toollibrary │ ├── locales # internationalized resource │ ├── global.less # global style │ └── global.ts # global JS ├── tests # test tool ├── README.md └── package.json

Built-in templates are as follows:

-Dashboard-analysis page-monitoring page-workbench-form page-basic form page-step form page-advanced form page-list page-query form-standard list-card list-search list (project / application / article)-details page-basic details page-advanced details page-results- Success page-failure page-exception-403 No permissions-404 not found-500 server error-personal page-personal Center-personal settings-graphic editor-flowchart editor-brain map editor-topology editor-account-login-registration-registration successful

That's what the page looks like.

The above is all the contents of the article "how to install Ant Design Pro". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.