Ant Design Pro按照官网创建了项目，无法使用umi ui？来看看我废了半条命找出来的解决方案

背景

作为一个18线小后端开发，要不是为了找个新job，我是真心不想学前端的技术，后端都没研究透呢。但是，手里的项目又太low了，于是打算搞个新项目，买了某大佬的项目课，兴致勃勃地跟着操作，然后发现，时代变了，跟着Ant Design Pro官网创建的项目怎么都没法显示umi ui悬浮图标。

原因

接下来简要说明一下问题出现的原因，umi4 不支持 umi ui，如果你使用的是 Ant Design Pro 官网最新版本，按照官方文档创建项目时，官方的脚手架不提供 umi3 的版本。

（我说怎么没看到官网让我执行yarn add @umijs/preset-ui -D命令，安装umi ui呢）

解决方案

首先，我们要保证nodejs是16版本（版本太高似乎会有兼容问题，调了一下午，脑子已经迷糊了，原谅我这一点上记不太清了）

如果你的node版本不是16，那么我建议你如下操作：

方案一：头铁硬上，不行再降级node重来

方案二：安装一个nvm，这个是用来切换node版本的，非常方便，具体安装与使用请自行搜索

搞定node后，我们要搞一个旧版的ant design pro，命令如下：

npm i @ant-design/pro-cli@3.1.0 -g

可以查看下版本，人稳一点，头发活得久一点：

pro -v

然后就创建你的项目吧：

pro create myapp

注意：myapp是项目名，你可以改成你喜欢的名字。

创建项目的时候记得选择umi@3。

然后先切换进项目根目录，也就是cd myapp（你的项目名）。

项目创建好后，在 WebStorm 中打开，管理员模式下执行如下命令：

yarn add @umijs/preset-ui -D

注意：没有yarn的同学，或者yarn执行命令时报错的同学，可以自行解决一下（很好解决的），也可以探索一下其他的安装umijs/preset-ui的命令。

然后，记得执行以下如下命令：

如果你使用的是 npm，可以运行以下命令：npm install。
如果你使用的是 yarn，可以运行以下命令：yarn install。

这一步是安装项目里需要的依赖，缺少依赖运行项目是要报错的。

最后，在你心爱的开发工具中，打开项目的package.json，找到

"start": "cross-env UMI_ENV=dev umi dev"

运行就可以了，其实还挺简单的，就是搜索资料的时候，感觉解决方案不太好找，也有可能和我第一天接触这些技术有关，不太熟悉大佬们都在哪里扎堆，这个方案创建的项目启动后是有umi ui悬浮图标的，不过具体后续能不能正常工作我还没有测试，希望屏幕前可爱的你，护肝保肾，头发永存！