前端UI组件设计系统【免费下载链接】ant-design-vue An enterprise-class UI components based on Ant Design and Vue. 项目地址https://gitcode.com/gh_mirrors/an/ant-design-vue点击查看免费下载本文基于 ant-design-vue 官方迁移文档仓库内对应文件为 site/src/vueDocs/migration-v2.zh-CN.md撰写系统梳理从1.x升级到2.x的全部准备工作、设计规范调整、API 破坏性变更、图标按需加载方案与 Form 表单重构细节并结合当前仓库源码验证各变更点的实际实现帮助你在升级过程中快速定位问题、一次性完成改造。升级准备动手前的两项前置工作在正式升级之前官方迁移文档要求完成两个前置步骤避免升级过程中被大量历史遗留问题淹没先升级到 1.x 的最新版本并严格按照控制台输出的 warning 信息逐一移除或修改相关 API。1.x 中大量的废弃 API 都会在控制台给出明确的替换提示先消化这些警告可以显著缩小 2.0 升级时的排查范围。将项目 Vue 版本升级到 3.0 以上。2.x 是基于 Vue 3 全面重构的版本package.json中的peerDependencies也明确声明vue: 3.2.0因此项目内的 Vue 版本必须满足该约束才能正常安装与运行。提示升级 Vue 本身也涉及vue-router、vuex/pinia等生态库的配套升级Vue 3 对应vue-router4、vuex4建议在组件库升级前先完成基础框架层的迁移验证。2.0 有哪些不兼容的变化设计规范调整2.0 同步了 Ant Design 新版本的设计语言视觉细节发生了以下变化升级后 UI 观感会随之调整行高从1.521px调整为1.571522px基础圆角从4px改为2px分割线颜色明度降低由#E8E8E8改为#F0F0F0Table 默认背景颜色从透明修改为白色。如果业务侧对上述样式有强依赖例如自定义了表格透明背景、基于旧圆角做视觉回归截图需要在升级后重点回归检查。兼容性调整浏览器兼容不再兼容 IE 11 及以下版本仅面向现代浏览器。当前仓库package.json中的browserslist字段为 0.5%、last 2 versions、Firefox ESR、not dead可以据此评估目标用户的浏览器环境。Vue 版本最低支持版本为 Vue 3.0前文已述peerDependencies为vue 3.2.0。调整的 API2.0 对 1.x 的 API 做了大幅收敛与统一迁移时需要逐一对照被移除的组件与属性移除了 LocaleProvider请使用ConfigProvider替代。在仓库中components/locale-provider/index.ts目前仅是一个转发层export * from ../locale真正的国际化配置入口统一收敛到 components/config-provider 与 components/locale移除了 Tag 的afterClose属性关闭后的回调逻辑需要迁移到其他事件处理方式上。组件合并FormModel 与 Form 统一为 Form1.x 中同时存在Form基于v-decorator绑定与FormModel两套表单体系2.0 将其合并保留 FormModel 的使用方式并改名Form。合并的深层原因与 Vue 3 的渲染优化直接相关Vue 2 中 Form 依赖上下文强制更新组件而 Vue 3 引入了patchFlag等编译期优化强制刷新会破坏这些优化带来的性能收益因此统一为基于model数据驱动的受控表单。详细迁移点见下文「Form 表单重构」一节。属性命名统一为全小写以下属性在 2.0 中更改为全小写写法tabIndex、maxLength、readOnly、autoComplete、autoFocus。!-- v1 -- input tabIndex1 maxLength10 readOnly autoCompleteoff autoFocus / !-- v2 -- input tabindex1 maxlength10 readonly autocompleteoff autofocus /渲染函数型插槽改为单参数为了在 Vue 3 template 语法中更友好地使用插槽所有涉及xxxRender、renderXxx的 API 均改为单参数形式涉及的字段包括itemRender、renderItem、customRender、dropdownRender、dateCellRender、dateFullCellRender、monthCellRender、monthFullCellRender、renderTabBar。升级时需把原先的多参数回调改为单一参数对象解构例如// v1 customRender: (value, record, index) ... // v2 customRender: ({ value, record, index }) ...scopedSlots 统一改为 slots所有配置scopedSlots的地方统一改成slots!-- v1 -- a-table :scopedSlots{ customRender: customRender } / !-- v2 -- a-table :slots{ customRender: customRender } /组件 props 配置扁平化{ on, props, attrs, ... }这种嵌套配置结构在 2.0 中被扁平化处理例如// v1 { props: { type: xxx }, on: { click: this.handleClick } } // v2 { type: xxx, onClick: this.handleClick }涉及相关字段okButtonProps、cancelButtonProps。这是 Vue 3 组件事件机制变更的直接体现——事件以onXxx形式与普通 props 平级传递。同步修饰符统一为 v-model 参数xxx.sync改成v-model:xxx!-- v1 -- a-modal :visible.syncvisible / !-- v2 -- a-modal v-model:visiblevisible /v-model改成具名v-model:xxx具体涉及组件如下变更后写法涉及组件v-model:checkedCheckableTag、Checkbox、Switchv-model:valueRadio、Mentions、CheckboxGroup、Rate、DatePicker、Selectv-model:visibleTag、Popconfirm、Popover、Tooltip、Modal、Dropdownv-model:activeKeyCollapse、Tabsv-model:currentStepsv-model:selectedKeysMenu这一变更在源码中有直接体现例如 components/checkbox/Checkbox.tsx 中handleChange会调用emit(update:checked, targetChecked)即通过update:checked事件支撑v-model:checked双向绑定。图标升级从字符串 API 到按需引入在ant-design-vue1.2.0中项目引入了 svg 图标体系但当时使用字符串命名的图标 API如typesmile无法做到按需加载只能全量引入 svg 图标文件这大大增加了打包产物的尺寸。2.0 调整为组件化引入方式以支持 tree shaking官方数据表明默认包体积减少约150 KBGzipped。旧版将被废弃的使用方式a-icon typesmile / a-button iconsmile /2.0 中采用按需引入的方式template smile-outlined / a-button template #iconsmile-outlined //template /a-button /template script import SmileOutlined from ant-design/icons-vue/SmileOutlined; export default { components: { SmileOutlined, }, }; /script注意ant-design/icons-vue是 ant-design-vue 2.x 配套的图标包当前仓库package.json中dependencies声明为ant-design/icons-vue: ^7.0.0图标组件遵循XxxOutlined、XxxFilled、XxxTwoTone的命名规范。与此同时仓库中 components/icon/index.tsx 的Icon组件已经退化为一个输出 warningEmpty Icon并返回null的空壳进一步印证了字符串图标 API 在 2.x 中的废弃地位。Form 表单重构从 v-decorator 到受控表单为什么合并 Form 与 FormModel1.x 中Form组件使用v-decorator进行数据绑定在 Vue 2 中依赖上下文强制更新组件但在 Vue 3 中patchFlag等编译优化手段会让组件在静态标记下跳过不必要的 diff而强制刷新恰恰会破坏这种优化。因此 2.0 将两套表单合并保留 FormModel 的用法并更名为Form。新增的能力Form 新增scrollToFirstError、name、validateTrigger属性finish、finishFailed事件scrollToField方法。这些都能在源码 components/form/Form.tsx 的formProps()与FormExpose类型定义中逐一找到例如scrollToFirstError: anyTypeboolean | Options()既支持布尔开关也支持传入scroll-into-view-if-needed的配置对象、onFinish、onFinishFailed等。Form.Item 新增validateFirst、validateTrigger同时废弃prop属性改用name替换。在 components/form/FormItem.tsx 中prop与name类型一致且 setup 阶段会执行warning(props.prop undefined, \prop is deprecated. Please use name instead.)给出提示fieldName的取值逻辑为props.name || props.prop保证迁移期间两者兼容。嵌套字段路径改用数组过去版本通过.代表嵌套路径如user.name代表{ user: { name: } }。但在一些后台系统中变量名本身可能包含.这迫使开发者编写额外代码进行转化。新版中嵌套路径通过数组表示例如[user, name]避免错误处理行为。源码中 components/form/utils/valueUtil.ts 的getNamePath会将任意形式的路径统一toArray归一化为数组形式的InternalNamePathsetValue/setValues等工具均基于数组路径工作。validateFields 返回值从 callback 改为 PromisevalidateFields不再支持 callback 形式改为返回 Promise 对象因此可以通过async/await或then/catch处理错误且不再需要判断 errors 是否为空// v1 validateFields((err, value) { if (!err) { // Do something with value } });// v2 validateFields().then(values { // Do something with value });对应源码 components/form/Form.tsx 中validateFields会首先对传入 callback 的情况输出警告validateFields/validateField/validate not support callback, please use promise instead随后按字段收集 Promise 列表、聚合校验结果。此外FormExpose中声明的validateFields返回类型即为Promise{ [key: string]: any }与文档描述一致。scrollToFirstError 与 scrollToField 的实现scrollToFirstError的落地逻辑位于 components/form/Form.tsx当finishFailed触发且errorFields非空时取第一个错误字段的name调用scrollToFieldscrollToField则通过字段 id 找到 DOM 节点借助scroll-into-view-if-needed以scrollMode: if-needed、block: nearest的默认策略将错误项滚动到可视区域。若scrollToFirstError传入的是对象则该对象会作为滚动选项透传实现更精细的滚动行为控制。遇到问题如何反馈2.0 做了非常多的细节改进和重构官方尽可能收集了已知的所有不兼容变化和相关影响但仍然可能存在未覆盖到的场景。如果你在升级过程中遇到问题可以前往官方 issue 反馈渠道提交问题描述建议附带最小复现示例与报错堆栈维护团队会尽快响应并据此完善迁移文档。升级检查清单为便于实操将上述要点汇总为一份快速对照清单先升级到 1.x 最新版清理控制台 warning项目 Vue 升级到 3.0建议 ≥ 3.2.0同步升级 vue-router/vuex 等生态确认目标浏览器环境不再支持 IE 11 及以下LocaleProvider→ConfigProvider移除 TagafterClose全小写化tabIndex/maxLength/readOnly/autoComplete/autoFocus渲染函数类插槽改为单参数itemRender、customRender、dropdownRender、dateCellRender等scopedSlots→slots{ on, props, attrs }扁平化xxx.sync→v-model:xxx按上表将各组件的v-model换成具名写法图标改为从ant-design/icons-vue按需引入组件Form 迁移prop→name、嵌套路径用数组、validateFields改用 Promise、善用scrollToFirstError/scrollToField升级后回归视觉规范差异行高、圆角、分割线颜色、Table 背景色。赞分享前端UI组件设计系统【免费下载链接】ant-design-vue An enterprise-class UI components based on Ant Design and Vue. 项目地址https://gitcode.com/gh_mirrors/an/ant-design-vue点击查看免费下载相关推荐Unitree ROS仿真包深度解析从仿真到真实机器人的无缝控制方案Unitree ROS仿真包深度解析从仿真到真实机器人的无缝控制方案 Unitree ROS仿真包为机器人开发者提供了完整的四足和人形机器人仿真与控制解决方案开发工具PyTorch Lightning 2.0 升级指南从 1.x 迁移的破坏性变更与实战对照PyTorch Lightning 2.0 升级指南从 1.x 迁移的破坏性变更与实战对照 本篇技术指南围绕 PyTorch Lightning 官方升级文档人工智能深度学习机器学习预训练分布式训练微调web3.eth 迁移指南从 web3.js 1.x 升级到 4.x 的破坏性变更全解析web3.eth 迁移指南从 web3.js 1.x 升级到 4.x 的破坏性变更全解析 本指南是 web3.js 1.x 升级到 4.x 系列文档的核心部分区块链Web3创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Ant Design Vue 2.0 升级迁移实战指南：从 1.x 到 2.x 的破坏性变更与 Form 重构全解析
前端UI组件设计系统【免费下载链接】ant-design-vue An enterprise-class UI components based on Ant Design and Vue. 项目地址https://gitcode.com/gh_mirrors/an/ant-design-vue点击查看免费下载本文基于 ant-design-vue 官方迁移文档仓库内对应文件为 site/src/vueDocs/migration-v2.zh-CN.md撰写系统梳理从1.x升级到2.x的全部准备工作、设计规范调整、API 破坏性变更、图标按需加载方案与 Form 表单重构细节并结合当前仓库源码验证各变更点的实际实现帮助你在升级过程中快速定位问题、一次性完成改造。升级准备动手前的两项前置工作在正式升级之前官方迁移文档要求完成两个前置步骤避免升级过程中被大量历史遗留问题淹没先升级到 1.x 的最新版本并严格按照控制台输出的 warning 信息逐一移除或修改相关 API。1.x 中大量的废弃 API 都会在控制台给出明确的替换提示先消化这些警告可以显著缩小 2.0 升级时的排查范围。将项目 Vue 版本升级到 3.0 以上。2.x 是基于 Vue 3 全面重构的版本package.json中的peerDependencies也明确声明vue: 3.2.0因此项目内的 Vue 版本必须满足该约束才能正常安装与运行。提示升级 Vue 本身也涉及vue-router、vuex/pinia等生态库的配套升级Vue 3 对应vue-router4、vuex4建议在组件库升级前先完成基础框架层的迁移验证。2.0 有哪些不兼容的变化设计规范调整2.0 同步了 Ant Design 新版本的设计语言视觉细节发生了以下变化升级后 UI 观感会随之调整行高从1.521px调整为1.571522px基础圆角从4px改为2px分割线颜色明度降低由#E8E8E8改为#F0F0F0Table 默认背景颜色从透明修改为白色。如果业务侧对上述样式有强依赖例如自定义了表格透明背景、基于旧圆角做视觉回归截图需要在升级后重点回归检查。兼容性调整浏览器兼容不再兼容 IE 11 及以下版本仅面向现代浏览器。当前仓库package.json中的browserslist字段为 0.5%、last 2 versions、Firefox ESR、not dead可以据此评估目标用户的浏览器环境。Vue 版本最低支持版本为 Vue 3.0前文已述peerDependencies为vue 3.2.0。调整的 API2.0 对 1.x 的 API 做了大幅收敛与统一迁移时需要逐一对照被移除的组件与属性移除了 LocaleProvider请使用ConfigProvider替代。在仓库中components/locale-provider/index.ts目前仅是一个转发层export * from ../locale真正的国际化配置入口统一收敛到 components/config-provider 与 components/locale移除了 Tag 的afterClose属性关闭后的回调逻辑需要迁移到其他事件处理方式上。组件合并FormModel 与 Form 统一为 Form1.x 中同时存在Form基于v-decorator绑定与FormModel两套表单体系2.0 将其合并保留 FormModel 的使用方式并改名Form。合并的深层原因与 Vue 3 的渲染优化直接相关Vue 2 中 Form 依赖上下文强制更新组件而 Vue 3 引入了patchFlag等编译期优化强制刷新会破坏这些优化带来的性能收益因此统一为基于model数据驱动的受控表单。详细迁移点见下文「Form 表单重构」一节。属性命名统一为全小写以下属性在 2.0 中更改为全小写写法tabIndex、maxLength、readOnly、autoComplete、autoFocus。!-- v1 -- input tabIndex1 maxLength10 readOnly autoCompleteoff autoFocus / !-- v2 -- input tabindex1 maxlength10 readonly autocompleteoff autofocus /渲染函数型插槽改为单参数为了在 Vue 3 template 语法中更友好地使用插槽所有涉及xxxRender、renderXxx的 API 均改为单参数形式涉及的字段包括itemRender、renderItem、customRender、dropdownRender、dateCellRender、dateFullCellRender、monthCellRender、monthFullCellRender、renderTabBar。升级时需把原先的多参数回调改为单一参数对象解构例如// v1 customRender: (value, record, index) ... // v2 customRender: ({ value, record, index }) ...scopedSlots 统一改为 slots所有配置scopedSlots的地方统一改成slots!-- v1 -- a-table :scopedSlots{ customRender: customRender } / !-- v2 -- a-table :slots{ customRender: customRender } /组件 props 配置扁平化{ on, props, attrs, ... }这种嵌套配置结构在 2.0 中被扁平化处理例如// v1 { props: { type: xxx }, on: { click: this.handleClick } } // v2 { type: xxx, onClick: this.handleClick }涉及相关字段okButtonProps、cancelButtonProps。这是 Vue 3 组件事件机制变更的直接体现——事件以onXxx形式与普通 props 平级传递。同步修饰符统一为 v-model 参数xxx.sync改成v-model:xxx!-- v1 -- a-modal :visible.syncvisible / !-- v2 -- a-modal v-model:visiblevisible /v-model改成具名v-model:xxx具体涉及组件如下变更后写法涉及组件v-model:checkedCheckableTag、Checkbox、Switchv-model:valueRadio、Mentions、CheckboxGroup、Rate、DatePicker、Selectv-model:visibleTag、Popconfirm、Popover、Tooltip、Modal、Dropdownv-model:activeKeyCollapse、Tabsv-model:currentStepsv-model:selectedKeysMenu这一变更在源码中有直接体现例如 components/checkbox/Checkbox.tsx 中handleChange会调用emit(update:checked, targetChecked)即通过update:checked事件支撑v-model:checked双向绑定。图标升级从字符串 API 到按需引入在ant-design-vue1.2.0中项目引入了 svg 图标体系但当时使用字符串命名的图标 API如typesmile无法做到按需加载只能全量引入 svg 图标文件这大大增加了打包产物的尺寸。2.0 调整为组件化引入方式以支持 tree shaking官方数据表明默认包体积减少约150 KBGzipped。旧版将被废弃的使用方式a-icon typesmile / a-button iconsmile /2.0 中采用按需引入的方式template smile-outlined / a-button template #iconsmile-outlined //template /a-button /template script import SmileOutlined from ant-design/icons-vue/SmileOutlined; export default { components: { SmileOutlined, }, }; /script注意ant-design/icons-vue是 ant-design-vue 2.x 配套的图标包当前仓库package.json中dependencies声明为ant-design/icons-vue: ^7.0.0图标组件遵循XxxOutlined、XxxFilled、XxxTwoTone的命名规范。与此同时仓库中 components/icon/index.tsx 的Icon组件已经退化为一个输出 warningEmpty Icon并返回null的空壳进一步印证了字符串图标 API 在 2.x 中的废弃地位。Form 表单重构从 v-decorator 到受控表单为什么合并 Form 与 FormModel1.x 中Form组件使用v-decorator进行数据绑定在 Vue 2 中依赖上下文强制更新组件但在 Vue 3 中patchFlag等编译优化手段会让组件在静态标记下跳过不必要的 diff而强制刷新恰恰会破坏这种优化。因此 2.0 将两套表单合并保留 FormModel 的用法并更名为Form。新增的能力Form 新增scrollToFirstError、name、validateTrigger属性finish、finishFailed事件scrollToField方法。这些都能在源码 components/form/Form.tsx 的formProps()与FormExpose类型定义中逐一找到例如scrollToFirstError: anyTypeboolean | Options()既支持布尔开关也支持传入scroll-into-view-if-needed的配置对象、onFinish、onFinishFailed等。Form.Item 新增validateFirst、validateTrigger同时废弃prop属性改用name替换。在 components/form/FormItem.tsx 中prop与name类型一致且 setup 阶段会执行warning(props.prop undefined, \prop is deprecated. Please use name instead.)给出提示fieldName的取值逻辑为props.name || props.prop保证迁移期间两者兼容。嵌套字段路径改用数组过去版本通过.代表嵌套路径如user.name代表{ user: { name: } }。但在一些后台系统中变量名本身可能包含.这迫使开发者编写额外代码进行转化。新版中嵌套路径通过数组表示例如[user, name]避免错误处理行为。源码中 components/form/utils/valueUtil.ts 的getNamePath会将任意形式的路径统一toArray归一化为数组形式的InternalNamePathsetValue/setValues等工具均基于数组路径工作。validateFields 返回值从 callback 改为 PromisevalidateFields不再支持 callback 形式改为返回 Promise 对象因此可以通过async/await或then/catch处理错误且不再需要判断 errors 是否为空// v1 validateFields((err, value) { if (!err) { // Do something with value } });// v2 validateFields().then(values { // Do something with value });对应源码 components/form/Form.tsx 中validateFields会首先对传入 callback 的情况输出警告validateFields/validateField/validate not support callback, please use promise instead随后按字段收集 Promise 列表、聚合校验结果。此外FormExpose中声明的validateFields返回类型即为Promise{ [key: string]: any }与文档描述一致。scrollToFirstError 与 scrollToField 的实现scrollToFirstError的落地逻辑位于 components/form/Form.tsx当finishFailed触发且errorFields非空时取第一个错误字段的name调用scrollToFieldscrollToField则通过字段 id 找到 DOM 节点借助scroll-into-view-if-needed以scrollMode: if-needed、block: nearest的默认策略将错误项滚动到可视区域。若scrollToFirstError传入的是对象则该对象会作为滚动选项透传实现更精细的滚动行为控制。遇到问题如何反馈2.0 做了非常多的细节改进和重构官方尽可能收集了已知的所有不兼容变化和相关影响但仍然可能存在未覆盖到的场景。如果你在升级过程中遇到问题可以前往官方 issue 反馈渠道提交问题描述建议附带最小复现示例与报错堆栈维护团队会尽快响应并据此完善迁移文档。升级检查清单为便于实操将上述要点汇总为一份快速对照清单先升级到 1.x 最新版清理控制台 warning项目 Vue 升级到 3.0建议 ≥ 3.2.0同步升级 vue-router/vuex 等生态确认目标浏览器环境不再支持 IE 11 及以下LocaleProvider→ConfigProvider移除 TagafterClose全小写化tabIndex/maxLength/readOnly/autoComplete/autoFocus渲染函数类插槽改为单参数itemRender、customRender、dropdownRender、dateCellRender等scopedSlots→slots{ on, props, attrs }扁平化xxx.sync→v-model:xxx按上表将各组件的v-model换成具名写法图标改为从ant-design/icons-vue按需引入组件Form 迁移prop→name、嵌套路径用数组、validateFields改用 Promise、善用scrollToFirstError/scrollToField升级后回归视觉规范差异行高、圆角、分割线颜色、Table 背景色。赞分享前端UI组件设计系统【免费下载链接】ant-design-vue An enterprise-class UI components based on Ant Design and Vue. 项目地址https://gitcode.com/gh_mirrors/an/ant-design-vue点击查看免费下载相关推荐Unitree ROS仿真包深度解析从仿真到真实机器人的无缝控制方案Unitree ROS仿真包深度解析从仿真到真实机器人的无缝控制方案 Unitree ROS仿真包为机器人开发者提供了完整的四足和人形机器人仿真与控制解决方案开发工具PyTorch Lightning 2.0 升级指南从 1.x 迁移的破坏性变更与实战对照PyTorch Lightning 2.0 升级指南从 1.x 迁移的破坏性变更与实战对照 本篇技术指南围绕 PyTorch Lightning 官方升级文档人工智能深度学习机器学习预训练分布式训练微调web3.eth 迁移指南从 web3.js 1.x 升级到 4.x 的破坏性变更全解析web3.eth 迁移指南从 web3.js 1.x 升级到 4.x 的破坏性变更全解析 本指南是 web3.js 1.x 升级到 4.x 系列文档的核心部分区块链Web3创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考