文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

微前端x重构实践落地总结

因为原来的项目是 ant-design-vue + vue 全家桶，要切换成 ant-design + ant-design-pro + react 全家桶。...升级版架构 上图的架构有一个问题就是，当每次点击侧边栏的 MenuItem 时，都会加载一次微应用的子页面，也即： 微应用子页面之间的切换，其实就是在微应用里路由切换嘛，大可不需要通过重新加载一次微应用来做微应用子页面的切换...还记得我刚说主应用和子应用都用了 ant-design 么？...importnant 的优先级是最高的，如果微应用也用了这个 .ant-xxx 类，就很容易被主应用的样式影响了。所以在加载微应用时，还需要处理 ant-design 之间的样式冲突问题。...但是不知道为什么，在 less 文件中改了 ant-prefix 变量后，ant-design-pro 的样式还是老样子，有的组件样式改变了，有的没变化。

98620

总结100+前端优质库,让你成为前端百事通

事件之间的 300ms 的延迟。...并且可以在 React、Vue、Angular 项目中使用 「Scroll Reveal」 零依赖，为 web 和移动浏览器提供了简单的滚动动画，以动画的方式显示滚动中的内容 「Kute.js」 一个强大高性能且可扩展的原生...After Effects 动画，并在移动设备和网络上呈现它们 鼠标/键盘相关 「KeyboardJS」 一个在浏览器中使用的库（与 node.js 兼容）.它使开发人员可以轻松设置键绑定和使用组合键来设置复杂的绑定...元素的 CSSku 库 hint.css 一个用纯 css 和 html 实现的提示库 React相关库 UI 库 Ant design 用于研发企业级中后台产品的 UI 组件库 Ant design...mobile 基于 Ant Design 设计体系的 React UI 移动端组件库 MaterialUI 世界最受欢迎的基于质感设计的 React UI 库 toolbox 一套使用 CSS 模块功能实现

3.1K20
您找到你想要的搜索结果了吗？
是的
没有找到

​年终盘点: 复盘20+基于React的开源管理后台&插件

1.Fusion Design Fusion Design是Ant Design团队推出的一套设计规范，旨在提供一致的用户体验。...Ant Motion Ant Motion 是Ant Design 中提炼出来的动效语言。...5.Ant Design (Antd)是一个基于React技术栈的UI组件库,由蚂蚁金服前端团队开发和维护。Antd提供了丰富的组件和配套的设计规范,可以帮助开发者快速构建高质量的Web应用。...ArcoDesign的目标，即通过通用的设计系统去解决产品中的体验问题, 并为产品设计提供指导原则解决业务问题，同时它能够促进设计部门和研发部门之间协作, 成为开发者之间沟通的语言。...基于 Ant Design 设计语言，提供了开箱即用的高质量 React 和 Angular 组件实现，用于开发和服务于企业级中后台产品。

49210

React实战：使用Vite+TS+Antd构建React项目

前言由于我之前学过React框架，但是由于工作中没有使用它，所以我最近开始使用了Vite、TypeScript、React Router，Redux,Axios，Ant Design和SpringBoot...在本篇博客中，我们将介绍如何使用，vite、TypeScript、React Router和Ant Design工具和库来创建一个React项目。正文内容一、什么是Vite？...Ant Design的设计风格非常优雅和简洁，同时还可以提供多语言支持和自定义主题等功能。五、创建React项目现在，我们已经了解了一些常用的React工具和库，可以开始创建一个React项目了。...在本篇博客中，我们将使用Vite、TypeScript、React Router和Ant Design来创建一个React项目。1. 安装Vite首先，我们需要安装Vite。...然后，我们在Header中创建了一个菜单，可以用来切换不同的页面。最后，我们使用Switch和Route组件来配置路由。

1.5K52

React 中后台系统多页签实现

