2024年4月18日发(作者：)

创建Ant Design Pro项目

Ant Design Pro是一套基于React和Ant Design的企业级React应用程序框架。

它提供了丰富的组件和模板，能够快速构建现代化、美观的企业级应用程序。

准备工作

在创建Ant Design Pro项目之前，我们需要进行一些准备工作：

1. 安装和npm：Ant Design Pro是基于开发的，所以需要首

先安装和npm，你可以通过官网下载安装包并按照向导安装。

2. 安装yarn（可选）：yarn是一个比npm更快、更可靠的包管理器，如果你

愿意使用yarn，可以通过npm全局安装yarn。

npm install -g yarn

创建Ant Design Pro项目

安装完必要的软件之后，我们可以开始创建Ant Design Pro项目了。

1. 创建项目：首先，在命令行中切换到你想要创建项目的目录，并执行下面的

命令来创建一个新的Ant Design Pro项目：

yarn create umi

这个命令会启动一个交互式的命令行工具，让你选择一些配置项。在这个工

具中，你可以选择项目类型、插件和模板等。你可以使用键盘上下箭头来选

择选项，并按Enter键进行确认。

选择项目类型：在这里我们选择

Ant Design Pro

，然后按Enter键进行确认。

选择模板：在这里我们选择

Ant Design Pro

，然后按Enter键进行确认。

选择插件：在这里你可以选择需要的插件，或者直接按Enter键跳过。

安装依赖：最后，命令行工具会自动下载和安装项目依赖。

2. 启动开发服务器：完成创建项目之后，进入项目目录，并执行下面的命令来

启动开发服务器：

yarn start

这个命令将会启动开发服务器，并在浏览器中打开一个新的页面，显示Ant

Design Pro的默认模板。你可以在这个模板的基础上进行开发，或者根据

你的需求进行定制。

项目结构介绍

创建Ant Design Pro项目之后，会生成一些默认的文件和目录。下面是这些文件

和目录的作用和结构介绍：

•

src

目录：这是项目的主要代码目录。你的React组件、样式文件、以及其

他一些代码都应该放在这个目录下。

–

–

–

–

•

•

•

•

layouts

目录：这个目录包含了Ant Design Pro的布局组件。你可以

在这个目录下进行布局组件的定制。

pages

目录：这个目录包含了你的页面组件。每个页面组件对应着一

个路由，你可以在这个目录下创建新的页面。

components

目录：这个目录包含了你的可复用组件。你可以在这个目

录下创建新的可复用组件，并在页面组件中使用它们。

services

目录：这个目录包含了你的服务模块。你可以在这个目录下

定义与后端交互的服务模块，并在页面组件中使用它们。

config

目录：这个目录包含了Ant Design Pro的一些配置文件。你可以在

这个目录下对Ant Design Pro进行配置。

public

目录：这个目录包含了一些公共资源文件，例如HTML模板和图片等。

你可以在这个目录下添加和管理这些资源文件。

mock

目录：这个目录包含了一些模拟数据文件，用于开发阶段模拟接口返

回的数据。

dist

目录：这个目录是构建产物目录，包含了构建生成的静态文件。

自定义和定制

Ant Design Pro提供了丰富的组件和模板，但是你可能还需要自定义和定制它来

满足你的具体需求。

自定义主题

Ant Design Pro使用了Ant Design的组件和样式，你可以通过修改

config/

文件来自定义整个应用程序的主题。

定制布局

Ant Design Pro的布局组件提供了灵活的方式来定义应用程序的布局。你可以在

src/layouts

目录下创建新的布局组件，并在页面组件中使用它们。

编写页面

在Ant Design Pro中，页面组件被放置在

src/pages

目录下。你可以通过创建新

的页面组件来扩展你的应用程序。

编写服务

在Ant Design Pro中，服务模块被放置在

src/services

目录下。你可以在这个目

录下创建新的服务模块，并在页面组件中使用它们。

构建和部署

当你完成开发并准备将应用程序部署到生产环境时，你可以执行下面的命令来构建

应用程序：

yarn build

这个命令将会根据配置文件生成静态文件，并将它们放置在

dist

目录中。

接下来，你可以将

dist

目录中的文件上传到你的Web服务器中，来部署你的Ant

Design Pro应用程序。

总结

通过Ant Design Pro，我们可以快速构建现代化、美观的企业级React应用程序。

在本文中，我们介绍了如何创建一个Ant Design Pro项目，并对项目的结构和一

些常用功能进行了介绍。同时，我们还提到了如何自定义和定制Ant Design Pro

来满足具体需求。希望这篇文章对你理解和使用Ant Design Pro有所帮助。