微前端开源框架
1. Qiankun
- 简介：【阿里巴巴】开源的微前端框架，支持多技术栈、路由管理、沙箱隔离、应用通信等功能，并提供丰富的插件生态。
- 基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。
- 官网：https://qiankun.umijs.org/zh
- 开源地址：https://github.com/umijs/qiankun
- 微应用乾坤路由原理简析 - 掘金 (juejin.cn)
使用qiankun微前端框架
1.新建项目目录：qiankun
然后在qiankun目录中新建三个项目。项目名称，如：
- base：主应用（qiankun的安装和配置：要在主应用——react的话index.tsx入口文件、vue的话在main入口文件）
- micro_app1：微应用1
- micro_app2：微应用2
2.主应用设置
1.主应用安装qiankun库
2.在主应用中注册微应用
3.微应用设置
1.导出相应的生命周期钩子
2.配置微应用的打包工具
4.加载基于什么框架的微应用
加载基于什么框架的微应用看文档：项目实践 - qiankun (umijs.org)
react项目
在微应用中的 src 目录新增 public-path.js，然后在index.tsx入口文件中导入：
typescript
import './public-path.js'使用a标签切换微应用会闪屏，使用路由切换组件就不会。
vue3 + vite项目接入
- 主应用：vue3+vite+ts
- 微应用1：vue2，qiankun官网API是基于vue2+webpack，我们对vue2也进行了接入，但是在本篇文章中不做说明。
- 微应用2：vue3+vite，由于主应用已经是vue3的系统，所以，微应用也决定直接使用vue3框架
07. vue3+vite+qiankun搭建微应用前端框架，并接入vue3微应用_vite-plugin-qiankun-CSDN博客
vite3项目接入qiankun微前端_usedevmode-CSDN博客
微前端-qiankun：vue3-vite 接入 vue3-vite_vue3+vite子应用如何如何接入乾坤微前端-CSDN博客
5.路由和其他生命周期共享配置
API文档：API 说明 - qiankun (umijs.org)
2. Single-Spa
- 简介：最早的微前端框架之一，支持多种技术栈，并提供路由管理、沙箱隔离等功能。
- 官网：https://single-spa.js.org/
- 开源地址：https://github.com/single-spa/single-spa
3. Ice.js
- 简介：【阿里巴巴】基于 React 的应用研发框架，开箱即用，同时支持移动端和桌面端。
- 官网：飞冰 ICE - 基于 React 的应用研发框架 | 飞冰 ICE
- 开源地址：https://github.com/alibaba/ice
4. MicroApp
- 简介：【京东】开源的微前端框架，基于类WebComponent进行微前端的渲染，旨在降低上手难度、提升工作效率。
- 官网：https://cangdu.org/micro-app/
- 开源地址：micro-zoe/micro-app: 一款简约、高效、功能强大的微前端框架 (github.com)
- 使用文章：
无界微前端
- 简介：基于 WebComponent 容器 + iframe 沙箱
- 无界微前端开源地址：https://github.com/Yataozhang/my-single-spa/issues/4
- 官网：无界 | 极致的微前端框架 (wujie-micro.github.io)
- 文档：无界vue-demo展示 (wujie-micro.github.io)
- 介绍：将微前端做到极致-无界微前端方案 - 掘金 (juejin.cn)
- 框架具体原理可以查看：让iframe焕发新生 - 知乎 (zhihu.com)
5. Garfish
- 简介：【字节跳动】开源的微前端框架，支持多技术栈、路由管理、沙箱隔离、应用通信等功能，并提供丰富的插件生态。
- 官网：https://www.garfishjs.org/
- 开源地址：https://github.com/bytedance/garfish
- 文章：字节跳动是如何落地微前端的 - 掘金 (juejin.cn)