Ant Design 4.0 正式版来了 引言 我们在 SEE Conf 之际发布了 4.0 rc 版本。经过 1 个多月的反馈收集和调整之后，我们终于迎来了 4.0 的正式版！...兼容性调整 Ant Design 3.0 为了兼容旧版 IE 做出了非常多的努力。然而根据业界统计，IE9/10 浏览器无论是在全球还是在国内份额都在随着 Windows 系统更新而在不断缩减。...使用了字符串命名的图标 API 无法做到按需加载，因而全量引入了 svg 图标文件，这大大增加了打包产物的尺寸。...参考资料 [1] 点击此处: https://ant.design/changelog-cn [2] https://ant.design: https://ant.design [3] 为何使用 svg...: https://github.com/ant-design/ant-design/issues/10353 [4] 此处: https://ant.design/docs/react/replace-moment-cn
按需引入，可以减少体积大小，但需要通过以下方式加载组件： import Button from 'ant-design-vue/lib/button'; import 'ant-design-vue/lib.../es/${name.toLowerCase()}/style/css`, } } }, } } resolve 是一个函数，当遇到 a-button 时，就会调用该函数...，入参是 AButton 函数需要返回一个对象，例如： { name: 'Button', from: 'ant-design-vue/es', sideEffects: 'ant-design-vue...es' import 'ant-design-vue/es/button/style/css' 而 ant-design-vue/es/button/style/css 中，引入了 Button 组件相关的样式...： { name: 'Button', from: 'ant-design-vue/es', sideEffects: 'ant-design-vue/es/button/style/css
支持定时 Http Web API 调用(推荐)，亦支持本程序集直接调用。 方便统计接入应用和任务项。 Blazor WASM 模式，使用了 Ant Design Blazor。...如果你对 Blazor 感兴趣，可以关注下 Ant Design Blazor。 如果你对 FreeSql 感兴趣，也可以关注下 FreeSql。...Blazor 同样也是前后端分离，使用 HttpClient 调用 Web API，本项目为了方便部署就建了同一个 Host，只需要在 Startup 中指定 Endpoints。...大家可以多关注 Blazor 以及 Ant Design Blazor，Ant Design Blazor 还在起步阶段，还有很大的提升空间。...最后对 Blazor 感兴趣的小伙伴可以关注下 Ant Design Blazor 和 Bootstrap Blazor, 目前觉得Bootstrap Blazor库稍微全一点。
3.组件库 因为 Element UI 长期没更新，并且之前使用过 React 的 Ant Design（重点），所以组件库选择了Ant Design Vue。...覆盖 Ant Design Vue 样式 设计师眼中的 Ant Design === '丑'（心酸）。...1.使用 .less 文件 Ant Design Vue 的样式使用了 Less 作为开发语言，并定义了一系列全局/组件的样式变量，所以需要安装了 less、less-loader，在 @/styles...如何知道你要加载的图标在什么路径下？...Design Vue 中部分体积较大的组件，例如 DatePicker，根据业务需求，应考虑在页面中进行加载，尽量保证首屏加载的速度： import { DatePicker } from
使用了字符串命名的图标 API 无法做到按需加载，因而全量引入了 svg 图标文件，这大大增加了打包产物的尺寸。...在 4.0 中，我们调整了图标的使用 API 从而支持 tree shaking，减少 antd 默认包体积约 150 KB(Gzipped)。...DatePicker 重写 提供 picker 属性用于选择器切换。 范围选择现在可以单独选择开始和结束时间。 onPanelChange 在面板值变化时也会触发。...# 通过 npx 直接运行 npx -p @ant-design/codemod-v4 antd4-codemod src # 或者全局安装 # 使用 npm npm i -g @ant-design...迁移工具修改详情 @ant-design/codemod-v4 会帮你迁移到 antd v4, 废弃的组件则通过 @ant-design/compatible 保持运行, 一般来说你无需手动迁移。
这里去掉不常用和没用到的全局引入，改为页面内import()引入 ⚡优化Ant-design-icon体积 内容（点击展开/收起） 这一部分，由于我们在项目中只使用了几个Ant内置图标，不可能有530+...重定向到本地来控制 这个问题，在React版的Ant-Design是已经是做了处理的了（写法上有所调整），但在Ant-Design-Vue-1.x中仍然没有官方解决方案。...目前了解到的有两种方案 使用webpack-ant-icon-loader[3] （异步加载） 重定向到本地文件来控制 （推荐），使用alia将将@ant-design/icons/lib/dist指向项目中的...这个问题，在React版的Ant-Design又已经是做了处理的了，允许用户选择dayjs或moment。同样的，Ant-Design-Vue仍没有跟进......所幸，dayjs作者提供了一个插件，可以将Ant-Design-Vue的moment替换成dayjs 虽然文档中只说Ant-Design-React可以用，但实际上在issue可以看到它也适用于antdV
在 React 领域里，一直缺少一套靠谱、好用的移动端组件，蚂蚁的 antd mobile v2 年久失修，几乎无人维护，跟 antd 相差甚远，在设计上，也有很多也已经跟不再符合 Alipay Design...激动人心的是，就在前两天，在 ant-design-mobile[2] 的 discussions 里面已经发布了 5.0（白杨）的 Roadmap[3]。...” 参考资料 [1] Alipay Design: https://design.alipay.com/ [2] ant-design-mobile: https://github.com/ant-design.../ant-design-mobile [3] 5.0（白杨）的 Roadmap: https://github.com/ant-design/ant-design-mobile/discussions/.../quick-start [10] 去这里: https://next.mobile.ant.design/components/button [11] 在这里: https://next.mobile.ant.design
架构图 功能介绍 更新内容 特性/增强 新增ReactJS前端工程(Ant Design Pro) 修复oidc-sso样例工程的数据问题 升级spring-cloud到2020.0.6 内容说明...新增ReactJS前端工程 采用 Ant Design Pro 框架，基于 UmiJS v3.x 和 ProComponents 图表采用 Ant Design Charts 一、目录说明 考虑到...方式二：静态服务器运行 把 layui-web\src\main\resources\static 下的所有内容复制到类似 Nginx 之类的静态服务器运行。 2.1.3....需要先安装 nodejs 官网地址：https://nodejs.org/en/download/ 然后安装 node_modules： 在 react-web\src\main\frontend 目录下执行以下命令...在 react-web 目录下执行 Maven 命令 mvn package 打包。 在target目录下生成 zlt-web-x.x.x.jar（springboot jar）。
Ant Design 的样式 import "antd/dist/antd.css"; 接下来我们需要引入我们想用到的按钮组件（这是一种解构的写法） import { Button } from "antd...但是在Ant Design中被作为一种属性。...Button> 3.4 按钮使用图标 这也就是图标的使用 图标的使用请看另一篇文章 SearchOutlined是搜索的图标 import { SearchOutlined } from '@ant-design...small 按钮变换所有按钮的大小 import { Button, Radio } from 'antd'; // 引入的图标 import { DownloadOutlined } from '@ant-design...import { Button } from 'antd'; import { PoweroffOutlined } from '@ant-design/icons'; class App extends
介绍 本文主要介绍 vite + vue3 + vue-router4 + vuex4 + ant-design-vue2 + axios + mockjs 工程搭建。.../store/index' createApp(App).use(router).use(store).mount('#app') 复制代码 安装UI库 ant-design-vue 执行安装命令...yarn add ant-design-vue@next 复制代码 引用 ant-design-vue 在 main.ts 中引入 antd 插件及 css 样式文件，在 vue 实例中 use 插件.../store/index' import "ant-design-vue/dist/antd.css"; createApp(App).use(router).use(store).use(Antd)....mount('#app') 复制代码 使用 ant-design-vue 引用后，我们就可以在组件中进行使用了 按钮</a-button
终于在过年期间动手翻新UI。 对于一个后端程序员，标准的直男审美，想做出好看的UI几乎不可能。所以只能借助前端框架了。在经过一番考察后决定使用Ant-design-pro这个框架。...Ant-design是当前最流行的前端组件库，Ant-design-pro是官方出品的一个基于Ant-design的admin后台快速开发框架。...Ant-design基于react开发，本人没玩过react，也正好学习一下。 在经过几个preview版本之后，今天release-1.2.0版本终于上线了。...release-1.2.0 使用ant-design-pro重写了全部UI 支持英文国际化 ? ? ? ? AgileConfig 介绍 这是一个基于.net core开发的轻量级配置中心。...这些程序由于分散在多个服务器上所以更改配置很困难。又或者某些程序即使不是分布式部署的，但是他们采用了容器化部署，他们修改配置同样很费劲。
前段时间做了一个项目，是使用 Create-React-App 脚手架 + TypeScript + Ant Design 组件库搭建的，在减少包体积上有一些方法和大家分享一下。...ant design 组件 你当然可以通过如下的方式实现按需加载第三方组件。...less 自定义变量 + 按需加载 ant design 组件样式 在我们的项目中需要自定义 ant design 的组件样式，你可以通过 自定义 less 变量 的方式来实现你的自定义样式 @import..."~antd/dist/antd.less"; // 引入官方提供的 less 样式入口文件 @primary-color: #2ca7fa; 但这样做的问题是，ant design 样式文件仍然是...Ant design 的 LocaleProvider 中始终引用了整个 momentjs.
我正在开发 Ant Design 的 Blazor 版本，预览页面部署在 Github Pages 上，但是加载速度很不理想，往往需要 1 分钟多钟才完成。...项目地址： https://github.com/ElderJames/ant-design-blazor[1] 。...可以看到，加载时要加载 2.1MB 的文件，首次加载时对网速的压力还是很大的。如果部署在境外，例如 Github Pages，可能就需要等上好几分钟了。...所幸，我们可以用 Serverless 把它部署到国内服务器上，解决了加载问题。 发布项目 现在，我们需要发布这个项目，生成需要部署的文件。...最近在开发Ant Design的Blazor实现版本，ant-design-blazor，欢迎关注。
3.2、快速入门 3.2.1、部署安装 下载地址：https://github.com/ant-design/ant-design-pro 我们使用资料中提供的，已经下载好的文件：ant-design-pro-master.zip...第一步：将ant-design-pro-master.zip解压到任意目录，我的目录是F:\code ?...Ant Design Pro提供的目录如下： ? 第二步，导入项目到Idea中 ? ? ?...数据从model中获取，在models下的rule.js中： ? 在TableList.js中，组件加载完成后进行加载数据: ? 在rule.js中，进行加载数据： ?...queryRule是在/services/api中进行了定义： ? 数据的mock是在mock/rule.js中完成。 ? 这就是整个数据的加载、更新流程。
antd pro升级 V4升V5 https://ant.design/docs/react/migration-v5-cn 通过参考上边的官方文档，也经过各类搜索引擎排查，经过两个晚上的尝试，由于涉及到太多依赖大跨度升级...https://pro.ant.design/zh-CN/docs/getting-started 进入到项目中按照上边的官方初始化文档，利用pro-cli创建脚手架 # 使用 npm npm i @ant-design...WebStorm 打开加载项目并安装依赖 cd qmock-service-api npm install 启动全新的antd pro V5 npm run start 项目初始化 虽然全新的V5版本..., searchProducts, removeProduct } from "@/services/ant-design-pro/project.js"; 最后还要根据升级后的语法调整文档对涉及到的变更处进行修改...，比如： https://ant.design/docs/react/migration-v5-cn 组件弹框的受控可见 API 统一为visible 变为 open 重启启动项目，查看项目管理业务是否正常工作
(即：页面地址的跳转都是在浏览器端实现的，不会去重新请求服务端获取 html，html 只是在应用初始化的时候加载一次。)...，value是function，用于处理客户端提交的请求并返回一个响应数据 前台路由：浏览器端路由，value是component，当请求的是路由path时，浏览器端没有发送http请求，但界面会发生局部更新...PC(ant.design/index-cn) mobile(mobile.ant.design/index-cn) antD 如何按需打包需要的样式： antD 把每个组件做成文件夹： 方式1： babel-plugin-import...插件，只加载有import 的组件。...npm install react-app-rewired --save-dev npm install babel-plugin-import --save-dev https://mobile.ant.design
沉静岁月，淡忘流年 1项目简介 QuartzCore.Blazor QuartzCore.Blazor 是一个基于 .Net5 开发的轻量级 Quartz 作业配置中心，实践应用 Ant Design...- 支持定时 Http Web API 调用(推荐)，亦支持本程序集直接调用。 - 方便统计接入应用和任务项。 - Blazor WASM 模式，使用了 Ant Design Blazor。...初始化数据库 用户只需要手工建一个空库，所有的表在第一次启动的时候都会自动生成。...层） (项目文件) Quartz使用场景 redis缓存预热 业务补偿机制 数据同步 新增任务项 Http WebApi调用方式比较独立，只需要配置api地址支持GET和POST，无需重新部署平台...程序集调用，需要继承JobBase，方便记录日志，需求重新部署平台 注释:报警邮箱是预留的字段，由于没有公共的邮箱服务器，而且也没必要这边先预留，小伙伴若有需求可自己添加上逻辑
，也比较片面，SPA 的页面不开浏览器 tab 应该更符合 Antd 的设计价值观：足不出户 - Ant Design，就连最新版的 Chrome 都已经支持“群组”功能了，让用户在 SPA 页面尽量不开浏览器页签才应该是更好的体验设计...解决了 react-router-cache-route 在 React 15 版本报错问题之后，接下来的工作就是实现页签的 UI 和打开关闭的逻辑了，注意关闭需要调用 react-router-cache-route...的卸载缓存 API。...（232 star，基于Ant Design Pro 2.0 的多标签页tabs) Ant Design Pro Plus （ 88 star，基于 ant-design-pro 做一些微小的工作）...React Admin （83 star，基于 Ant Design React 的管理系统架构） ant_pro_tabs （82 star，基于 Ant Design Pro 4 实现多标签页面，包括
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