这样的需求在 Vue 中使用 keep-alive 即可实现，但是在 React 中，React Router 切换路由后就会卸载组件，而本身并没有提供类似 keep-alive 的功能，所以实现多页签的功能就会变得格外困难...社区上关于多页签的需求呼声也非常高，但是如 React 社区比较出名的中后台方案 Ant Design Pro 也不支持该功能，两年没看，至今仍然有很多 Issue 提出这类需求： Antd Pro...社区多页签需求 Issues 偏右大佬早在 2017 年对此做出了回应，详见“能否提供tab切换模式 · Issue #220 · ant-design/ant-design-pro · GitHub”...react-router-cache-route （推荐） React Activation （和上面的工具同一个作者，Vue 中功能在 React 中的实现，配合 babel 预编译实现更稳定的 KeepAlive...tabs) Ant Design Pro Plus （ 88 star，基于 ant-design-pro 做一些微小的工作） React Admin （83 star，基于 Ant Design React

3.1K20

如何用纯css打造类materialUI的按钮点击动画并封装成react组件

前言 作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, ant-design-vue..., iView等成熟的UI框架, react生态的ant-design, materialUI等,这些第三方UI框架极大的降低了我们开发一个项目的成本和复杂度,使开发者更专注于实现业务逻辑和服务化....transform的scale以及透明度, 并且设置一个渐变的径向背景图像来实现水波纹动画的为了实现更优雅的动画,上面的css动画的实现可以借助cubic-bezier这个在线工具,他可以生成各种不同形式的贝塞尔曲线...组件的设计思路我这里参考ant-design的模式, 基于开闭原则,我们知道一个可扩展的按钮组件一般都具备如下特点: 允许用户修改按钮样式 对外暴露按钮事件方法 提供按钮主题和外形配置 可插拔,可组合...其实不仅仅是react, 我们使用同样的原理也可以实现一个vue版的按钮组件或者一个angular版的组件,变得只是语法而已.这样的组件设计思路和元素被官方用在很多ui库中, 比如单一职责原理, 组件的开闭原则

1.8K30

【实战】1096- React 中后台系统多页签实现

这样的需求在 Vue 中使用 keep-alive 即可实现，但是在 React 中，React Router 切换路由后就会卸载组件，而本身并没有提供类似 keep-alive 的功能，所以实现多页签的功能就会变得格外困难...社区上关于多页签的需求呼声也非常高，但是如 React 社区比较出名的中后台方案 Ant Design Pro 也不支持该功能，两年没看，至今仍然有很多 Issue 提出这类需求： Antd Pro...社区多页签需求 Issues 偏右大佬早在 2017 年对此做出了回应，详见“能否提供tab切换模式 · Issue #220 · ant-design/ant-design-pro · GitHub”...react-router-cache-route （推荐） React Activation （和上面的工具同一个作者，Vue 中功能在 React 中的实现，配合 babel 预编译实现更稳定的 KeepAlive...tabs) Ant Design Pro Plus （ 88 star，基于 ant-design-pro 做一些微小的工作） React Admin （83 star，基于 Ant Design React

2.4K10

使用umi开发react-native应用

于是就产生了这个项目：umi-react-native。 umi 在 RN 中仅用来生成中间代码（临时文件），介于编码和构建的之间，旨在引入 umi 的开发姿势来提升 RN 编程体验。...目前的版本已经支持： 零配置，添加dva，@ant-design/react-native......概览 NPM 包 简介 umi-plugin-antd-react-native 为@ant-design/react-native提供按需加载，主题定制、预设、切换，国际化支持，在expo中链接字体图标.../react-native 在 RN 工程目录下，使用 yarn 安装@ant-design/react-native: yarn add @ant-design/react-native && yarn...路由 umi-preset-react-native提供了 2 种可相互替代的路由方案： 使用 umi 内置的 react-router umi内置了react-router-dom，umi-preset-react-native

6.1K30

开源 UI 组件库和开发工具库概览 | 开源专题 No.59

ant-design/ant-design[1] Stars: 87.9k License: MIT Ant Design 是一个企业级 UI 设计语言和 React UI 库。...为 Web 应用程序设计的企业级 UI。 提供一套高质量的开箱即用的 React 组件。 使用可预测静态类型编写 TypeScript 代码。 包含完整的设计资源和开发工具包。...主要特点： 提供了一套全新、面向未来并富有前瞻性的 React 组件 支持渐进式迁移至最新版 (FluentUI V9) 包含对老版本 (如 V8) 已经广泛使用过程中积累下来的较为完善且稳定可靠等的功能...主题系统：强大的颜色系统使得轻松为您的应用程序设置一致且漂亮的风格。...相关链接 [1] ant-design/ant-design: https://github.com/ant-design/ant-design [2] microsoft/fluentui: https

