微前端micro-app 第2页

微前端无界机制浅析

快乐非自愿·2024-01-13 18:15

attachShadow样式隔离和JavaScript 沙箱

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

亮学长·2024-01-13 11:29

前端 - 用微前端前应该了解的一些知识点

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

kelly0721·2024-01-09 08:02

vue中使用micro-app报错 Unknown custom element: ＜micro-app＞

$mount('#app')原因在webcomponent注册组件micro-app前，vue渲染实例，遇到micro

清缓存试试·2024-01-09 01:28

Micro-app 微前端框架demo介绍

Micro-app框架1、框架安装npmi@micro-zoe/micro-app--save2、子应用对应的view页面3、页面对应的路由{//路由路径最好是非严格匹配path:"/app-vue2-

瓜皮伦·2024-01-07 23:32

微前端从零到剖析qiankun源码 -- Module Federation的玩法！

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

(° ﾛ °)·2024-01-05 09:26

vite-plugin-federation踩坑

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

yanyihan16·2024-01-05 09:26

angular利用module federation实现微前端 - 创建环境，并子项目暴露出AppModule给主项目使用

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

darkeering·2024-01-05 09:53

angular利用module federation实现微前端 - 路由问题

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

darkeering·2024-01-05 09:53

基于npm和module-federation的远程包管理器

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

zhanghongen1·2024-01-05 09:22

webpack4 module federation

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

zhanghongen1·2024-01-05 09:52

在 vue/cli 中使用 Module Federation

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

文摘资讯·2024-01-05 09:21

Angular 14微前端项目构建

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

lvxinaidou·2024-01-05 09:51

Module-Federation[微前端]

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

禅思院·2024-01-05 09:18

2024新flag

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

南山老沙·2024-01-04 19:58

浅了解一下『微前端』

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

Xxxxxl17·2024-01-03 22:37

2023-09-22 项目升级准备会议

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

henrypt·2024-01-02 02:50

几种微前端方案探究

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

维李设论·2024-01-01 13:44

2021-04-26 single-spa-vue 微前端初实践

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

FConfidence·2023-12-30 20:09

qiankun -- 入门微前端

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

高阳很捷迅·2023-12-29 08:45

微前端——无界wujie

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

lanmy_dl·2023-12-27 12:06

微前端简介

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

Shero.李建业·2023-12-27 07:00

6.微前端设计

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

Pingszi·2023-12-26 13:32

我的源码系列: 使用Node.js实现一个express框架

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

Peter 谭·2023-12-24 22:58

Vue和React的运行时，校验引入包的上下文差异

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

C澒·2023-12-23 08:44

微前端样式隔离、sessionStorage、localStorage隔离

1、样式隔离前端样式不隔离，会产生样式冲突的问题，这个点在qiankun也存在子应用1修改一个样式button{background:red！important；}其它应用也会受到影响qiankun的css隔离方案（shadowdom）shadowdom是webcomponents技术的一部分，其实就是一个attachShadow的APIwebcomponents添加内容的时候，不直接append

阿Q--小黑·2023-12-22 22:07

vue + qiankun

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

邯郸达文西·2023-12-22 19:01

registermodule 微前端_微前端实战看这篇就够了 - Vue项目篇

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

weixin_39603492·2023-12-22 14:52

qiankun（乾坤）微前端框架简介

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

Shero.李建业·2023-12-21 11:29

常见微前端方案

StoneHui·2023-12-20 19:55

pnpm monorepo micro-app 微前端开发架构

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

kenluff·2023-12-19 11:43

基于single-spa,single-spa-vue的微前端落地实现方案

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

Carols·2023-12-19 02:13

DevOps 视角的前后端分离与实战

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

腾云 CODING·2023-12-17 12:41

一、微前端目标、前端架构的前生今世、微前端架构优势和劣势、软件设计原则与分层

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

小草莓蹦蹦跳·2023-12-16 21:02

关于UMI中 useModel的使用（踩坑记录）

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

独孤九溅·2023-12-16 15:54

微前端，qiankun

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

await 404·2023-12-15 12:51

小伙伴新鲜出炉面试题目总结(含中大厂，已拿offer)

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

傲娇的koala·2023-12-15 08:25

你还不会 OpenTiny 跨框架组件库适配微前端？

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

OpenTiny社区·2023-12-06 20:56

微前端qiankun

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

放飞wlg·2023-12-06 18:39

微前端前置知识2--- monorepo架构

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

前端贾公子·2023-12-06 09:32

微前端qiankun示例 Umi3.5

主应用配置（基座）安装包npmi@umijs/plugin-qiankun-D配置qiankun开启{"private":true,"scripts":{"start":"umidev","build":"umibuild","postinstall":"umigeneratetmp","prettier":"prettier--write'**/*.{js,jsx,tsx,ts,less,md,

看陌生的风景·2023-12-06 05:54

微前端介绍

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

前端贾公子·2023-12-05 09:31

微前端前置知识----webComponents

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

前端贾公子·2023-12-05 09:28

React--引入第三方插件时，标签名是小写报错问题

报错信息报错原因1.组件名得大写2.缺少import语句解决方案declareglobal{namespaceJSX{interfaceIntrinsicElements{'micro-app':any

迷阵·2023-12-05 03:37

qiankun 部署微前端-vue2（一）

现在qiankun可以实现前端项目的微前端功能。qiankun官网：qiankun-qiankun最近在开发vue2的项目，前端主框架依赖于若依，于是就拿着现有项目试了一下。几番周折，终于成功了。

wuyu0920·2023-12-04 12:29

qiankun 部署微前端-vue2 （二）

对于基本的部署问题，也可以去官网查找答案：常见问题-qiankun这里主要记录在部署过程中遇到的问题一、路由权限问题无论主应用路由还是子应用中的路由，都会涉及权限问题，并不是每个路由路径对任何角色都是可见，所以我们在主应用mian.js中一般会加入（引入相关权限js，如permission.js）路由守卫（路由权限）。思考一下，我们在主应用中添加/subapp来访问子应用，但是这个并不是我们主应用