ant-design V3升级V4记录（失败篇）

最新推荐文章于 2023-11-30 11:22:18 发布
最新推荐文章于 2023-11-30 11:22:18 发布
阅读量362 收藏
点赞数
分类专栏： 前端组件 文章标签： 升级 antd 4.0
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ime33/article/details/121770656
版权

1、升级"antd": "^3.26.19",

2、安装迁移工具 cnpm i -g @ant-design/codemod-v4

 3、提交变更

4、执行迁移命令  antd4-codemod app

5、根据建议升级、安装依赖

6、修改老版本webpack配置

7、 等等，陆续报了一堆错，估摸都是版本兼容问题，时间成本太大，扑街~~~放弃

8、成功篇请继续翻看下一篇，谢谢

ime33
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ant构建升级
11-07
Ant是什么 Ant的配置 build.xml文件举例 应用的升级流程
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
关于antd升级为4.0 不再内置icon组件， 循环渲染动态icon的解决方案
m0_66288747的博客
05-16 539
关于antd升级为4.0 不再内置icon组件， 循环渲染动态icon的解决方案
ant-design V3升级V4记录（成功篇）
ime33的博客
01-16 2652
原因：babel版本兼容问题以及.babelrc文件配置，可在下方沿用我的babel相关版本。一是antd是一个开源性生态框架，人家社区一直在更新迭代，如果产品不及时更新，一直在使用不维护的，甚至有问题的框架，后果可想而知。原因：检查style-loader\less-loader\css-loader版本，挨个尝试。这篇博客没有一步步记录升级过程中的错误以及解决办法，所以只罗列的大致的错误项，希望对在升级之路上的你有所帮助。另外在我升级V4时，其实框架已经到了V5了，无奈升级到V5前，必须先升级V4。
老项目Antd 3 升级 4 随笔
JavaYao1的博客
12-04 1375
升级项目 React 16.12.0 以上。 git提交 npx -p @ant-design/codemod-v4 antd4-codemod src 改变老项目的引用 Icon npm install --save @ant-design/icons ( 下载巨慢,如果icon引用的不多话,通过第4步,跳过此步) 注意：从@ant-design/compatible引入的老版本 Form 组件，样式类名会从.ant-form变成.ant-...
antd3升级为antd4后dataIndex问题记录
chirpmonster的博客
03-31 586
升级完成后，有个table中的数据消失了 经排查（项目编译慢死了），是dataIndex的要求格式变更了 antd3中支持传入的是字符串 antd4不再支持dataIndex:'a.b.c’形式，应该使用[‘a’,‘b’,‘c’]格式 官方文档中也提到了这点改动 代码： const columns = [ { title: '姓名', // dataIndex: 'name.test', //v3写法 data
vuex4. 版本安装报错
m0_67063319的博客
02-28 422
安装报错: Uncaught TypeError: Object(...) is not a function vue2.0版本搭建项目,安装vuex4.版本报错,反复安装都会报错,想着可能是版本错误,最后指定了版本下载 yarn add vuex@3.6.2 就没有报错啦; 下载过程中,也会与警告,但是没注意,可以在package.json里查看版本是否是 4.版本的 ...
ant-design-dark-theme:Ant Ant Design的深色主题变量
05-07
$ npm install @ant-design/dark-theme 用法 import darkTheme from '@ant-design/dark-theme' ; // webpack.config.js: less-loader { loader : 'less-loader' , options : { modifyVars : darkTheme , } , } ,...
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-draggable-modal:Ant Design的Modal，可拖动
05-02
yarn add ant-design-draggable-modal 注意：您必须使用react@16.8.0和react-dom@16.8.0或更高版本。 :hammer: 用法 import React , { useState , useCallback } from 'react' import { Button } from 'antd' ...
ant-design-colors:主题扩展
03-31
安装使用npm： npm install @yfill/ant-design-colors --save 或使用纱线： yarn add @yfill/ant-design-colors用法导入资源并使用使用方法进行安装，设置颜色（红色/火山/橙色/金色/黄色/石灰/绿色/青色/蓝色/ ...
antd v3 升v4
weixin_43915401的博客
12-08 340
react 16.8升级至17.0.1 npm install react@17.0.1 react-dom@17.0.1升级react 执行发生错误时：npm install @babel/runtime antd 3.X 升级至最新 yarn add antd 升级antd npx -p @ant-design/codemod-v4 antd4-codemod src 安装兼容包 执行发生错误时：npm install --save @ant-design/icons 执行发生错误时：npm i..
antd 3升级4遇到的问题与解决方式
solitude1128的博客
10-07 443
首先把package.json中改为4的版本号，然后删除node_modules后，重新 npm install 下载。1. 引入的LocaleProvider模块在4被废弃，需要修改为ConfigProvider。2. icon变为按需引入了，，只能手动改掉所有引入icon的地方。下载后运行，此时没有bug了，但是可能会报一堆警告，依然不能使用。具体看是什么警告，挨个排查，我遇到的是这些，如下。前情提要：3.26.13 => 4.24.14。此时运行会报一大堆错，不慌张，下载一个模块先。
升级antd4后运行构建命令报错less问题_解决使用宝塔安装的swoole扩展，运行项目出现的3个问题...
weixin_36310396的博客
01-27 200
前言： 常常做东西的时候最不愿搭环境了，所以如果只是用于学习或者一些小项目，我都会选择在服务器上使用宝塔面板。自然swoole也是直接用BT的方式安装，但是呢，最近我写的一个双人对战的五子棋小游戏，在我本机虚拟机上能正常运行。放到之前已经装好swoole的服务器上时(宝塔面板安装的)，却接连报错。问题一 : 那个五子棋联机小游戏的后台使用的是easyswoole，所以我测试性的启动一下。php e...
antd3升级到antd4（已解决所有报错）
owo_ovo的博客
08-17 2147
react项目将antd3升级到antd4，并解决常见报错
antd从v3升级到v4
qq_49464155的博客
02-18 4880
因为项目需求，需要对antd进行一个升级，下面我简述下我升级的步骤 1. 安装最新版本antd，升级项目 React 16.12.0 以上 2. 若项目中使用了Form表单/Icon组件 安装@ant-design/compatible，然后在之前使用Icon/Form组件的地方使用如下引用方式就可以了，这个只是个兼容性办法，项目可以正常运行，控制台会有警告，等以后有时间了再切换成antd的组件 import { Form, Icon } from '@ant-design/compatible'
antd4-codemod把antd3.X升级到antd4.9最新版本
DavidZhao的博客
12-16 2905
项目做了好多年，框架一直用的antd3.X的，一直在3的版本上升级，React也一直用的16.6的版本，所以也不支持react Hook。 最近领导让把所有项目的antd升级都到4.X的版本，方便以后迭代，所以升级研究了一下，有antd4-codemod工具还是很简单的，一个小时搞定。 第一步： 通过 npx 直接运行 npx -p @ant-design/codemod-v4 antd4-codemod src 或者 全局安装 # 使用 npm npm i -g @ant-design/code.
antd3 升级 antd4+ 引起的bug
最新发布
YangljHjr的博客
11-30 480
注意：在Form.create()的初始底层页面，去掉Form.create()，改用Form.useForm();（2）不用getFieldDecorator了，全部用4的, 改到Form.Item的属性中。（1）getFieldDecorator包含的rules不起作用了。
Ant Design 3.x 升级到4.0的过程
m0_49016709的博客
05-30 2306
1、执行npm i -g @ant-design/codemod-v4 全局安装 2、这是代码会有改动，git status 查看代码状态 3、git commit 本地合并 4、antd4-codemod src （会把你现在所有组件不支持antd4.0的自动改为支持antd4.0 如果中途报错了，可以根据错误修改，然后再运行antd4-codemod src，反复操作一直提示无错误） 第一次执行完成如下图 有五处需要手动修改的，按照去修改 5、安装compatible npm i @ant-des
@ant-design/pro-components 和@ant-design/pro-protable的区别
06-26
@ant-design/pro-components 和@ant-design/pro-table都是Ant Design Pro中的组件库，但它们的定位和功能略有不同。 @ant-design/pro-components是Ant Design Pro中的基础组件库，包含了一些常用的UI组件，如按钮、表单、表格、提示框、标签等等。这些组件都是经过Ant Design团队精心设计的，具有良好的可定制性和易用性。 @ant-design/pro-table则是Ant Design Pro中的表格组件库，它提供了丰富的表格功能，如分页、排序、筛选、搜索、导出等等，而且还支持多种数据源，包括API、Mock数据和本地数据，非常适合开发中后台管理系统。 总之，如果你需要开发一个中后台管理系统，可以同时使用@ant-design/pro-components和@ant-design/pro-table来快速构建UI和表格功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值