本篇文章是阅读黄峰达的《前端架构：从入门到微前端》的一些记录和读后感，更新中....一、关于前端架构1.1什么是软件架构软件架构指的是软件系统的高级结构，以及创建这种结构的约束。

目录前言微服务架构简介微前端架构简介微前端与微服务的融合1.共享服务2.基于事件的通信3.统一的身份和认证4.交付管道的集成示例：使用微服务和微前端的电子商务平台微服务架构微前端架构融合微服务和微前端总结作者简介

Vue使用eleUI下拉框位置偏离解决方法问题描述：前端使用qiankun框架，在一个弹窗使用下拉框的时候，下拉框莫名其妙飞到左上角去了，而且点击不到很奇怪，并报错：Errorineventhandlerfor

为了能够将前端模块解耦，通过相关技术调研，最终选择了无界微前端框架作为物流客服系统解耦支持。为了更好的使用无界微前端框架，我们对其运行机制进行了相关了解，以下是对无界运行机制的一些认识。

微服务样式隔离的原理是利用ShadowDOM技术来隔离各个微前端应用的样式。

一、微前端微前端（Micro-Frontends）是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将Web应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。

Micro-app框架1、框架安装npmi@micro-zoe/micro-app--save2、子应用对应的view页面3、页面对应的路由{//路由路径最好是非严格匹配path:"/app-vue2-demo*",name:"Vue2DemoPage",component:()=>import("@/views/Vue2DemoPage.vue")}别忘记，view页面也需要配置4、子应用的配置

1、提取公共依赖的目的减少相同资源的重复加载资源版本不同步打包文件庞大2、如何提取公共依赖基本思路：1、相同依赖采用CDN的方式加载，并把所有依赖的CDN链接统一放到一个文件中进行管理2、把存放CDN链接的文件，引入到vue.config.js中去3、在项目打包时，添加忽略部分文件打包的配置，把以CDN方式加载的依赖忽略掉4、把CDN加载的链接，动态添加到index.html中去2.1改造主应用2

一.为什么会出现ModuleFederation我们用一个图片说明一下关键点每个应用块由不同的组开发TeamATeamB应用或应用块共享其他其他应用块或者库ReactModuleFederation的动机是为了不同开发小组间共同开发一个或者多个应用应用将被划分为更小的应用块，一个应用块，可以是比如头部导航或者侧边栏的前端组件，也可以是数据获取逻辑的逻辑组件什么是模块联邦？我们再用一张图说明一下容器

前言项目即将用到vite-plugin-federation，开始参照网上的教程和vite-plugin-federation的官方文档试验最简单的微前端。

本项目使用的angular是15.2.8版本的，npmi@angular/[email protected]为了好演示，两个项目就放在了一个git仓库中，但是两个不同仓库的项目也是可以使用的，原理是一样的1.创建环境创建一个没有项目的空壳子ngnewshell--create-application=false进入到项目文件夹中，添加主应用和子应用1nggapplicationmainnggapplicat

在main项目中，mfe1项目的路由跳转，走的还是main项目的路由，由于没有mfe1的路由前缀，所以路由跳转是失败的1.创建环境在之前的mfe1项目中已经加了test.component组件/**mfe1*app-routing.component.ts*/constroutes:Routes=[{path:'test',component:TestComponent}];/**mfe1*app

基于npm和module-federation的远程包管理器最近做了一个微前端开源项目(webpackagemanager),临近休假先简单的推广一下,节后再继续更新,欢迎大家体验和star,也欢迎沟通讨论

module-federation是webpack5更新的一项新特性,可以更容易的共享前端代码,本文将介绍@module-federation/webpack-4实现原理及其与webpack5的差异背景在公司内我们搭建了微前端包管理平台

这通常被称作微前端，但并不仅限于此。我们分为本地模块、远程模块。其中本地模块即为普通模块，是当前构建的一部分；而远程模块不属于当前构建，并在运行时从所谓的容器加载。加载远程模块被认为是异步操作。

前景知识命令HowtocreateanewremoteusingAngularCLI?(Webpack5ModuleFederationmicrofrontends)ngclingnewnggeneratengnewdashboard--create-application=falsenggenerateapplicationdashboardngnewicrm-regulatory-mansem

Module-Federation微前端简介我们为什么没有延续使用【乾坤】使用Module-Federation优/缺EMP优EMP缺图解DEMO详解`Tips:`[文件资源](https://download.csdn.net

2023flag倒了，2024重新立起来java持续学习，尤其是Springcloud，可以独立写一个Springboot程序数据库，clickhouse，并创建新的日志系统VUE3+TS学习，微前端框架三维

官网基于single-spa封装，提供了更加开箱即用的API。技术栈无关，任意技术栈的应用均可使用/接入，不论是React/Vue/Angular/JQuery还是其他等框架。HTMLEntry接入方式，让你接入微应用像使用iframe一样简单。样式隔离，确保微应用之间样式互相不干扰。JS沙箱，确保微应用之间全局变量/事件不冲突。⚡️资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用

1什么是微前端微前端的核心理念是将前端应用程序看作是一个整体，由多个独立的部分组成。每个部分被视为一个微前端应用，它们可以具有自己的技术栈、开发流程和团队组织。

微前端主要解决了两个问题：1、随着项目迭代应用越来越庞大，难以维护。2、跨团队或跨部门协作开发项目导致效率低下的问题。

前言随着技术的发展，前端应用承载的内容也日益复杂，基于此而产生的各种问题也应运而生，从MPA（Multi-PageApplication，多页应用）到SPA（Single-PageApplication，单页应用），虽然解决了切换体验的延迟问题，但也带来了首次加载时间长，以及工程爆炸增长后带来的巨石应用（Monolithic）问题；对于MPA来说，其部署简单，各应用之间天然硬隔离，并且具备技术栈无

SingleSpa-VueCli-微前端落地方案创建项目parent-vue和child-vue两个项目vuecreateparent-vuevuecreatechild-vueparent-Vue安装依赖

微前端（Micro-Frontends）是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将Web应用分解成一些更小、更简单的小模块，而在用户侧看起来还是一个内聚的产品。

B站课程视频课程视频课程课件笔记：1.微前端2.无界现有的微前端框架：iframe、qiankun、Micro-app（京东）、EMP（百度）、无届前置初始化新建一个文件夹1.通过npmitypescript-g

微前端简介微前端这个名词，第一次被提出还是在2016年底，那是在ThoughtWorksTechnologyRadar。这个概念将微服务这个被广泛应用于服务端的技术范式扩展到前端领域。

1、首先在主系统中qiankun启动前把变动的参数初始化2、初始化之后就可以通过全局状态通信把参数透传为全局3、在微应用子系统main.js的qiankun的mount中获取到全局设备参数属性并是设置为子系统全局

微前端微前端定义这种架构模式是微服务架构理念在前端领域的延伸，旨在将单体前端应用分解为松耦合且独立的小应用后，再根据实际的业务场景将这些小应用组装成单个解决特定业务场景的应用；在前端设计时我们可以遵循单一职责和复用原则按照领域模型和微服务边界

我的手写源码系列往期本人手写框架源码系列原创：从零实现一个简单版React（附源码）原创：如何自己实现一个简单的webpack构建工具【附源码】深度：手写一个WebSocket协议[7000字]深度：从零编写一个微前端框架

背景系统使用webpack5模块联邦实现微前端，有关如何实现跨应用的代码共享，可参考如何优雅的实现跨应用的代码共享里的第三大点。

1、样式隔离前端样式不隔离，会产生样式冲突的问题，这个点在qiankun也存在子应用1修改一个样式button{background:red！

上一篇文章中我们分享了qiankun的一些概念和特性，以及基于qiankun实现有一个微前端应用的大概步骤，最后以qiankun加vue2.0为例给出了快速搭建qiankun微前端的一些核心代码。

wl-micro-frontends[wl-qiankun]本项目采用vue+qiankun实践微前端落地。同时qiankun是一个开放式微前端架构，支持当前三大前端框架甚至jq等其他项目无缝接入。

后来发现是reset.css的问题，主应用的reset.css的font:inhert这个属性导致点击加粗没有生效，把这个属性注释掉就可以加粗了我的项目是qiankun的项目，主应用和子应用，主应用用的

qiankun（乾坤）微前端框架简介最近在搞微前端项目，接下来整体介绍一下微前端。在现代Web应用程序开发中，微前端架构逐渐成为一种趋势，它可以帮助我们更好地管理和组织复杂的项目。

转载请注明出处，点击此处查看更多精彩内容。iframeiframe是HTML的内联框架元素，表示嵌套的BrowsingContext，它能够将另一个HTML页面嵌入到当前页面中，每个嵌入的BrowsingContext都有自己的会话历史记录和DOM树。每个浏览上下文都拥有完整的文档环境，因此页面上每个iframe都需要增加内存和其它计算资源，虽然理论上来说能够在代码中写出来无限多的iframe，但

pnpmmonorepomicro-app微前端开发架构主要解决问题微前端特性未来期许采用技术说明主要解决问题随着项目迭代应用越来越庞大，难以维护。跨团队或跨部门协作开发项目导致效率低下的问题。

1.什么是微前端在说什么是微前端的之前我们先来思考一下什么是微服务，微服务是一种为了降低服务端耦合的架构方式（为了解决庞大的一整块后端服务带来的变更与扩展方面的限制）微服务是面向服务架构（SOA）的一种变体

本文作者：CODING-廖红坤前言随着微前端、微服务等技术理念和架构的蓬勃发展，我们已经没必要去讨论为什么要前后端分离这种话题，前后端分离已成为互联网项目开发的标准模式。

1、目标2、前端架构的前世今生①初始：无架构，前端代码内嵌到后端应用中②后端MVC架构：将视图层、数据层、控制层做分离缺点：重度依赖开发环境，代码混淆严重（在调试时，需要启动后端所有代码和依赖，比较麻烦）③前后端分离架构将前端代码从后端环境中提炼出来（ajax促进了前后端分离架构的发展）多页面架构，使其能够通过浏览器动态获取数据；缺点：前端缺乏独立部署能力，整体流程依赖后端环境④Nodejs的广泛

最近用React+UMI+qiankun的框架撸了一个后台管理系统，主应用使用的qiankun做的微前端，子运用使用的是UMI搭建的React项目，涉及到主应用与子运用的通信问题。

微前端微前端是一种将前端应用程序拆分成更小、更独立的部分，使得不同团队能够独立地开发、测试和部署这些部分的架构模式。

最近在找工作，现在已经接近尾声了，面了携程，美团，京东，比心APP，英语流利说，百度，携程，新核云，现在写一下面经，希望最近找工作的你们一路顺下去英语流利说一面微前端描述下怎么协同开发注意事项2：场景问题

本文由体验技术团队TinyVue组件库成员陈家梅同学分享，带你手把手实现TinyVue组件库适配微前端~一、前言以下是我对微前端的一些粗浅理解，对微前端有一定了解的话可以略过，直接进入第二部分。

微前端qiankun使用，一些注意事项。

目录前言pnpmvsnpmpnpm设计思想硬连接软链接（符号链接）原理pnpm指令monorepo架构介绍配置monorepopnpm--filter前言我们采用的是微前端一个主应用，和多个子应用，我们肯定不会一个一个去

主应用配置（基座）安装包npmi@umijs/plugin-qiankun-D配置qiankun开启{"private":true,"scripts":{"start":"umidev","build"

elementUI的样式文件中有字体文件的引用，是以相对路径的形式写在css文件中的，本来独立部署项目访问是没问题的，问题出现在以qiankun微服务的方式嵌入到主应用中时，路径就不能在以相对路径来显示了

目录微前端概念微前端特性场景演示微前端方案iframe方案qiankun方案micro-app方案EMP方案无界微前端方案无界方案成本低速度快原生隔离功能强大总结前言：微前端已经是一个非常成熟的领域了，

目录webComponents概念和使用生命周期总结CustomElementRegistry.define()语法参数返回值例子&总结Element.attachShadow()语法参数返回值异常例子&总结总结webComponentsWebComponent是一套不同的技术，允许你创建可重用的定制元素（它们的功能封装在你的代码之外）并且在你的web应用中使用它们。概念和使用作为开发者，我们都知