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

黄毛火烧雪下2025-10-30 16:59

Ant Design Pro 是一个基于 Ant Design

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

一、安装 Ant Design Pro 脚手架

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

c 复制代码

yarn global add @ant-design/pro-cli

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

c 复制代码

yarn global list | grep pro

输出结果如下：

c 复制代码

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）加入到环境变量中：

c 复制代码

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

二、创建 Ant Design Pro 项目

执行以下命令创建项目：

c 复制代码

pro create myapp

根据提示选择项目类型：

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

❯ simple

complete

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

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

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

三、项目结构预览

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

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

四、启动项目

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

c 复制代码

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