项目Ant Design4-5升级实践记录

已于 2023-09-15 09:48:19 修改
阅读量429 收藏
点赞数
文章标签： react es6 javascript
于 2023-09-15 09:47:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60971410/article/details/132895239
版权

项目依赖升级思路

ps:由于各项目依赖环境的不同，升级有关依赖包的过程中可能会出现不同报错

1.首先是安装Antd5依赖包

npm i antd@5.x –save –legacy-peer-deps

2.运行项目

npm start

此时出现如下2个报错，如图

报错信息：

Module not found: Error: Can't resolve 'antd/dist/antd.css' in D:\WebFiles\center_platform_project\src\assets\css'

首先怀疑的原因应该是Antd 5 的样式从样式表less替换为了CSS-in-JS 的模式，这一点AntDesign官网也有解释。

解决方法 ：在对应文件中修改引入。

成功解决

rccccct
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
ant-design V4升级V5记录（成功篇）
ime33的博客
02-09 3753
6、Uncaught Invariant Violation: Maximum update depth exceeded. 原因是，新版react中在render有立即执行的函数，函数执行进而触发render，陷入循环，修改如图所示，表示需手动触发；发生这个问题有两处地方，根因一致，通过控制台提示，知道上述报错是在哪里，哪个组件引起，发现是Rangpicker，时间选择器，第二处地方，在rangerpicker设置defaultValue时，通过state传入设置默认值，同理也会触发循环。
ant-design-vue离线文档
09-23
vue ant design的离线文档， 解压后打开目录 npm install 运行 npm start 启动 默认项目地址为 localhost:3000
ant-design-draggable-modal:Ant Design的Modal，可拖动
05-02
蚂蚁设计可拖动模态 Ant Design的模态，可拖动。 :globe_showing_Americas: :sparkles: 特征 用标题栏拖动。 调整大小与句柄。 保持界限。 在拖动过程中。 调整大小期间。 在调整窗口大小期间。 具有托管zIndex多个模态。 从中心打开。 用作受控组件的更好的API。 从象限打开。 更好的转义密钥管理。 使用选项键调整大小。 :package: 安装 yarn add ant-design-draggable-modal 注意：您必须使用react@16.8.0和react[email protected]或更高版本。 :hammer: 用法 import React , { useState , useCallback } from 'react' import { Button } from 'antd' import { DraggableModal , DraggableModalProvider } from
ant-design-dark-theme:Ant Ant Design的深色主题变量
05-07
:new_moon_face: 蚂蚁设计黑暗主题 :new_moon_face: Ant Design的深色主题。 仍处于实验阶段，欢迎尝试并帮助我们进行改进。 访问进行预览。 安装 $ npm install @ant-design/dark-theme 用法 import darkTheme from '@ant-design/dark-theme' ; // webpack.config.js: less-loader { loader : 'less-loader' , options : { modifyVars : darkTheme , } , } , 在Ant Design Pro中使用： :
umi3项目antd4升级为antd5小计
weixin_64831582的博客
08-30 962
5、antd4使用mement，antd5使用dayjs，安装dayjs和antd-dayjs-webpack-plugin插件进行对原代码的兼容，此插件在编译时将moment的调用转为dayjs的调用(并不是所有的调用都能替换，有些方法会计算错误或报错，如moment(time, formart)这种方式会计算错误，需改写moment方法的调用或直接使用dayjs的方法)。3、为适配antd5，更新react、react-dom及对应的ts版本至18.x。在defineConfig中设置。
ant-design版本升级从V4到V5
qq_40896095的博客
10-24 541
这里会对import的导入进行报错，告诉你这两个文件找不到，具体修改本人没有研究，因为这个是在入口引入，所以不动它，而是去修改的moment。看到这里其实官网也给了解决方案保留moment，那就是安装。的问题，如果按照这个报错去梳理代码，你会发现，自己的生命周期写的并没有问题。按照官网给出的信息，我只说一下我这里遇到的问题就是dayjs引入的延申。正常情况按照官网给的方式，就可以正常进行版本升级[：](写这篇文章的目的就是记录自己踩过的坑，没有其他的。这里可以看出所需结构完全不同了，也可以看到。
ant-design V3升级V4记录（成功篇）
ime33的博客
01-16 2438
原因：babel版本兼容问题以及.babelrc文件配置，可在下方沿用我的babel相关版本。一是antd是一个开源性生态框架，人家社区一直在更新迭代，如果产品不及时更新，一直在使用不维护的，甚至有问题的框架，后果可想而知。原因：检查style-loader\less-loader\css-loader版本，挨个尝试。这篇博客没有一步步记录升级过程中的错误以及解决办法，所以只罗列的大致的错误项，希望对在升级之路上的你有所帮助。另外在我升级V4时，其实框架已经到了V5了，无奈升级到V5前，必须先升级V4。
antd3升级到antd4（已解决所有报错）
owo_ovo的博客
08-17 1547
react项目将antd3升级到antd4，并解决常见报错
Antd 小版本升级的爬坑之路
kabudada的博客
11-04 1413
背景：antd pro v5 ，npm包管理。之前建项目的时候，antd的版本是4.19.0，但我看最新的4.24.0可以在里用items写内容，于是头脑发热，就更新到4.24.0了。发现form样式有点变化，但影响不大。写着写着，又想还是换回4.19.0。噩梦就从这开始。明明之前4.19.0就用的好好地，为嘛现在从4.24.0换回4.19.0就不行了？解决历程：删.umi /删node_modules/清浏览器缓存/重启电脑/重新拉代码，都不行。现象就是：崩溃。
ant-design-vue-pro：像Pro一样使用Ant Design Vue！
02-05
English | 蚂蚁设计Vue Pro 适用于企业应用程序的即用型UI解决方案，作为Vue样板。 基于 预览： ： 主页： ： 文档： : 变更日志： : 常见问题解答： ： 总览 环境和依赖 节点 纱 网络包 埃斯林特 @ vue / cli〜3 -Vue的蚂蚁设计 图片编辑 -AntV G2 Viser -Vue的Antv / G2 注意：建议使用软件包管理，此项目的演示站点（yarn.lock）加载的版本完全相同。 但您也可以使用npm 项目设置 克隆回购 git clone https://github.com/vueComponent/ant-
nuxt-ant-design-vue
05-08
@ nuxtjs-extra / ant-design-vue 适用于Ant Design Vue的Nuxt模块设置向项目添加依赖项yarn add @nuxtjs-extra/ant-design-vue @nuxt/components # or npm install @nuxtjs-extra/ant-design-vue 如果您使用...
ant design pro升级v4指南(附umi3与antd4升级)
广兰路地铁的博客
04-11 8911
前言 自己在去年用ant design pro 创建了个后台服务的项目，当时创建的时候umi控制台提示是否使用antd 4,当时抱着尝鲜的想法选择了yes,结果项目跑起来之后，功能没有问题，但是打开后台后发现各种提醒你升级或者迁移的warning,类似这样： 看着着实蛋疼，ant design pro 本质上是蚂蚁全家桶，结合了antd和umi的一整套后台项目解决方案，如果要解决这些warnin...
记一次antd升级
Sasaluo的博客
11-01 1141
旧项目维护过程中，有一个时间插件分钟间隔设置为30的需求，查看了antd的TimePicker插件API，设置minuteStep属性值就行。但是加上去后没生效，因为项目antd版本是"^2.13.13，怀疑antd版本比较低导致，在antd4.x上试可以生效。于是就在antd升级的路上折腾了一番。 首先将antd升级到3.26（3.x最高版本），发现一堆报错，然后升级react到16.0以上，再升级react-dom,根据报错不停修改，还是顺利跑起来。 反思后，决定试试antd3.x低版本，然后找到a
umi + antd pro + antd 5 升级组件后报错
gaoxiaofei520sss的博客
05-16 477
一些组件的底层逻辑会发生变化，例如对于数组嵌套的数据类型判断，当children为空时，报错。语法类型需要去自己一一排查，对于后端返回的数据，自己做一些过滤。排除为null的字段。升级之后一些组件的属性和API会发生变化，导致报错。解决办法：报错的组件去看新的方法，更换属性和API。注：排查思维很重要，注重逻辑的去排查，一层一层排查，不要跳跃排查。目前遇到两种类型问题，之后遇到再继续罗列。
详细剖析｜袋鼠云数栈前端框架Antd 3.x 升级 4.x 的踩坑之路
a958014226的博客
03-03 670
袋鼠云数栈从2016年发布第⼀个版本开始，就始终坚持着以技术为核⼼、安全为底线、提效为⽬标、中台为战略的思想，坚定不移地⾛国产化信创路线，不断推进产品功能迭代、技术创新、服务细化和性能升级。 在数栈过去的产品迭代中受限于当前组件的版本，积累了很多待解决的问题，随着新的功能需求不断增加，很多原先的组件以及交互设计需要进行优化。 2月，伴随着数栈 UI5.0 的焕新升级，数栈前端团队一起将组件框架 antd 从 v3.x 升级到了 v4.x，更新组件的 UI，提升产品的交互体验，使数栈产品能够更加灵活地适应未来
react+ant design,如果升级antd版本，导致样式不生效解决方案
qq_27010291的博客
03-05 1933
升级antd，我用的命令是： npm i antd@4.17.0 --save 其中@号后面是升级的版本号， 本地用的是yarn，在项目的根如今下重新加载命令 yarn install 然后查看pakeage.json文件 启动项目之后，如果发现新增加的一些不生效，可能是对自定义的主题没有更新 需要执行命令：yarn theme（非常重要） 然后再启动项目，就生效了， ...
antd v4从monent到antd v5 Dayjs的使用
zhouzhou20002000的博客
02-14 462
dayjs好处 🕒 和Moment.js有着相同的API和模式 💪 不可变、持久性 🔥 提供链式调用 🌐 国际化标准 📦 超小的压缩体积，仅仅有2kb左右 👫 极大多数的浏览器兼容
现代JavaScript：对ES6+的深入讲解，新型的JS特性以及怎样在项目中使用它们
最新发布
哎 你看的博客
05-02 754
let 和 const 关键字、模板字符串（Template Strings）、箭头函数（Arrow Functions）、解构赋值（Destructuring）、Promise 和 async/await、类（Classes）、模块（Modules）、展开语法（Spread Operator）、**默认参数(Default Parameters)**、对象/数组的静态方法：
ant-design-react开源项目
08-25
Ant Design 是一个基于 React 的开源 UI 组件库，是由阿里巴巴前端团队开发并维护的。它提供了丰富的 UI 组件，包括按钮、表单、弹窗、导航等，可以帮助开发者快速构建现代化、美观且易用的用户界面。Ant Design 非常受欢迎，并且有很强的生态系统支持。你可以在 GitHub 上找到该项目的源代码和详细文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值