Ant Design Pro使用过程中遇到的一些问题,包括怎么搞定Umi3
Ant Design Pro安装过程
# 使用 npm
npm i @ant-design/pro-cli -g(这个是安装pro-cli但是这个会直接安装新版本会导致没法选择umi,npm install -g @ant-design/pro-cli@3.1.0可以用)
pro create myapp(myapp是工厂名称,如果报错,用下面的命令)
npx pro create myapp
1.【Error】初始化ant design pro项目时遇到“pro 不是内部或外部命令”
解决办法:
将
pro create myapp
改为
npx pro create myapp
即可解决
2.今日(2024.5.29)拉取Ant Design Pro没有UMI选择问题参考github一个解决方案
你可以使用npm uninstall -g @ant-design/pro-cli
卸载当前安装的 pro-cli,然后指定版本安装,经过测试 3.1.0 这个版本就可以选择umi版本,重新使用npm install -g @ant-design/pro-cli@3.1.0
安装 pro-cli 即可。
华丽的分割线,直接看下面的吧,下面的操作我自己成功了
参考笔记:
https://www.yuque.com/moyan-awh3b/nccb2c/ccykge
https://www.yuque.com/moyan-awh3b/nccb2c/lcngyo?
https://www.yuque.com/moyan-awh3b/nccb2c/rwfw3y?
https://www.yuque.com/moyan-awh3b/nccb2c/wk5c41?
1.前端项目搭建
搭建不了一点。。。
经过参考笔记和自己的不懈努力,终于初始化成功,有了小umi的图标,太不容易了,那我就简单来介绍一下方法吧,呜呜呜:
PS:如何全程可以使用魔法,请尽量使用魔法,不要问我为啥,我也不知道。。。
首先node.js版本不要装的太高,本人使用的是16.20.2版本亲测可以,yarn的安装可以参考第一个参考链接,真的有效果可以装好yarn。
装完yarn就来到了搭建项目,由于鱼皮的用户中心项目是2022年,现在2024的ant design pro的建立方法已经不同了,而且想要保持和鱼皮一样,得装那个时候版本的ant design pro安装命令和项目的创建命令如下(参考githu上某个大哥的十分感谢):
// 安装3.1的ant-design/pro,否则没有选umi3的选项
npm install -g @ant-design/pro-cli@3.1.0
// 创建ant design pro项目,项目名为myapp
pro create myapp
好了,到此项目已经建立好然后就是用yarn install进行依赖安装吧,但是哈哈哈,你以为就这样结束了吗?(想多了,此时你会遇到如下错误)
error Found incompatible module.
如果遇到,莫慌,我找到了办法直接输入如下命令:
yarn config set ignore-engines true
然后yarn install就好了。。。(你就说离谱不离谱就完事了)原博客如下:
https://blog.csdn.net/qq_60990876/article/details/138318831
依赖安装完,启动一下项目,能正常开就可以继续安装umi的小按钮了,和参考博客一样输入如下命令:
// 安装umi图标
yarn add @umijs/preset-ui -D
上个图,表示我真的没骗大家,我装好了,然后就启动吧!
然后当当当,图标出来了!
你以为这就结束了吗!
当当当,里面的组件也有了!!!
至此,前端初始化结束,太艰难了!(谁懂啊!)
参考以外的错误:
- 使用yarn时--解决error Error: certificate has expired问题
原文链接:https://blog.csdn.net/zoroly/article/details/135897594
解决方案:将yarn配置中的strict-ssl
设置为flase
, 在info yarn config
信息中,'strict-ssl'
为true
,表示需要验证 HTTPS 证书。我们可以将'strict-ssl'
设置为false
,跳过 HTTPS 证书验证。
在终端输入:
yarn config set "strict-ssl" false -g
npm包管理器安装时也遇到过类似的问题,问题原因也是和上面一样的,都是【HTTPS 证书验证失败】。解决办法也是一样的,将npm包管理器的strict-ssl
的值改为false
即可
npm包管理器安装时也遇到过类似的问题,问题原因也是和上面一样的,都是【HTTPS 证书验证失败】。解决办法也是一样的,将npm包管理器的 strict-ssl
的值改为false
即可。