搭建方法随时可能更新，请注意查看最新官网相关文档

Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案。

官网：pro.ant.design/zh-CN/docs/getting-started/

一些准备：

前端开发工具可以使用 vscode，或 WebStorm。
yarn：安装 | Yarn 中文网 (nodejs.cn)。一句话：npm install --global yarn

由于国内网络和前端的特殊性，在安装依赖等方面可能会失败或导致无法启动，浪费大量的时间，因此 Ant Design 推荐使用 tyarn - npm (npmjs.com) 及 cnpm - npm (npmjs.com) 工具。

主要搭建指令：

1 2	npm i @ant-design/pro-cli -g # 全局安装 pro create myapp # 在项目文件夹下使用，myapp为项目名

一个可能遇到的问题

/usr/local/lib/node_modules/@ant-design/pro-cli/src/create/generators/ant-design-pro/index.js:10
const sortPackage = require(‘sort-package-json’);
Error [ERR_REQUIRE_ESM]: require() of ES Module

解决方法：
进入@ant-design/pro-cli 全局安装目录（一般在 C:\Users\yourname\AppData\Roaming\npm\node_modules@ant-design\pro-cli）中执行 npm i sort-package-json@1.55.0 -D（如果初始化失败则 npm cache clean --force）。

下载完成后终端输入：

1	yarn # 如果可以的话，是 tyarn。如果还出错，再试试 cnpm install

项目目录可看到生成好的依赖包：node_modules

注意：脚手架工具生成了项目后

不要改动任何代码，先保证项目能运行
确认环境是否匹配、安装项目依赖

1 2	yarn run start # 你可以看看package.json里的script，以模拟数据的方式运行 # npm run start也行

注意使用 F12 及时看错误。

react 是对 js 的一层封装，而 umi 是对 react 的进一步封装。

【可选】Ant Design Pro 项目瘦身

项目瘦身过程中，每做一步就运行测试

移除国际化模块（国际化集成了多种语言，如无国际化需求可以删掉）：npm run i18n-remove。这个脚本将会尝试删除项目中所有的 i18n 代码，对于复杂的运行时代码，表现并不好，慎用。

然后自己手动删掉 /src/locales 文件夹。

一些解决方案：

移除国际化出现SyntaxError: Export ‘SelectLang’ is not defined. (11:55) · Issue #11143
🐛 BUG执行删除国际化命令报错 · Issue #10452 · ant-design/ant-design-pro (github.com)
左侧导航栏不显示问题：移除国际化后，项目左侧导航栏菜单和右上角退出登陆按钮不显示了。解决方法：给 /config/route.ts 配置文件的每一个路由都加上对应的 name 属性，如果不添加 name 属性，则菜单默认展示的是 path 属性。这里一定要给每一个路由都添加对应的 name 属性，不然导航栏还是不显示。

其它文件的删除（不同版本下的操作略有不同）：