当前位置: 首页 > news >正文

微前端框架的实战demo

以下是基于主流微前端框架的实战 Demo 开发指南,综合多个开源项目与实践案例整理而成:


一、qiankun 框架实战

1. 核心架构
  • 主应用:负责路由分发、子应用注册与生命周期管理
  • 子应用:独立开发部署,支持不同技术栈(Vue/React/Angular)
2. 快速搭建步骤
  1. 主应用配置(Vue 示例):

    // main.js
    import { registerMicroApps, start } from 'qiankun';
    registerMicroApps([{name: 'vue-sub',entry: '//localhost:7100', // 子应用入口container: '#subapp-container', activeRule: '/vue',props: { token: '主应用传递的数据' } // 父子通信参数}
    ]);
    start({ prefetch: 'all' });
    
  2. 子应用改造

    • 入口文件需暴露生命周期钩子:
      export async function bootstrap() { /* 初始化 */ }
      export async function mount(props) { // 挂载逻辑,props 接收主应用参数render(props.container || document.getElementById('app'));
      }
      export async function unmount() { /* 卸载逻辑 */ }
      
    • Webpack 配置
      // vue.config.js
      module.exports = {devServer: { headers: { 'Access-Control-Allow-Origin': '*' } },configureWebpack: { output: { library: 'vueSub', libraryTarget: 'umd' } }
      };
      
3. 通信机制
  • 主应用初始化全局状态:
    import { initGlobalState } from 'qiankun';
    const actions = initGlobalState({ user: 'admin' });
    actions.onGlobalStateChange((state, prev) => { /* 监听变化 */ });
    
  • 子应用通过 props 获取并更新状态:
    props.onGlobalStateChange((state) => { /* 子应用监听 */ });
    props.setGlobalState({ ...state, newData: 'value' });
    

二、micro-app 框架实战

1. 多技术栈集成
  • 支持框架:Angular、Next.js、Nuxt.js、React、Vue3(Vite)
  • 项目结构
    micro-app-demo/
    ├── main-app/        # 主应用(React)
    ├── child-apps/
    │   ├── angular11/  # Angular 子应用
    │   └── vite-vue3/  # Vite + Vue3 子应用
    
2. 动态加载子应用
<!-- 主应用通过 Web Component 标签加载 -->
<micro-app name="vue3-app" url="http://localhost:3001"baseroute="/vue3"
></micro-app>
3. 样式隔离
  • 默认启用 Shadow DOM 隔离 CSS
  • 通过 disableScopecss 属性关闭隔离

三、自研微前端框架进阶

1. 核心功能实现
  • 沙箱隔离:通过 Proxy 代理 window 对象
    class Sandbox {constructor() { this.proxy = new Proxy(window, { /* 拦截操作 */ }); }
    }
    
  • 路由拦截:重写 history.pushStatepopstate 事件
    window.history.pushState = patchedPushState;
    window.addEventListener('popstate', handleRouteChange);
    
2. 多子应用并行加载
// 同时加载 React15 和 Vue2 子应用
loadApp({ name: 'react15', entry: '//localhost:9002' });
loadApp({ name: 'vue2', entry: '//localhost:9004' });
3. 性能优化
  • 预加载:提前加载子应用静态资源
  • 缓存策略:对已加载子应用保留 DOM 和 JS 上下文

四、常见问题解决方案

  1. 路由冲突

    • Hash 模式:主应用与子应用统一使用 #/subapp/ 前缀
    • History 模式:通过 base 参数设置子应用路由基准路径
  2. CSS 污染

    • 使用 postcss 插件添加命名空间(如 postcss-prefix-selector
    • 动态卸载子应用样式表
  3. 资源加载失败

    • 确保子应用配置 publicPath 动态注入
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
    

五、完整 Demo 推荐

  1. qiankun 官方示例

    • 包含 Vue + React 子应用集成
    • 源码:https://github.com/umijs/qiankun-example
  2. micro-app 多框架 Demo

    • 支持 Angular、Next.js、Nuxt.js 等
    • 项目地址:https://github.com/micro-zoe/micro-app-demo
  3. 阿里云实践案例

    • 实现沙箱隔离、全局状态管理
    • 代码仓库:https://code.alibaba-inc.com/microFE-demo

通过以上案例,开发者可快速掌握微前端核心场景的实现方法。建议从 qiankun 或 micro-app 的官方示例入手,逐步深入定制化需求。

相关文章:

微前端框架的实战demo

以下是基于主流微前端框架的实战 Demo 开发指南&#xff0c;综合多个开源项目与实践案例整理而成&#xff1a; 一、qiankun 框架实战 1. 核心架构 主应用&#xff1a;负责路由分发、子应用注册与生命周期管理子应用&#xff1a;独立开发部署&#xff0c;支持不同技术栈&#…...

win32汇编环境,网络编程入门之九

;在上一教程里&#xff0c;我们学习了在连接成功网站后&#xff0c;应该发送什么数据给网站 ;在前面的几个教程里&#xff0c;简单地运行了套接字机制连接网站的方式&#xff0c;这是字节级的网络连接&#xff0c;扩展几乎是无限的。 ;想了想&#xff0c;这个开个头就行了&…...

OceanBase 4.3.3 AP 解析:应用 RoaringBitmaps 类型处理海量数据的判重和基数统计

对于大数据开发人员而言&#xff0c;处理海量数据的判重操作和基数统计是常见需求&#xff0c;而 RoaringBitmap类型及其相关函数是当前非常高效的一种解决方案&#xff0c;许多大数据库产品已支持RoaringBitmap类型。OceanBase 4.3.3版本&#xff0c;作为专为OLAP场景设计的正…...

点亮STM32最小系统板LED灯

对于如何点亮板载LED灯只需要掌握如何初始化GPIO引脚&#xff0c;并改变GPIO引脚的电平即可实现点亮或者熄灭LED。 Led_INFO led_info {0}; led_info 是一个结构体变量&#xff0c;类型为 Led_INFO&#xff0c;用于存储LED的状态信息。这里初始化为 {0}&#xff0c;表示所有成…...

分区表的应用场景与优化实践

当表的数据量非常大,达到几千万甚至上亿行时,全表扫描会很慢,这时候分区可以帮助缩小扫描范围。比如,在一个电商系统中,订单表可能按月份分区,这样查询某个月的订单时,只需要扫描对应的分区,而不是整个表。或者在日志系统中,按天分区,方便归档和删除旧日志。 另外,如…...

如何高效参与 GitHub 知名项目开发并成为核心贡献者

参与知名 GitHub 项目开发不仅能提升你的编程能力&#xff0c;还能积累开源贡献经验&#xff0c;甚至为求职加分。以下是详细步骤&#xff1a; 1. 选择合适的 GitHub 项目 (1) 确定兴趣方向 后端开发&#xff1a;Spring、Spring Boot、Netty前端开发&#xff1a;React、Vue、…...

AIGC 新势力:探秘海螺 AI 与蓝耘 MaaS 平台的协同创新之旅

探秘海螺AI&#xff1a;多模态架构下的认知智能新引擎 在人工智能持续进阶的进程中&#xff0c;海螺AI作为一款前沿的多功能AI工具&#xff0c;正凭借其独特的多模态架构崭露头角。它由上海稀宇科技有限公司&#xff08;MiniMax&#xff09;精心打造&#xff0c;依托自研的万亿…...

银河麒麟桌面版包管理器(三)

以下内容摘自《银河麒麟操作系统进阶应用》一书 麒麟系统软件源配置 使用官方内置源时&#xff0c;无须任何操作。仅在使用其他镜像源&#xff08;Mirror&#xff09;时&#xff0c;需要修改/etc/apt/sources.list文件&#xff0c;根据不同版本&#xff0c;将原始sources.lis…...

在 .NET 9.0 Web API 中实现 Scalar 接口文档及JWT集成

示例代码&#xff1a;https://download.csdn.net/download/hefeng_aspnet/90408075 介绍 随着 .NET 9 的发布&#xff0c;微软宣布他们将不再为任何 .NET API 项目提供默认的 Swagger gen UI。以前&#xff0c;当我们创建 .NET API 项目时&#xff0c;微软会自动添加 Swagger…...

XSS跨站脚本攻击漏洞(Cross Site Scripting)

前提概要 本文章主要用于分享XSS跨站脚本攻击漏洞基础学习&#xff0c;以下是对XSS跨站脚本攻击漏洞的一些个人解析&#xff0c;请大家结合参考其他文章中的相关信息进行归纳和补充。 XSS跨站脚本攻击漏洞描述 跨站脚本攻击&#xff08;XSS&#xff09;漏洞是一种常见且危害较…...

Android:蓝牙设置配套设备配对

一、概述 在搭载 Android 8.0&#xff08;API 级别 26&#xff09;及更高版本的设备上&#xff0c;配套设备配对会代表您的应用对附近的设备执行蓝牙或 Wi-Fi 扫描&#xff0c;而不需要 ACCESS_FINE_LOCATION 权限。这有助于最大限度地保护用户隐私。使用此方法执行配套设备&am…...

MFC中CString类型是如何怎么转std::string的

文章目录 一、转换方法总结二、详细步骤1. Unicode 项目&#xff08;CStringW → std::string&#xff09;2. 多字节项目&#xff08;CStringA → std::string&#xff09; 三、注意事项四、总结更多信息(知识点存在重复&#xff0c;可跳过)方法 1&#xff1a;项目使用 Unicode…...

使用vscode搭建pywebview集成vue项目示例

文章目录 前言环境准备项目源码下载一、项目说明1 目录结构2 前端项目3 后端项目获取python安装包(选择对应版本及系统) 三、调试与生成可执行文件1 本地调试2 打包应用 四、核心代码说明1、package.json2、vite.config.ts设置3、main.py后端入口文件说明 参考文档 前言 本节我…...

JAVASCRIPT 基础 DOM元素,MAP方法,获取输入值

从输入框获取数据的一般写法是&#xff1a; javascript const w parseFloat(document.getElementById("weight").value); const h parseFloat(document.getElementById("height").value); 而从弹窗获取数据一般写法是&#xff1a; javascript const w …...

VLAN间通信

目录 第一步&#xff1a;配vlan 第二步&#xff1a;配置核心vlanif,MAC地址信息。 第三步&#xff1a;ospf协议 三层交换机&#xff08;汇聚层&#xff09;: 对于交换机、路由器、防火墙等网络设备而言&#xff0c;接口类型一般存在两种&#xff1a;二层接口&#xff0c;三…...

MySQL颠覆版系列————MySQL新特性(开启数据库的新纪元)上篇

文章目录 前言一、窗口函数&#xff08;Window Functions&#xff09;1.1 窗口函数概念1.2 常见的窗口函数 二、公用表表达式&#xff08;Common Table Expressions, CTEs&#xff09;2.1 公用表表达式的概念2.2 常见的公用表表达式 三、JSON增强3.1 JSON增强的概念3.2 常见的J…...

5.安全相关(双手启动、安全触边传感器)

一、关于双手启动按钮的使用规范 本文介绍双手启动按钮的使用。概括来讲&#xff1a; 双手按下之间的时间差间隔应该在0.5-2秒之间。一旦释放任何一个按钮&#xff0c;启动信号输出结束。只有两个按钮都被释放之后&#xff0c;才能再次触发双手启动信号。如果某按钮被按下超过…...

国产达梦(DM)数据库的安装(Linux系统)

目录 一、安装前的准备工作 1.1 导包 1.2 创建用户和组 1.3 修改文件打开最大数 1.4 目录规划 1.5 修改目录权限 二、安装DM8 2.1 挂载镜像 2.2 命令行安装 2.3 配置环境变量 2.4 启动图形化界面 三、配置实例 四、注册服务 五、启动 停止 查看状态 六、数据库客…...

mapper.xml中 “http://mybatis.org/dtd/mybatis-3-mapper.dtd“> 报错的解决方法

我用mybatisx自动生成代码&#xff0c;但是mapepr.xml中的 "http://mybatis.org/dtd/mybatis-3-mapper.dtd">报错&#xff0c;如下图&#xff0c;圈起来的部分是之前的报错&#xff0c;现在已经解决&#xff0c;所以没有爆红&#xff1a; 解决方法&#xff1a;…...

01_JavaScript

目录 一、js介绍、能做什么 --了解 二、JavaScript的组成-重点 三、JavaScript代码的书写位置 行内JS 内嵌 JS 外链 JS 四、JS 中的注释 单行 多行 五、变量&#xff08;重点&#xff09; 定义变量及赋值 变量的命名规则和命名规范 六、数据类型&#xff08;重…...

数组作为哈希表的妙用:寻找缺失的第一个正数

数组作为哈希表的妙用&#xff1a;寻找缺失的第一个正数 大家好&#xff0c;我是Echo_Wish&#xff0c;今天我们来探讨一个经典的算法问题——“缺失的第一个正数”。听起来可能有点简单&#xff0c;但它实际上是一个非常有意思且富有挑战性的题目&#xff0c;在面试中常常会碰…...

JAVA学习*Object类

Object类 Object类是所有类的父类 类中有一些方法&#xff08;都需要掌握&#xff09; toString()方法 在学习类的对象的时候有介绍过了&#xff0c;当我们重新给此方法就会打印类与对象的信息 equals()方法 在Java中的比较&#xff0c; 如果左右两侧是基本类型变量&#…...

《论语别裁》第02章 为政(03)星辰知多少

第二个问题说到“北辰”。我们中国文化发达得最早的是天文。过去我们把天体分成二十八宿和三垣——紫微、少微、太微&#xff0c;类似于我们现在讲天文的经纬度。经纬度是西方的划分法。曾经有位天文学家主张&#xff0c;我们自己重新划过&#xff0c;不照西方的度数划&#xf…...

git_version_control_proper_practice

git_version_control_proper_practice version control&#xff0c;版本控制的方法之一就是打tag 因为多人协作的项目团队&#xff0c;commit很多&#xff0c;所以需要给重要的commit打tag&#xff0c;方便checkout&#xff0c;检出这个tag 参考行业的实践方式。如图git、linux…...

playwright-go实战:自动化登录测试

1.新建项目 打开Goland新建项目playwright-go-demo 项目初始化完成后打开终端输入命令&#xff1a; #安装项目依赖 go get -u github.com/playwright-community/playwright-go #安装浏览器 go run github.com/playwright-community/playwright-go/cmd/playwrightlatest insta…...

手机扫描仪 含PDF转word功能+OCR识别110种语言

TapScanner Premium 是一款功能强大的手机扫描仪应用&#xff0c;支持 PDF 合并、分割以及转换为 Word 文档格式&#xff0c;还具备 OCR 识别功能&#xff0c;可识别 110 种语言。汉化中文且已激活全部功能&#xff0c;可免费使用。 该应用操作简洁&#xff0c;扫描文档、收据…...

数据可视化在商业智能中的应用:从数据到洞察的桥梁

数据可视化在商业智能中的应用:从数据到洞察的桥梁 大家好,我是Echo_Wish。今天,我们来探讨一个数据领域的热门话题——数据可视化在商业智能中的应用。在数据驱动的时代,如何从海量的数字和信息中提炼出有价值的洞察,成为了企业决策的关键。而数据可视化,正是将枯燥的数…...

【HarmonyOS Next的奇幻大冒险】DevEco Studio的AI助手CodeGenie挺好用

遇到些问题在官网搜不出答案&#xff0c;CodeGenie都给解决了&#xff01; 不过我的问题可能比较初级&#xff0c;往后再看看它的能力怎么样 下面的截图是关于其中一个问题的对话。可见CodeGenie干脆利索&#xff0c;并且给出了相关知识点在官网上的参考信息链接&#xff0c;大…...

替代-UX设计师

初创公司如何在没有设计师的情况下 打造实用的用户体验 一个常见的捷径是使用预构建的组件库&#xff0c;如谷歌的 Material UI它们为你提供了构建块&#xff0c;但它们并没有为你考虑整个用户流程你仍然需要弄清楚所有这些是如何组合在一起的但是&#xff0c;很多时候&#x…...

ISIS-1 ISIS概述

前面几章我们介绍了OSPF的基础工作原理以及怎样交互LSA形成LSDB链路状态数据库的 这一章我们来介绍另一个链路状态路由协议,ISIS路由协议 一、概述 ISIS(Intermediate System to Intermediate System,中间系统到中间系统)是由ISO(International Organization for Standardiza…...

电脑上不了网普通用户排除方法

1&#xff1a;首先通过电脑的运行/CMD/ipconfig /all 命令查看电脑的ip地址是否正常如图&#xff1a; 2&#xff1a;在命令行中运行&#xff1a;ping 127.0.0.1 如图则正常&#xff0c;否则要重新安装网卡驱动 程序。 3&#xff1a;用ping命令&#xff0c;ping一下同网段的电…...

Qt 控件概述 QLCDNumber 和 Progressbar

目录 QLCDNumber 进度条 定时器进度条的实现 通过stylesheet来改变进度条颜色​ QLCDNumber LCD数字显示器 实现一个定时器 QLCDNumber 进度条 定时器进度条的实现 为什在Widget.h种头文件并没有包含QTimer这个头文件&#xff0c;却还可以申明一个TImer指针呢&#xff1f;…...

2025.03.21首板涨停股票分析

目录 1 涨停原因分析2 交易建议 1 涨停原因分析 2 交易建议...

数据库的DDL操作

目录 一、创建数据库 &#xff08;1&#xff09;字符集和校验集 二、操作数据库 &#xff08;1&#xff09;查看数据库 &#xff08;2&#xff09;显示创建语句 &#xff08;3&#xff09;修改数据库 &#xff08;4&#xff09;删除数据库 三、数据库的备份与恢复 四、…...

Docker 部署 Graylog 日志管理系统

Docker 部署 Graylog 日志管理系统 前言一、准备工作二、Docker Compose 配置三、启动 Graylog 服务四、访问 Graylog Web 界面总结 前言 Graylog 是一个开源的日志管理平台&#xff0c;专为实时日志收集、分析和可视化设计。它支持强大的搜索功能&#xff0c;并且与 Elastics…...

特征工程自动化(FeatureTools实战)

目录 特征工程自动化(FeatureTools实战)1. 引言2. 项目背景与意义2.1 特征工程的重要性2.2 自动化特征工程的优势2.3 工业级数据处理需求3. 数据集生成与介绍3.1 数据集构成3.2 数据生成方法4. 自动化特征工程理论基础4.1 特征工程的基本概念4.2 FeatureTools库简介4.3 关键公…...

Linux:xxx is not in the sudoers file. This incident will be reported.

报错 xxx is not in the sudoers file. This incident will be reported.解决方式 切换到root用户下操作 # 1、修改/etc/sudoers文件为可修改&#xff0c;默认是只读的 ls -lh /etc/sudoers -r--r----- 1 root root 4.3K Dec 1 01:45 /etc/sudoerschmod uw /etc/sudoersls…...

fastapi+playwright爬取google搜索1-3页的关键词返回json

1,playwright无头 2,代理池随机获取代理ip 3,随机浏览行为,随机页面滚动 4,启用stealth模式 5,随机延时搜索 from fastapi import FastAPI, HTTPException from fastapi.responses import JSONResponse import asyncio from concurrent.futures import ThreadPool…...

论文阅读笔记:Denoising Diffusion Probabilistic Models (3)

论文阅读笔记&#xff1a;Denoising Diffusion Probabilistic Models (1) 论文阅读笔记&#xff1a;Denoising Diffusion Probabilistic Models (2) 论文阅读笔记&#xff1a;Denoising Diffusion Probabilistic Models (3) 4、损失函数逐项分析 可以看出 L L L总共分为了3项…...

FlauBERT:面向法语的无监督语言模型预训练

摘要 语言模型已成为在许多不同自然语言处理&#xff08;NLP&#xff09;任务中取得最先进成果的关键步骤。利用当今可用的大量未标注文本&#xff0c;它们提供了一种有效的方式来预训练连续词表示&#xff0c;这些表示可以在下游任务中进行微调&#xff0c;并在句子级别上进行…...

JavaScript严格模式

文章主要介绍JavaScript严格模式&#xff0c;包括启用原因、方式以及需避开的常见陷阱&#xff0c;助力开发者写出更健壮代码。 1. 启用原因&#xff1a;将普通JavaScript中的“静默错误”变为抛出错误&#xff0c;有助于编写健壮代码&#xff1b;修复阻碍JavaScript引擎优化的…...

文件上传的小点总结(1)

2.文件类型绕过 问题插入&#xff1a;BP无法拦截本地流量 ①插件限制 不代理的地址列表通常写有localhost和127.0.0.1&#xff0c;把本地的全都删掉&#xff0c;然后应用保存。 ②浏览器限制 Firefox浏览器设置&#xff1a;检查浏览器代理配置和proxy listeners都没问题后&…...

2024年数维杯数学建模B题生物质和煤共热解问题的研究解题全过程论文及程序

2024年数维杯数学建模 B题 生物质和煤共热解问题的研究 原题再现&#xff1a; 随着全球能源需求的不断增长和对可再生能源的追求&#xff0c;生物质和煤共热解作为一种潜在的能源转化技术备受关注。生物质是指可再生能源&#xff0c;源自植物和动物的有机物质&#xff0c;而煤…...

@maptalks/gl-layers中的VectorTileLayer的Symbol样式文档

maptalks/gl-layers中的VectorTileLayer的Symbol样式文档 矢量的Symbol样式分为以下几个大类&#xff1a; marker样式属性&#xff0c;定义了图标相关样式属性 text样式属性&#xff0c;定义了文字相关样式属性 line样式属性&#xff0c;定义了线相关的样式属性 polygon样式属…...

OpenCV旋转估计(3)帮助构建一个最大生成树(Maximum Spanning Tree)函数findMaxSpanningTree()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 cv::detail::findMaxSpanningTree 是 OpenCV 中用于图像拼接工作流的一个函数&#xff0c;它帮助构建一个最大生成树&#xff08;Maximum Spanni…...

OpenCV HighGUI 模块使用指南(Python 版)

用户让我编写一个 HighGUI 模块的使用指南&#xff0c;包括函数的使用和应用场景的实现。首先&#xff0c;我需要回顾 HighGUI 模块的主要功能&#xff1a;图像显示、视频捕获、鼠标和键盘事件。然后&#xff0c;按照用户提供的结构&#xff0c;整理每个部分的函数详解、代码示…...

SPI 机制与 Spring Boot AutoConfiguration 对比解析

一、架构效率革命性提升 1.1 类加载效率跃升 Spring Boot 2.7引入的AutoConfiguration.imports采用清单式配置加载&#xff0c;对比传统SPI机制&#xff1a; 传统SPI扫描路径&#xff1a;META-INF/services/** Spring Boot新方案&#xff1a;META-INF/spring/org.springfram…...

算法基础篇(1)(蓝桥杯常考点)

算法基础篇 前言 算法内容还有搜索&#xff0c;数据结构&#xff08;进阶&#xff09;&#xff0c;动态规划和图论 数学那个的话大家也知道比较难&#xff0c;放在最后讲 这期包含的内容可以看目录 模拟那个算法的话就是题说什么写什么&#xff0c;就不再分入目录中了 注意事…...

【蓝桥杯速成】| 10.回溯切割

前面两篇内容我们都是在做有关回溯问题的组合应用 今天的题目主题是&#xff1a;回溯法在切割问题的应用 题目一&#xff1a;分割回文串 问题描述 131. 分割回文串 - 力扣&#xff08;LeetCode&#xff09; 给你一个字符串 s&#xff0c;请你将 s 分割成一些 子串&#xff…...

【Spring】深入理解 Spring 事务管理

文章目录 一、事务的基本概念​原子性&#xff08;Atomicity&#xff09;一致性&#xff08;Consistency&#xff09;隔离性&#xff08;Isolation&#xff09;持久性&#xff08;Durability&#xff09; 二、Spring 事务管理的优势​简化事务管理代码提供多种事务管理方式整合…...