微前端:qiankun乾坤基础使用 vue3、vue2、nuxt3、nuxt2
创始人
2024-06-03 12:35:13
0

一、了解qiankun.js

qiankun - qiankun

1.1、简单,任意 js 框架均可使用。微应用接入像使用接入一个 iframe 系统一样简单,但实际不是 iframe。

1.2、完备,几乎包含所有构建微前端系统时所需要的基本能力,如 样式隔离、js 沙箱、预加载等。解耦,与技术无关。

1.3、生产可用,已在蚂蚁内外经受过足够大量的线上系统的考验及打磨,健壮性值得信赖。

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

1.5、qiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台,目前 qiankun 已在蚂蚁内部服务了超过 2000+ 线上应用,在易用性及完备性上,绝对是值得信赖的。

1.6、微前端概念

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

1.7、核心价值:

介绍 - qiankun

1.7.1、技术栈无关:主框架不限制接入应用的技术栈,微应用具备完全自主权

1.7.2、独立开发、独立部署:微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新

1.7.3、增量升级:在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略

1.7.4、独立运行时:每个微应用之间状态隔离,运行时状态不共享

1.8、特性

1.8.1、基于 single-spa 封装,提供了更加开箱即用的 API。

1.8.2、技术栈无关,任意技术栈的应用均可 使用/接入,不论是 React/Vue/Angular/JQuery 还是其他等框架。可以对老jQuery项目进行升级,老业务不变,新页面使用vue3,这样就好了,目前没有看到相关的资料,看到一些资料是遇到问题的,比如全局变量丢失等,待研究。

1.8.3、HTML Entry 接入方式,让你接入微应用像使用 iframe 一样简单。

1.8.4、样式隔离,确保微应用之间样式互相不干扰。

1.8.5、JS 沙箱,确保微应用之间 全局变量/事件 不冲突。

1.8.6、资源预加载,在浏览器空闲时间预加载未打开的微应用资源,加速微应用打开速度。

1.8.7、 umi 插件,提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统。

二、安装

yarn add qiankun

npm i qiankun

pnpm add qiankun

只需要在基座项目安装qiankun,子应用不需要安装。 

三、使用,qiankun官网demo

import { loadMicroApp } from 'qiankun';// 加载微应用
loadMicroApp({name: 'reactApp',entry: '//localhost:7100',container: '#container',props: {slogan: 'Hello Qiankun',},
});

四、实战

项目实践 - qiankun

4.1、vue3,基座项目/主应用/main-app

4.1.1、创建项目

npm init vue@latest

4.1.2、安装乾坤

pnpm add qiankun

4.1.3、main.ts注册微应用

