使用 Ant Design Pro CLI 快速创建前端中台项目

Ant Design Pro 是一个基于 Ant Design
和 Umi的企业级中后台前端框架，提供了完善的布局、权限、菜单、国际化、Mock 数据等能力，让开发者能够快速搭建管理系统或中台项目。

一、安装 Ant Design Pro 脚手架

首先，全局安装 Ant Design Pro CLI 工具：

yarn global add @ant-design/pro-cli

安装完成后，可以查看是否安装成功：

yarn global list | grep pro

输出结果如下：

warning package.json: No license field                                                                     
info "@ant-design/pro-cli@3.2.2" has binaries:
   - pro

此时会在全局生成可执行命令 pro。

⚠️ 如果执行 pro 提示 “command not found”，请将 Yarn 全局 bin 路径（例如 /Users/xufeijia/.yarn/bin）加入到环境变量中：

export PATH="$PATH:/Users/xufeijia/.yarn/bin"
source ~/.zshrc

二、创建 Ant Design Pro 项目

执行以下命令创建项目：

pro create myapp

根据提示选择项目类型：

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

simple：基础模板，只提供框架运行的核心结构，适合二次开发。

complete：完整模板，包含所有页面区块、权限、菜单、布局等功能，适合学习或快速原型。

👉 创建步骤详细文档：官方文档 - Ant Design Pro 快速上手

三、项目结构预览

simple 模板结构简洁，适合根据业务需求自定义模块。

complete 模板功能齐全，开箱即用，适合需要完整后台框架的场景。

四、启动项目

进入项目目录后，安装依赖并启动开发服务器：

cd myapp
yarn
yarn start

首次运行会要求登录 Ant Design Pro 账户，用于模板下载。

五、总结

项目模板	说明	适合场景
simple	基础骨架，轻量、可定制	适合自己搭建业务系统
complete	全功能后台模板，包含权限、布局、Mock	适合学习和快速原型开发

通过 @ant-design/pro-cli，你可以在几分钟内搭建一个现代化的中后台管理系统，无需从零配置 Umi、Ant Design、Layout 等依赖。

✨ 推荐：

Ant Design Pro 官网：https://pro.ant.design

Umi 官方文档：https://umijs.org