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
image

上个图,表示我真的没骗大家,我装好了,然后就启动吧!
image

然后当当当,图标出来了!
你以为这就结束了吗!

当当当,里面的组件也有了!!!
至此,前端初始化结束,太艰难了!(谁懂啊!)

参考以外的错误:

  1. 使用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即可。

posted @ 2024-05-29 22:31  LiangXin_Alex  阅读(450)  评论(0编辑  收藏  举报