Ant Design Pro 项目初始化
搭建方法随时可能更新,请注意查看最新官网相关文档
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 | npm i @ant-design/pro-cli -g # 全局安装 |
一个可能遇到的问题
/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 | yarn run start # 你可以看看package.json里的script,以模拟数据的方式运行 |
注意使用 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 属性,不然导航栏还是不显示。
其它文件的删除(不同版本下的操作略有不同):
- 移除测试工具:
/tests
- 移除 e2e(自动化测试)
- 移除默认页面时记得删掉路由
- 移除
\src\services\swagger
接口文档工具
【可选但不推荐】Umi UI 加速开发
目前不再推荐使用 Umi UI 组件
只有框架的 V3 版本支持悬浮的 umi ui 按钮:
1 | npm i @ant-design/pro-cli@3.1.0 -g |
旧版本脚手架:
1 | yarn add @umijs/preset-ui -D |