Ant design pro和umi ui

#Ant design pro#

在Ant design pro中umi@4是不支持umi ui可视化辅助编程工具（右下角的小球球），umi@3才支持umi ui可视化辅助编程工具。

在Ant design pro官网默认使用的是umi@4，想要使用umi@3需要先卸载当前安装的pro-cli，卸载命令如下：

npm uninstall -g @ant-design/pro-cli

然后指定版本安装，经过我的测试

3.1.0

这个版本就可以选择 umi 版本，重新使用

npm install -g @ant-design/[email protected]

安装 pro-cli 即可

npm install -g @ant-design/[email protected]

然后再去初始化脚手架，就可以选择umi@3了。命令：

pro create myapp

接下来就是和官网的一样，选择安装全量的还是一个简单的脚手架？全量的脚手架建议用来二开，不方便修改。

再去安装依赖，使用yarn 或者npm install 都可以。

之后再去添加umi ui，命令

yarn add @umijs/preset-ui -D

就可以出现小球了。

启动项目时，可能会出现启动失败的问题，可能是因为node版本太高了，需要将node版本降到16，但是安装依赖的时候需要node版本在18以上，所以会涉及到node版本管理的问题。自行百度，如何管理node版本。

在使用小球添加页面时，可能会出现阿里巴巴证书认证问题。可以参考下面一位大佬的操作。

也就是直接修改安装依赖后node_modules/getnpmregistry/index.js这个包下的taobao镜像

"https://registry.npmmirror.com/"

再去使用小球添加页面就可以添加成功了，添加成功之后项目可能自动停止了，然乎会出现报错。如果出现了报错，可以尝试重新安装依赖，并且将src/.umi文件删除，后重新启动项目（安装依赖时要注意node版本的切换）。

然后就大功告成了！！！