Ant Design Pro学习

发表于 2025-08-16 更新于 2025-08- 18

作者 ylq 管理员

21~27 分钟 阅读

官网技术文档：开箱即用的中台前端/设计解决方案 - Ant Design Pro

Ant Design Pro是react的前端组件库，由蚂蚁金服开发，到现在github上仍在维护，是前端开发的常用组件库。

初始化

在此之前，需要安装yarn包管理工具，yarn -v 如果报 不是内部或外部命令，也不是可运行的程序或批处理文件。那就在node安装包的目录里找到yarn的bin目录添加到环境变量。

npm i yarn -g

官方提供了 pro-cli 来快速的初始化脚手架。

# 使用 npm
npm i @ant-design/pro-cli -g
pro create myapp

不过我试了一下，pro安装了会 报不是内部或外部命令，也不是可运行的程序或批处理文件。这个时候尝试npx pro create myapp 可以成功初始化。这个npx是什么我查了一下，大概知道一下：

npx 是 npm 从 5.2.0 版本开始引入的命令行工具，用于简化执行项目依赖中的可执行脚本。
它的主要功能是避免全局安装工具，同时提高开发效率。
npx 的主要作用是直接运行本地或远程 npm 包中的命令，而无需手动安装。
例如：
自动查找项目中 node_modules/.bin 目录下的可执行文件。
如果本地找不到对应的包，会临时从远程下载并执行，执行后自动删除。
避免全局安装工具，减少全局环境污染。

接下来命令行选择，simple就是左侧菜单只有两个，complete就是完整的所有菜单。我选第一个。

? 🚀 要全量的还是一个简单的脚手架? (Use arrow keys)
❯ simple
  complete

创建完成，将目录使用vscode打开，命令行执行npm install 安装依赖，完成后多一个node_modules目录。执行npm run dev 或者npm run start 就可以启动前端初始工程了。

有一些mock数据的页面。这样前端初始化就完成啦。

Ant Design Pro 的架构

Pro 的底座是 umi，umi 是一个 webpack 之上的整合工具。 umi 相比于 webpack 增加了运行时的能力，同时帮助我们配置了很多 webpack 的预设。也减少了 webpack 升级导致的问题。这也是我们能提供插件的原因。

目录结构

官方已经生成了一个完整的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。

├── 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

页面代码结构推荐

为了让项目代码组织更加规范，让开发能够更方便的定位到相关页面组件代码，官方定义了一套规范，该规范当前只作为推荐的指导，并非强制。

src
├── components
└── pages
    ├── Welcome        // 路由组件下不应该再包含其他路由组件，基于这个约定就能清楚的区分路由组件和非路由组件了
    |   ├── components // 对于复杂的页面可以再自己做更深层次的组织，但建议不要超过三层
    |   ├── Form.tsx
    |   ├── index.tsx  // 页面组件的代码
    |   └── index.less // 页面样式
    ├── Order          // 路由组件下不应该再包含其他路由组件，基于这个约定就能清楚的区分路由组件和非路由组件了
    |   ├── index.tsx
    |   └── index.less
    ├── User
    |   ├── components // group 下公用的组件集合
    |   ├── Login      // group 下的页面 Login
    |   ├── Register   // group 下的页面 Register
    |   └── util.ts    // 这里可以有一些共用方法之类，不做推荐和约束，看业务场景自行做组织
    └── *              // 其它页面组件代码