How to install Ant Design Pro? Simple Getting Started Guide

What is Ant Design Pro? How to install Ant Design Pro? The following article will share with you the getting started guide and help you get started with Ant Design Pro in a simple way. I hope it will be helpful to you!

1. What is Ant Design Pro

Ant Design Pro is an enterprise-level mid- and back-end front-end/design solution. We adhere to ## The design values ​​​​of #Ant Design are committed to continuing to build upward on the basis of design specifications and basic components, extracting typical templates/business components/supporting design resources, and further improving the efficiency of enterprise-level middle and back-end product design and development processes. "User" and "Designer" experience You need to install
yarn(or npm), node and git locally. Our technology stack is based on ES2015 , React, UmiJS, dva, g2 and antd, it will be very helpful to understand and learn this knowledge in advance.

2. Installation

Prepared environment

• node js seems to be 10.13 and above
  The version I use for node js is 12.14.0

• The npm server is abroad and access is slow. You can change it to a domestic source:

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

You can also install cnpm (domestic source). When using it, replace the npm command with cnpm

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

Method 1: git installation

git clone https://github.com/ant-design/ant-design-pro.git
cd　ant-design-pro
npm install
npm start

Method 2: The method recommended by the official website

Create an empty folder as the project directory and execute it in the directory:

yarn create umi

or

npm create umi

Then wait for the dependencies to be installed. After completion, you will be prompted to select a template. We 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 the template, a pop-up will appear To select the version, we choose v5 (v5 defaults to the typescript version, which is also the latest development mode of antd pro. v4 can choose two versions of javascript/typescript. If you don’t want to use typescript, you can choose v4, and then choose javascript. You can also Ask us to choose the simple and complete versions

Ant Design Pro scaffolding will be installed automatically.

After the installation is completed, a complete development framework has been generated for you , which provides various functions and pits covering mid- and back-end development. If we choose the simple version, the following is the directory structure of the entire project.

├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.ts            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

Then start installing dependencies and start the project, execute the following command

npm install
npm start

If you retry several times and still get an error, you can consider changing to cnpm.

cnpm install
cnpm start

Wait for the webpack building to complete

After the startup is completed, it will Automatically open the browser to access

http://localhost:8000. When you see the following page, it means success.

It’s actually very simple. When starting, we add a parameter fetch:blocks, which will automatically install the complete components into our code

cnpm run fetch:blocks

If we choose the complete version

The directory structure is like this

── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务，请求服务端接口的都放在这里
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.ts            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

The built-in template is as follows:

- Dashboard
  - 分析页
  - 监控页
  - 工作台
- 表单页
  - 基础表单页
  - 分步表单页
  - 高级表单页
- 列表页
  - 查询表格
  - 标准列表
  - 卡片列表
  - 搜索列表（项目/应用/文章）
- 详情页
  - 基础详情页
  - 高级详情页
- 结果
  - 成功页
  - 失败页
- 异常
  - 403 无权限
  - 404 找不到
  - 500 服务器出错
- 个人页
  - 个人中心
  - 个人设置
- 图形编辑器
  - 流程图编辑器
  - 脑图编辑器
  - 拓扑编辑器
- 帐户
  - 登录
  - 注册
  - 注册成功

The page probably looks like this

Specific demo page reference: https://preview. pro.ant.design/dashboard/analysis

For more programming-related knowledge, please visit:

Programming Video! !

The above is the detailed content of How to install Ant Design Pro? Simple Getting Started Guide. For more information, please follow other related articles on the PHP Chinese website!