微前端micro-app

系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机

对于微前端架构而言，管理多个子应用带来了前所未有的灵活性，但也对资源的加载和使用效率提出了更高要求。假设你的微前端项目就像一场电影，而子应用是场景或演员。

rabbit_it·2024-09-15 17:12

基于微前端qiankun的多页签缓存方案实践

本文梳理了基于阿里开源微前端框架qiankun，实现多页签及子应用缓存的方案，同时还类比了多个不同方案之间的区别及优劣势，为使用微前端进行多页签开发的同学，提供一些参考。一、多页签是什么？

JavaMonsterr·2024-09-10 01:25

基于 React & TypeScript & Webpack 的微前端应用模板

m-fe/react-ts-webpack在Web开发导论/微前端与大前端一文中，笔者简述了微服务与微前端的设计理念以及微前端的潜在可行方案。

weixin_33806300·2024-09-08 02:48

【微前端】ReactJS实现微前端的代码架构

【微前端】ReactJS实现微前端的代码架构目录【微前端】ReactJS实现微前端的代码架构通用步骤基于微前端的应用典型树结构：示例代码Webpack设置：Babel设置：配置Webpack别名：依赖管理

小涵·2024-09-08 01:43

使用脚本一键打包并上传docker镜像

笔者搞了一年多微前端项目，一个团队管理十个微应用，换成docker镜像部署后，发布操作一下从原来的脚本直连服务器的1分钟变成了几十分钟，尤其上传每个应用到各自的阿里云仓库。

春深是蔚蓝·2024-09-03 11:09

项目搭建使用qiankun（乾坤），入门篇，以及遇到的坑与解决

微前端架构具备以下几个核心价值：技术栈无关主框架不限制接入应用的技术栈，微应用具备完全自主权独立开发、独立部署微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新增量升级在面对各种复杂场景时

喂！大掌柜·2024-08-30 11:02

普元EOS-微前端的base基座介绍

1前言微前端开发的时候要使用base基座。这个base基座到底是什么？base基座能提供哪些功能？本文将进行简单的介绍。

小崔爱读书·2024-08-26 11:19

微前端插件 v-micro-app-plugin

v-micro-app-plugin是一款基于京东MicroApp框架的微前端插件，旨在帮助开发者快速地将微应用集成到不同的系统中，实现高效、灵活的前端模块化开发。

小白探索世界欧耶！~·2024-08-23 03:11

micro-app的简单学习

简述本文承接上一篇手把手教你使用vue2搭建micro-app对micro-app进行简单的认识与学习。

笑到世界都狼狈·2024-02-20 04:48

京东开源项目micro-app初体验

文章目录关于micro-app一、micro-app使用版本以及使用场景？

辣鸡队员·2024-02-20 04:48

micro-app 前端微服务 demo项目

文章目录一、创建项目二、主应用三、vue微应用四、react微服务一、创建项目本文使用react项目作为主应用。一个vue项目、一个react项目作为微应用。1.创建主应用react项目：micro-app-base，输入cmd命令create-react-appmicro-app-base2.创建微应用1vue项目：micro-app-vue，输入cmd命令vuecreatemicro-app-

碳酸水123·2024-02-20 04:48

micro-app以UMD js链接方式引入使用

npm下载好micro-zoe/micro-app后，找到index.umd.js：新建一个测试html，引入并使用：参考：微组件实践-掘金

aceaddi·2024-02-20 04:14

微前端qiankun从头写一个demo，包含主微应用、微微应用通信用例

文章目录qiankun微前端demo说明1.路由说明：1.1hash路由：1.2history路由：路由切换2.LifeCycles:3.父子通讯3.1主应用与微应用的通信3.2微应用之间的通信4.手动加载微应用

Yoyo_Yan·2024-02-20 02:58

个人简历补充

个人简历补充1.对工作的认识2.八股文和知识面3.框架/架构角度深扒3.1前端3.1.1mPaaS（移动领域）3.1.2普通前端项目框架3.1.3微前端3.2后端持续更新1.对工作的认识2.八股文和知识面前端

Xiaobaiforgod·2024-02-19 12:02

基于 qiankun 的微前端最佳实践（图文并茂） - 应用部署篇

micro-app写在开头微前端系列文章：基于qiankun的微前端最佳实践（万字长文）-从0到1篇基于qiankun的微前端最佳实践（图文并茂）-应用部署篇基于qiankun的微前端最佳实践（图文并茂

明源云链前端团队·2024-02-15 05:44

DDD学习笔记---从后端到前端：微服务后，前端如何设计？

从单体前端到微前端为了解决单体前端的问题，我们可以借鉴微服务的设计思想，引入微前端概念。将微服务理念扩展到前端，解决中台微服务化后，前端由于仍为单体而存在的逻辑复杂和臃肿的问题。

激流勇进_·2024-02-07 00:44

qiankun 微前端介绍、安装

文章目录一、介绍什么是微前端微前端架构具备以下几个核心价值：qiankun的核心设计理念它是如何工作的为什么不是iframe特性二、快速上手主应用1.安装qiankun2.在主应用中注册微应用微应用1.

