背景
作为一个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。
这一步是安装项目里需要的依赖,缺少依赖运行项目是要报错的。
最后,在你心爱的开发工具中,打开项目的,找到
"start": "cross-env UMI_ENV=dev umi dev"
运行就可以了,其实还挺简单的,就是搜索资料的时候,感觉解决方案不太好找,也有可能和我第一天接触这些技术有关,不太熟悉大佬们都在哪里扎堆,这个方案创建的项目启动后是有umi ui悬浮图标的,不过具体后续能不能正常工作我还没有测试,希望屏幕前可爱的你,护肝保肾,头发永存!