23110

做了N+1个企业项目之后, 我总结了这些React必备插件

Redux JavaScript 状态容器，提供可预测化的状态管理 MobX 通过函数响应式编程使得状态管理变得简单和可扩展 Redux Thunk Redux的异步处理中间件 Redux Saga Redux...Ant design 基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品 Ant design mobile 基于 Ant Design 设计体系的 React...Halogen 使用React的加载动画集合 react-move 漂亮的，数据驱动的React动画,只需3.5kb（gzip） react-spring 一个基于弹簧物理学的动画库 Ant Motion...react-beautiful-dnd 漂亮,可移植性 列表拖拽库 react-dnd 可帮助我们构建复杂的拖放界面，同时保持组件的分离 react-moveable 支持自由拖拽, 缩放, 参考线的灵活强大的拖拽库...图像处理 ?

2K10

详细剖析｜袋鼠云数栈前端框架Antd 3.x 升级 4.x 的踩坑之路

对 3.x 的兼容性处理 或许是考虑到部分组件升级的毁坏性，antd4.x 中依然保留了对 3.x 版本的兼容，废弃的组件通过 @ant-design/compatible 保持兼容，例如 Icon、Form...注意：建议 @ant-design/compatible 仅在升级过程中稍作依赖，升级 4.x 请完全剔除对该过渡包的依赖。...将 Modal.method() 中字符串 icon 属性的调用转换成从 @ant-design/icons 中引入 antd4-codemod 上图这类报错是 Icon 组件自动替换错误，有 2 种处理方式...・解决方案 通过在 rowSelection 中设置 columnWidth 和 fixed 解决。...通过这次 UI 升级和 antd 升级之后，表格在数栈中的应用发生了较大的变化，减⼩了表格默认⾼度，增加⼀屏可浏览的数据数量。

4K30

Ant Design 是怎么管 Icon 的？

Ant Design 的 Icon，是在"确定"和"自然"的设计价值观影响下的一套美观、一致、易用、便于延展的图标体系； 注：antd 设计价值观 https://ant.design/docs/spec...如何使用 antd 的 Icon？ 3.1. 常规用法 直接通过 的 type 和 theme 指定图标。 3.2. 引用 iconfont.cn 中的定制图标 3.3....SVG （Scalable Vector Graphics）是一种基于 XML 语法的矢量图像格式（怎么放大都不失真的那种...）。.../icons-react：可以将 svg 定义描述转换为 React 组件； ant-design/Icon：负责整合 icons 和 icons-react，将 icons 导出的所有 svg 定义描述导入...用途、目录结构 对外提供 Icon 接口； 整合 icons 和 icons-react，自动将 icons 中的所有 IconDefinition 注册到 icons-react 中，以便可以通过

4.5K30

掌握使用 React 和 Ant Design 的个人博客艺术之美

前言在当今数字时代，个人博客成为表达观点、分享经验和展示技能的独特平台。在这个互联网浪潮中，选择使用 React 的 Ant Design库，为你的个人博客赋予了更为华丽而现代的外观。...接着，我们引入了 Ant Design 库，这个由阿里巴巴出品的组件库为你提供了各种各样、灵活可定制的UI组件。...在你的 React 组件中引入 Ant Design 组件。你可以从 Ant Design 的文档中选择适合你博客风格的组件，比如 Menu、Card、Typography 等。...你可以在社交媒体上分享你的知识、见解和经验，与他人交流互动。总结在这次的 React 与 Ant Design 的融合之旅中，我们不仅仅是创建了一个个人博客，更是在数字创意的大舞台上留下了自己的印记。...React 的灵活性和 Ant Design 的美学设计让博客开发变得如此简单而有趣。

21610

Uni&antd的ProLayout布局动态菜单实现及踩坑记录

ProLayout 高级布局是 Ant Design Pro 中的一个组件，可以提供一个标准又不失灵活的中后台标准布局，同时提供一键切换布局形态，自动生成菜单等功能。...使用 umirc.ts 直接配置路由和 layout ： layout: {   name: 'Ant Design',   locale: true,   layout: 'side', }, 这样是可以正常显示了..., { useState } from 'react'; import type { ProSettings } from '@ant-design/pro-layout'; import ProLayout...在 props 中可以取到 umirc.ts 中配置的信息，直接拿到 routes 。 这里的图标如果直接取官方的 type (如 HomeFilled )是不行的。...所以需要用 IconMap 转一下，我封装成了一个工具，放在 @/utils 里了：这里的 key 值和 umirc.ts 中 route 的 icon 对应。