南乔几经秋_·2024-02-06 00:07

micro-app（微前端框架）

https://gitee.com/helibin/micro-appmicro-app是京东零售推出的一款微前端框架，它基于类WebComponent进行渲染，从组件化的思维实现微前端，旨在降低上手难度

朱朱是个小太阳·2024-02-05 16:36

京东微前端框架MicroApp简介

一、MicroApp1.1MicroApp简介MicroApp是由京东前端团队推出的一款微前端框架，它从组件化的思维，基于类WebComponent进行微前端的渲染，旨在降低上手难度、提升工作效率。

xiangzhihong8·2024-02-04 16:37

nuxt.config.js 配合微前端qiankun打包配置

constCompressionPlugin=require('compression-webpack-plugin')consttimeStamp=newDate().getTime();exportdefault{/***Nuxtrenderingmode**Seehttps://nuxtjs.org/api/configuration-mode*/mode:'spa',ssr:false,/

小贵子的博客·2024-02-03 12:02

less的使用小技巧以及vite 如何配置less全局变量

1.变量-属性可用于统一修改，比如特殊节日置灰等@primaryColor:#f2f2f2;//使用color:@primaryColor2.变量-选择器添加项目标识(可用于微前端的样式隔离)@nameSpace

原谅我不够洒脱·2024-02-01 11:00

single-spa原理

single-spa原理也大同小异，也可以类比的理解为一种模块化开发的单页应用，只不过在单项目的单页应用中划分的模块是各种组件，而在微前端中各个模块就是各个独立的子

Icewen·2024-02-01 06:24

vite + postcss-prefix-selector 增加统一作用域

在前端开发中，随着项目规模的扩大，特别是在使用微前端架构后，基座应用和子应用之间的样式冲突和作用域管理成为了一项挑战。

天問_·2024-01-31 10:42

第十章（应用场景篇） Single-SPA微前端架构深度解析与实践教程

文章目录Single-SPA微前端架构深度解析与实践教程1、Single-SPA介绍2.1Single-SPA是什么2.2Single-SPA的特点2、Single-SPA核心原理3.1路由机制3.2生命周期管理

球球不吃虾·2024-01-31 08:24

第九章（应用场景篇）Qiankun微前端深度解析与实践教程

文章目录Qiankun微前端深度解析与实践教程引言一、微前端概述二、Qiankun简介三、Qiankun核心原理四、Qiankun实践1.创建主应用2.注册子应用3.路由配置4.子应用开发5.应用通信五

球球不吃虾·2024-01-31 08:49

第八章（应用场景篇）中大型项目的解构：从单体应用到微前端

文章目录中大型项目的解构：从单体应用到微前端一、从单体应用到微前端1.1单体应用的困境1.2微前端的优势1.3解构过程二、案例分析3.1项目背景3.2解构过程1.项目分析2.架构设计3.技术选型1.主应用配置

球球不吃虾·2024-01-30 22:58

微前端（qiankun）使用手册

qiankun是一个基于single-spa的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。

StoneHui·2024-01-29 18:06

什么是微前端？

微前端是什么？微前端是一种多个团队通过独立发布功能的方式来共同构建现代化Web应用的技术手段及方法策略。

StoneHui·2024-01-29 17:27

微前端框架MicroApp 1.0正式发布

介绍MicroApp是由京东前端团队推出的一款微前端框架，它从组件化的思维，基于类WebComponent进行微前端的渲染，旨在降低上手难度、提升工作效率。

京东零售技术·2024-01-29 10:02

微前端与单页面应用：如何将两种架构结合

1.背景介绍在现代网络应用中，微服务和单页面应用(SPA)是两种非常常见的架构设计。微服务架构是一种分布式系统的架构，其中系统被分解为多个小的服务，这些服务可以独立部署和扩展。而单页面应用则是一种前端架构，其中整个应用程序运行在一个页面上，使用JavaScript进行动态更新。在某些情况下，我们可能需要将这两种架构结合在一起。例如，我们可能希望将微服务架构与单页面应用的优势结合在一起，以实现更高效

OpenChat·2024-01-27 15:42

深度挖掘：前端架构设计与现代化实践

前端架构设计组件化架构与微前端当谈到前端架构设计时，组件化架构和微前端不可避免地成为热门话题。组件化架构通过将应用程序分解为独立可复用的组件，实现了在大型应用中更好的组织和管

zhong_333·2024-01-26 10:33

第六章（原理篇）微前端间的通信机制

文章目录微前端间的通信机制通信需求常用的通信方式1.CustomEvent2.Redux3.消息总线（MessageBus）4.本地存储（LocalStorage/SessionStorage）5.跨文档通信

球球不吃虾·2024-01-26 09:18

第七章（原理篇）微前端技术之依赖管理与版本控制

文章目录依赖管理与版本控制微前端的依赖挑战1.依赖冲突2.依赖重复加载3.依赖的兼容性依赖管理策略1.集中式依赖管理2.分布式依赖管理3.依赖预加载4.使用微前端框架QiankunSingle-SPA示例和最佳实践版本控制与冲突解决

球球不吃虾·2024-01-26 09:18

第四章（原理篇）前端容器技术

文章目录前端容器技术容器技术的概念主流前端容器介绍（如[Single-SPA](https://single-spa.js.org/docs/getting-started-overview)）核心特性工作原理实现方式案例分析代码示例容器与微前端的关系前端容器技术容器技术的概念在计算机科学中

球球不吃虾·2024-01-26 09:48

第五章（原理篇）微前端技术之模块联邦与动态加载

（ModuleFederation）第一步：设置Webpack配置在应用1（App1）中在应用2（App2）中第二步：编写和暴露模块第三步：在应用2中使用暴露的模块第四步：启动应用动态加载与代码拆分在微前端中的应用案例分析代码示例

球球不吃虾·2024-01-26 09:41

vue+qiankun微前端项目（搭建,路由跳转，父子之间相互通信）

话不多说，直接上货首先创建两个项目，一个作为项目基座（vue-qiankun-base），一个作为子应用（vue-qiankun-app1）搭建基座及配置安装qiankun依赖到基座npmiqiankun-S需要注意的几点:1.新增public-path.js文件，用于修改运行时的publicPath什么是运行时的publicPath？2.微应用建议使用history模式的路由，需要设置路由bas

养樂多_566c·2024-01-25 19:57

第一章微前端介绍与背景

文章目录微前端介绍与背景什么是微前端？

球球不吃虾·2024-01-25 03:55

第二章微前端与单体前端对比

文章目录第二章微前端与单体前端对比单体前端的挑战微前端的优势与劣势优势劣势适用场景分析单体前端适用场景微前端适用场景案例分析：某大型电商平台的架构演进第二章微前端与单体前端对比随着Web应用的发展，前端开发所面临的挑战也在不断增多

球球不吃虾·2024-01-25 03:24

微前端（wujie）使用手册

StoneHui·2024-01-23 12:54

微前端小记

步骤将普通的项目改造成qiankun主应用基座，需要进行三步操作：1.创建微应用容器-用于承载微应用，渲染显示微应用；a.设置路由routeb.主应用的布局包括：主应用菜单，用于渲染菜单主应用渲染区域，在触发主应用路由规则时候，$route.name,将渲染主应用的组件微应用渲染区。在未触发主应用路由规则时2.注册微应用-设置微应用激活条件，微应用地址等等；在构建好了主框架后，我们需要使用qian

零零历险记·2024-01-22 14:03

微前端-无界wujie

无界微前端方案基于webcomponent容器+iframe沙箱，能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite框架支持、应用共享等用户的核心诉求。

前端大颖颖·2024-01-22 12:52

微前端框架篇一，了解qiankun

微前端框架篇一，了解qiankun①前置知识补充Ⅰ什么是微前端？Ⅱ什么是JSCSS沙箱？Ⅲ什么是spa单页面应用？

Dormiveglia-flx·2024-01-22 07:56

微前端：一种新型的前端架构方法

微前端是一种新型的前端架构方法，它将单页面应用程序拆分为一系列小型、独立的应用程序。本文将介绍微前端的背景、概念、特点、应用场景和与其他前端架构的对比，以帮助读者更好地理解微前端的概念和实践。

番茄大大~·2024-01-22 06:07

微前端框架

一、single-spa前端微服务的javascript框架https://zh-hans.single-spa.js.org/框架自由在单页应用程序中使用多个框架，从而使您可以按功能拆分代码，并使Angular，React，Vue.js等应用程序和谐共处。延迟加载应用在旧应用程序旁边站起来。您编写应用程序后，单spa使它们可以协同工作，并且在需要它们之前不会加载它们。前端微服务结合许多小型应用程

承诺一时的华丽·2024-01-19 15:57

使用 qiankun 集成应用时，出现的部分错误及解决方案

erroroccurswhileexecutingentryscript2.在子应用中，监听浏览器窗口变化3.手动加载微应用报错single-spaminifiedmessage#31，see...4.打包微前端项目后

zlfjavahome·2024-01-18 16:52

乾坤微前端优化（二）

在乾坤微前端优化（一）的基础上再次进行了优化，本次优化的是子模块共同的配置，以及dll包。

best-toby·2024-01-18 13:51

七个步骤教你快速入门搭建一个 micro-app微前端简单上手

vue2+vue2子应用基座应用代码1、安装依赖npmi@micro-zoe/micro-app--save2、在入口引入//main.jsimportmicroAppfrom'@micro-zoe/micro-app

昵称老重复·2024-01-17 07:49

使用micro-app将现有项目改造成微前端，对现有项目实现增量升级

使用micro-app将现有项目改造成微前端，对现有项目实现增量升级基座应用1、安装依赖npmi@micro-zoe/micro-app--save2、在入口引入//main.jsimportmicroAppfrom