// 给该应用起个名字entry:"//localhost:1111",// micro-app-1 项目的运行地址container:"#app1",// micro-app-1 应用挂载的 dom 节点activeRule:"/micro-app1",// 在主应用访问 /micro-app1 加载子应用},{name:"qiankun-app2",entry:"//localhost:2222",container:"#app2",active...
第一种是qiankun官方提供的通信方式 -Actions通信,适合业务划分清晰,比较简单的微前端应用,一般来说使用第一种方案就可以满足大部分的应用场景需求。 第二种是基于redux实现的通信方式 -Shared通信,适合需要跟踪通信状态,子应用具备独立运行能力,较为复杂的微前端应用。 Actions通信 我们先介绍官方提供的应用间通信方式 ...
qiankun 是一个基于single-spa的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。 qiankun 的核心设计理念 🥄 简单,由于主应用微应用都能做到技术栈无关,qiankun 对于用户而言只是一个类似 jQuery 的库,你需要调用几个 qiankun 的 API 即可完成应用的微前端改造。同时由于 qiankun ...
微前端的核心目标是将巨石应用拆解成若干可以自治的松耦合微应用,而 qiankun 的诸多设计均是秉持这一原则,如 HTML entry、沙箱、应用间通信等。这样才能确保微应用真正具备 独立开发、独立运行 的能力。 为什么不是iframe? 如果不考虑体验问题,iframe是微前端的最优解 iframe 最大的特性就是提供了浏览器原生的硬隔...
那什么是 qiankun 呢? qiankun 是一个基于 single-spa 的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。 什么是微前端 微前端架构具备以下几个核心价值: 技术栈无关 主框架不限制接入应用的技术栈,微应用具备完全自主权 ...
解释:自动加载微应用,一开始就把所有微应用加载到qiankun框架 loadMicroApp函数 解释:手动加载微应用,按需把对应的微应用加载到qiankun框架。 这个函数可以缓存当前某个组件,就像vue的keep-alive一样,不会销毁这个组件。 延伸: registerMicroApps函数一定要等挂载DOM元素加载完才调用start函数。 预加载 qiankun框架的预...
微前端的实现方案有很多,比较流行的是 single-spa 以及对它做了一层封装的 qiankun。 今天我们就来了解下这两个微前端实现方案: single-spa 微前端的基本需求就是在 url 变化的时候,加载、卸载对应的子应用,single spa 就实现了这个功能。 它做的事情就是注册微应用、监听 URL 变化,然后激活对应的微应用: ...
首先,确保主项目安装了qiankun: npm install qiankun 然后在主项目的页面文件中配置qiankun,手动加载项目B: import { loadMicroApp, start } from 'qiankun' const renderEl = ref() const loading = ref(true) const microApp = ref() onMounted(() => { microApp.value = loadMicroApp( { name: '...
qiankun(乾坤)就是一款由蚂蚁金服推出的比较成熟的微前端框架,基于single-spa进行二次开发,用于将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。(见下图) 那么,话不多说,我们的源码解析正式开始。 初始化全局配置 -start(opts) 我们从两...
1)基座qiankun-base配置 项目创建好后我们首先进行主应用qiankun-base的配置,进入man.js文件进行配置, 在main.js中加入以下代码,要注意的是,entry这项配置是我们两个子项目的域名和端口,我们必须确保两字子项目运行在这两个端口上面,container就是我们的容器名,就是我们子应用挂载的节点,相当于Vue项目里面的app节点...