13.5K31

Uni&antd的ProLayout布局动态菜单实现及踩坑记录

ProLayout 高级布局是 Ant Design Pro 中的一个组件，可以提供一个标准又不失灵活的中后台标准布局，同时提供一键切换布局形态，自动生成菜单等功能。...使用 umirc.ts 直接配置路由和 layout ： layout: {   name: 'Ant Design',   locale: true,   layout: 'side', }, 这样是可以正常显示了..., { useState } from 'react'; import type { ProSettings } from '@ant-design/pro-layout'; import ProLayout...在 props 中可以取到 umirc.ts 中配置的信息，直接拿到 routes 。 这里的图标如果直接取官方的 type (如 HomeFilled )是不行的。...所以需要用 IconMap 转一下，我封装成了一个工具，放在 @/utils 里了：这里的 key 值和 umirc.ts 中 route 的 icon 对应。

2.4K20

React 毁了 Web 开发！

然而，它的性能并不那么好，而且该框架规定了太多东西，远不如React。 ? 然而，React在开始流行之后，发展变得一团糟。React社区中开启了一种新趋势，一切都围绕着炒作、新奇和创造新范式的转变。...如何编写可审查的代码 不要说你是一名“团队成员”，而是告诉我代码审查对审查者来说同样困难，而且你知道如何优化PR才能提高可读性和清晰度。...如何审核别人的代码 因为代码审查可确保产品质量、减少bug和技术债务、共同建立团队知识等等，但前提是将代码审核贯彻到底。代码审查不应该只是自上而下的活动。...唐金州是开源组件库 Ant Design Vue 的作者，这一组件库已纳入 Ant Design 官方域名下，成为蚂蚁金服 Ant Design 官方唯一指定的 Vue 版组件库。...2017 年，开始开发基于 Ant Design 这一设计语言的 Vue 组件库，组件库开源后获得了众多好评，现已纳入 Ant Design 官方域名，成为了蚂蚁金服 Ant Design 官方唯一指定的

73730

12个适合后端程序员的前端框架

它基于Google的Material Design设计风格，以简洁、直观和美观为特点，提供了一系列的CSS、JavaScript组件和样式，帮助开发人员轻松构建漂亮的Web界面项目地址https://github.com.../chuzhixin/vue-admin-better项目截图Ant Design Vue简介Ant Design Vue 是一个功能强大、易于使用且拥有出色设计质量的UI组件库，广泛应用于Vue.js...项目地址https://github.com/vueComponent/ant-design-vue项目截图vue-vben-admin简介Vue Vben Admin 是一个免费开源的中后台模版。...（vue2.x请切换vue-prev-admin分支）。...项目地址https://gitee.com/LongbowEnterprise/BootstrapBlazor项目截图ngx-admin简介ngx-admi是一个基于Angular 10+的可定制的管理仪表板模板

46500

7 款最棒的开源 React UI 库测评 - 特别针对国内使用场景推荐

- 字节跳动 UI 组件库开源，大厂逻辑，设计文档完美 Ant Design React - 阿里前端 UI 库，面向企业级中后台 Material-UI - 全球顶级 React 组件库 Google...扩展阅读：React Router 6 (React路由) 最详细教程 Ant Design of React - 阿里前端 UI 库，面向企业级中后台 [04-antdesign-react] 阿里...Ant Design of React 上手文档 | 阿里 Ant Design of React Github Antd of React 是基于 Ant Design 设计体系的 React UI...Ant Design 作为一门设计语言已经经历了多年的迭代和积累，它对 UI 的设计思想已经成为一套标准，也是 React 开发者手中的神器，大幅提高了产品设计研发的效率及质量，Ant Design 文档简洁清晰...Antd of React 是国内 React 项目的首选组件库。 当然，Ant Design 也帮大家造好了轮子，Ant Design Pro（React admin 后台管理框架）请享用。

5.1K40
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券