微前端、或共享组件等方案收集

最新推荐文章于 2025-02-21 08:30:00 发布
最新推荐文章于 2025-02-21 08:30:00 发布
阅读量344 收藏
点赞数
文章标签： 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_41228055/article/details/132713798
版权

共享组件

moudle webpack federation

强依赖webpack5，将需要共享的组件打包出来，通过线上访问的形式，不需要打包

通过 webpack的MoudleFederationPlugin插件来导出导入

Umi4 MFSU

vite @originjs/vite-plugin-federation

微前端

singleSpa

qiankun

microApp

wujie

快速上手 | 无界

三两仙气
关注
微前端父子应用及兄弟应用间组件或方法共享方案
Alice_124的博客
07-17 1109
不同的方案有各自的特点，需要根据具体的应用场景和需求进行权衡。
微前端架构
m0_73085893的博客
08-21 1512
Single-SPA：作为最早的微前端框架之一，它提供了基础的加载器和路由托管功能，但本身不包含沙箱隔离机制。qiankun：由阿里团队开发，基于single-spa，它不仅简化了子应用的接入方式，还实现了JS沙箱和CSS隔离，提供了更加完善的微前端解决方案。Micro-App：京东推出的框架，采用Web Component技术实现微前端，它通过组件化思维简化了微前端的实现，降低了技术门槛。
微前端如何实现组件共享
最新发布
你若盛开，清风自来
02-21 762
组件共享是微前端的重要组成部分，它可以帮助开发者复用组件，减少代码的重复。通过使用组件库、模块联邦、通信机制和集成方式，开发者可以更高效地构建和管理微前端应用。希望本文对你有所帮助，如果你有任何问题或建议，欢迎在评论区留言讨论。
微前端场景下的代码共享
趣谈前端
11-09 1145
大厂技术坚持周更精选好文前言在现有前端应用日益复杂化的业务场景下，将一个体积庞大的前端应用拆分为几个可以独立开发、测试、部署的微应用变得越来越普遍。微前端的这种模式这大大提高了我们的构建效率，在每次构建时我们不再需要去构建一个庞大的应用，而是构建我们所需要构建的某个子应用。通常在一个微前端的架构下应用之间又会有许多公共的代码，那么在此基础上又如何更加灵活更加有效的共用这些代码呢？（下面介绍...
微前端（qiankun）主应用共享React组件
wangqiaojie的博客
06-08 4224
最近需要重构一个老项目，定的方案用微前端去改造。主应用是老的项目，微应用是新的项目，由于重构时间比较紧张，子应用还需要使用父应用的一些组件。
微前端子应用间通信和数据共享
zh0623的博客
05-17 2253
data() {return {count: 0,},methods: {},},
企业级前端组件建设
09-07 1115
去年我们平台为客户提供了一套企业级前端组件方案，收集了一下客户的需求，同时也做了一部分调研工作，由于我们是为金融机构服务的，所以也发现了同业中广发所做的GFDesign也是这样的思路，大家可以看广发移动端统一组件库GFDesign来了这篇文章，同时像蚂蚁的Ant Design、字节的和以及腾讯的TDesign，都是类似的企业级设计系统以及组件库。那么提到了组件库不得不说一下组件化。组件化是一种非常优雅的提效率、保质量的解决方案，可以帮助研发人员实现功能复用，降低代码重复率，提高研发效率。
微前端中的组件库管理：打造共享且一致的UI组件（组件库管理：UI一致性与维护性的关键）
首先，我们介绍了微前端组件库的概念、重要性和设计原则，随后探讨了组件库在微前端应用中面临的挑战和解决方案。文章详细分析了组件的开发、封装、文档制作、版本管理以及集成过程，强调了性能优化、兼容性和测试的...
基于 iframe 的全新微前端方案
腾讯技术工程
12-13 3855
作者：damyxu，腾讯 PCG 前端开发工程师iframe是一个天然的微前端方案，但受限于跨域的严格限制而无法很好的应用，本文介绍一种基于 iframe 的全新微前端方案，继承ifram...
Web Components Kit与微前端架构：组件微服务化实践探究
[Web Components Kit与微前端架构：组件微服务化实践探究](https://opengraph.githubassets.com/f99b576b846e4ef39cd17c04421b5bd92e627763102419477fd1c04fd5fa7026/Polymer/polymer) # 摘要 微前端架构是将大型...
【前端探索】告别烂代码第二期 用策略模式封装分享组件
luciozhang的博客
03-02 507
使用TypeScrpit的优势，除了类型检查，更重要的是“更好的面向接口编程”！！ 使用什么样的设计模式不重要！！！设计模式只是让设计符合设计原则的手段，即使没学设计模式，符合设计原则的也是好代码。 设计模式还是要学！！！学了设计模式能更快设计出符合设计原则的好代码。
前端Vue分享菜单按钮弹框、微博分享、QQ分享、微信好友、朋友圈
chenchuang0128的博客
06-18 714
前端Vue分享菜单按钮弹框、微博分享、QQ分享、微信好友、朋友圈 ， 下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?-- 分享 ref: 设置一个唯一ref contentHeight：弹框高度 shareList：分享数组 click：分享菜单按钮点击 -->-- 分享 ref: 设置一个唯一ref contentHeight：弹框高度 shareList：分享数组 click：分享菜单按钮点击 -->text: 'QQ好友'
如何实现前端社交媒体分享功能
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-13 1306
你还可以通过监听按钮点击事件，自定义分享逻辑，比如收集用户输入的分享信息（如自定义分享文本），再通过JavaScript构造分享URL。${});});
在微前端项目中，如何使用vuex实现数据共享？
AlgorithmHero的博客
08-12 409
创建 Vuex Store： 在每个子应用中都需要创建自己的 Vuex Store。在子应用的入口文件中，比如 main.js，创建并配置 Vuex Store。安装 Vuex： 在每个子应用中都需要安装 Vuex。定义 Mutations： 在 mutations 中定义修改状态的方法，子应用通过调用这些 mutations 来更新共享状态。定义共享状态： 在 Vuex Store 的 state 中定义需要共享的状态数据。
vue + microApp 配合 nginx 实现 组件式引入(主项目 引入子项目组件)
Likefr
07-24 984
主项目能引入各种子项目的页面整合 需求是 主项目的某个区域 直接加载子项目的某个vue 组件显示components于是研究了半天 对子项目进行了改造 (最终效果如下:先看下原理图(左部分)在附上一张子项目打包后的文件将每个入口通过nginx 代理web请求。
基于Git子模块的微前端项目管理和公用组件库方案
林中路
02-11 2900
基于Git子模块的微前端项目管理方案 1. 媒体项目从单一项目到多项目的转变及问题 随着前端媒体业务的急剧扩大，传统的单体应用已经变得难以维护，由此，这几年我们一直在探索对大型复杂项目的拆分工作。 一开始拆分出去的是策划中心，老的媒体项目主体是AngularJS编写的，而拆分出去的策划中心模块则采用 VueJS 编写，限于框架之间的巨大差异，难以优雅地集成在一起，就使用了 Iframe 嵌入式方案。 后来，随着配置管理模块、网络资源模逐渐使用 VueJS 重写为独立项目的工作完成，对采编模块的重写工作终于开
EMP微前端实战之教你如何搭建共享站
mashibing_web的博客
11-19 989
什么是共享站 我们已经了解到emp微前端是去中心模式的微前端，其核心就是每个应用都可以独立部署彼此分享资源。但多个应用项目之间把可能有某业务逻辑模块或者其他是可复用的资源直接共享出去的话，会带来以下几个问题： 共用模块稳定性差 多个应用项目间的共享资源很容易因应用的更新迭代以及应用的上下线而影响公共模块的稳定性，从而引起多米勒效应。 共用资源混乱，难以管理 多应用共享资源代表我们所有用emp微前端的项目都可以抽离且把资源共享出去，这就意味着我们所有人都不清楚哪些项目共享了哪些资源，容易造成
从微组件到代码共享
LuckyWinty的博客
08-26 1087
前言随着前端应用越来越复杂，越来越庞大。前有巨石应用像滚雪球一般不断的叠高，后有中后台应用随着历史长河不断地积累负债，或者急需得到改善。微前端的工程方案在前端er心中像一道曙光不断的被提起...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值