import { registerMicroApps, addGlobalUncaughtErrorHandler, start } from 'qiankun';
// 注册子应用
registerMicroApps([{name: 'subApp',entry: '//localhost:3000',container: '#subAppContainerVue3',  // 和app.vue配置的节点activeRule: '/subAppVue3', // 访问:http://localhost:5174/subAppVue3props: {mag: '我是主应用main' // 主应用向微应用传递参数}}
]);
// 启动 qiankun
start({prefetch:'all', // 预加载sandbox: {experimentalStyleIsolation: true, //   开启沙箱模式,实验性方案},
});
// 添加全局异常捕获
addGlobalUncaughtErrorHandler((handler) => {console.log("异常捕获", handler);
});

4.1.4、app.vue创建挂载节点

经过测试,主应用成功。

4.2、vue3,子应用/sub-app

安装vite-plugin-qiankun(qiankun官方不支持vite)需要安装插件

pnpm add vite-plugin-qiankun

 vite.config.ts

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import qiankun from 'vite-plugin-qiankun'
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(), vueJsx(),qiankun('vue3', {useDevMode: true})],server:{headers: {'Access-Control-Allow-Origin': '*', // 主应用获取子应用时跨域响应头},},resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { renderWithQiankun, qiankunWindow, QiankunProps } from 'vite-plugin-qiankun/dist/helper'
import App from './App.vue'
import router from './router'
import './assets/main.css'const app = createApp(App)app.use(createPinia())
app.use(router)// app.mount('#app')
// renderWithQiankun: 为子应用导出一些生命周期函数 供主应用在特殊的时机调用
// qiankunWindow: qiankunWindow.POWERED_BY_QIANKUN 可判断是否在qiankun环境下
const initQianKun = () => {renderWithQiankun({// bootstrap 只会在微应用初始化的时候调用一次,下次微应用重新进入时会直接调用 mount 钩子,不会再重复触发 bootstrap// 通常我们可以在这里做一些全局变量的初始化,比如不会在 unmount 阶段被销毁的应用级别的缓存等bootstrap() {console.log('bootstrap');},// 应用每次进入都会调用 mount 方法,通常我们在这里触发应用的渲染方法,也可以接受主应用传来的参数mount(_props: any) {console.log('mount', _props);render(_props.container)},// 应用每次 切出/卸载 会调用的unmount方法,通常在这里我们会卸载微应用的应用实例unmount(_props: any) {console.log('unmount', _props);},update: function (props: QiankunProps): void | Promise {console.log('update');}});
}const render = (container) => {// 如果是在主应用的环境下就挂载主应用的节点,否则挂载到本地const appDom = container ? container : "#app"app.mount(appDom)
}
// 判断是否为乾坤环境,否则会报错iqiankun]: Target container with #subAppContainerVue3 not existed while subAppVue3 mounting!
qiankunWindow.__POWERED_BY_QIANKUN__ ? initQianKun() : render(null)

访问微前端应用,访问成功。

4.3、vue2,子应用/sub-app

待补充

4.4、html,子应用/sub-app

待补充

4.5、jQuery,子应用/sub-app

不要对 iframe 抱有偏见,它也是微前端的一种实现方式,如果页面上无弹窗、无全屏等操作,iframe 也是很好用的。配置缓存和 cdn 加速,如果是内网访问,也不会很慢。
iframe 和 qiankun 可以并存,jQuery 多页应用使用 iframe 接入就挺好,什么时候什么场景该用哪种方案,具体情况具体分析。

最后,文章有什么问题或错误欢迎指出,谢谢!

微前端方案 qiankun(实践及总结)--摘抄 - 建站教程

jquery项目嵌入vue3框架_jquery vue3_卷大爷的博客-CSDN博客

4.6、nuxt2,子应用/sub-app

待补充

4.7、nuxt3,子应用/sub-app

待补充

4.8、当子应用同时作为基座应用时

vue3 + vite + qiankun - 简书

五、过程记录

5.1、子应用qiankun做了样式隔离,父子应用样式隔离可以使用如下方法

默认情况下切换应用会采用动态样式表,加载的时候添加样式,删除的时候卸载样式(子应用之家的样式隔离)

主应用和子应用如何隔离(我们通过BEM规范)->(cssmodules)动态生成一个前缀(并不是完全隔离)

shadowDOM video 标签中的 快进 放大功能 增加全局样式就会有问题

六、乾坤项目服务器部署

所有项目,包括基座项目,业务项目都在服务器可以独立部署。

qiankun从接入到部署(nuxt篇) - 掘金

详细待研究。不能被卡脖子。

七、欢迎交流指正,关注我,一起学习。

 参考链接:

SingleSpa及qiankun入门、源码分析及案例

https://www.cnblogs.com/Mr-Rshare/p/16571760.html

vue3 + vite + qiankun - 简书

Vue3,Vite,TypeScript,Monorepo,qiankun...... Buff叠满,BUG没有_qiankun vue3 vite_web老猴子的博客-CSDN博客

vue3 (三) qiankun+子应用(主应用)_vue3 qiankun_飞天代码的博客-CSDN博客

vue3+阿里乾坤实现主应用和微应用_乾坤微应用_花无缺001的博客-CSDN博客

07. vue3+vite+qiankun搭建微应用前端框架,并接入vue3微应用_vue微应用_qq_29517595的博客-CSDN博客

vue乾坤快速入门_哔哩哔哩_bilibili

微前端qiankun快速入门_哔哩哔哩_bilibili

qiankun从接入到部署(nuxt篇) - 掘金

关于qiankun的使用与部署过程,全详细记录_qiankun打包部署_朝花夕实的博客-CSDN博客

微前端qiankun的源码实现_哔哩哔哩_bilibili

如何设计实现微前端框架-qiankun

看滴普大前端是如何玩转基于“qiankun”(乾坤)的微前端架构的_应用

qiankun.js应用_小三金的博客-CSDN博客_qiankun.js

微前端qiankun的实战_哔哩哔哩_bilibili

GitHub - umijs/qiankun: 📦 🚀 Blazing fast, simple and complete solution for micro frontends.

qiankun - qiankun

GitHub - kakajun/qiankun-vite-test: 技术站: vue3+vite+qiankun+lenar,父应用 vue3(vite),子应用用 vue(webpack) 和 vue3(webpack)和vue3(vite), 可以稍加修改作为中小型应用模板

vue项目落地(qiankun.js)微前端服务 - 知乎

微前端方案 qiankun(实践及总结)--摘抄 - 建站教程

相关内容

热门资讯

将安卓系统数据导入ios系统,... 你是不是也有过这样的经历:手机里存满了珍贵的照片、联系人、应用数据,突然有一天,你决定换一台iPho...
雷霆战机 安卓最低系统,系统要... 你有没有听说过这款超级酷炫的飞行游戏——雷霆战机?没错,就是那个让你一上手就停不下来的刺激游戏!今天...
电脑独立安装安卓系统,探索电脑... 电脑独立安装安卓系统:探索未来的可能性在当今这个数字化时代,电脑已经不仅仅是一个用来打字的工具,它更...
树莓派虚拟安卓系统,打造便携式... 你有没有想过,用树莓派来运行安卓系统?听起来是不是有点酷炫?想象一个迷你的小树莓派,竟然能变身成为一...
安卓系统如何安装tk,安卓系统... 你有没有想过,你的安卓手机里装个tk,生活是不是能变得更有趣呢?别急,别急,我来给你详细说说怎么操作...
安卓计步数系统,健康生活新伙伴 你有没有发现,每天手机里那个默默无闻的安卓计步数系统,竟然悄悄地记录了你走过的每一步?今天,就让我带...
安卓原生系统真的好吗,究竟是否... 你有没有想过,安卓原生系统到底是不是那个传说中的“好”?咱们今天就来聊聊这个话题,看看这个系统到底有...
安卓2.3系统开机画面,复古与... 亲爱的读者,你是否还记得那些充满怀旧情怀的安卓2.3系统开机画面?那个曾经陪伴我们度过无数时光的小图...
哪个安卓管理系统好,安卓管理系... 你有没有想过,手机里那么多应用,管理起来是不是有点头疼?别急,今天就来给你揭秘哪个安卓管理系统好,让...
安卓系统取消流量监控,告别流量... 你知道吗?最近安卓系统来了一次大动作,取消了对流量的监控!这可真是让人眼前一亮的消息呢。想象以前每次...
安卓导航如何备份系统,安卓导航... 你有没有想过,如果你的安卓导航系统突然崩溃了,你会怎么办?别急,今天就来给你支个招,教你如何轻松备份...
小米安卓4.0系统下载,深度解... 你有没有想过,你的小米手机是不是也能来个“大变身”?没错,就是升级到安卓4.0系统!想象你的手机瞬间...
自动鉴别平板安卓系统,自动鉴别... 你有没有想过,你的平板电脑里那些安卓系统,其实都是经过一番“智慧”的筛选和鉴别才来到你面前的呢?没错...
bose能连安卓系统,开启无线... 你有没有想过,家里的音响设备也能跟上科技潮流,和你的安卓手机无缝连接呢?没错,今天就要来聊聊这个神奇...
安卓x是什么系统,探索新一代智... 你有没有听说最近安卓界又出了个新花样——安卓X系统?没错,就是那个我们平时手机里常用的安卓系统,这次...
安卓系统怎么提升网速,五大技巧... 你是不是也和我一样,在使用安卓手机时,总是觉得网速不够快,有时候刷个网页都慢得让人抓狂?别急,今天就...
机车安卓系统重装,轻松恢复系统... 你那台机车安卓系统是不是突然间卡壳了,运行速度慢得像蜗牛爬?别急,今天就来给你详细说说怎么给机车安卓...
华为手机更改安卓系统,探索安卓... 你知道吗?最近华为手机界可是掀起了一阵不小的波澜呢!没错,就是那个我们熟悉的华为,竟然悄悄地更改了安...
安卓系统低版微信,揭秘微信新版... 你有没有发现,有时候手机里的微信版本有点儿“老气横秋”呢?别急,今天就来聊聊这个让人有点头疼的安卓系...
安卓系统安装apple pay... 你有没有想过,即使你的手机是安卓系统,也能享受到Apple Pay的便捷支付体验呢?没错,就是那个曾...