位置: IT常识 - 正文

微前端-qiankun:vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用(微前端的好处和缺陷)

编辑:rootadmin
微前端-qiankun:vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用

推荐整理分享微前端-qiankun:vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用(微前端的好处和缺陷),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:什么是微前端,微前端和微服务,无界微前端,微前端microapp官网,qiankun微前端,无界微前端,微前端和微服务,什么是微前端,内容如对您有帮助,希望把文章链接给更多的朋友!

一、了解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/subAppVue3 props: { mag: '我是主应用main' // 主应用向微应用传递参数 } } // 再有其他子应用,同理]);// 启动 qiankunstart({ prefetch:'all', // 预加载 sandbox: { experimentalStyleIsolation: true, // 开启沙箱模式,实验性方案 },});// 添加全局异常捕获addGlobalUncaughtErrorHandler((handler) => { console.log("异常捕获", handler);});

4.1.4、app.vue创建挂载节点,再有其他子应用,同理

<div id="subAppContainerVue3"></div>

经过测试,主应用成功。

4.2、vue3-vite主应用 接入 vue3-vite子应用

微前端-qiankun:vue3-vite 接入 vue3-vite_snow@li的博客-CSDN博客

4.3、vue3-vite主应用 接入 vue3-webpack子应用

微前端-qiankun:乾坤接入vue3-webpack_snow@li的博客-CSDN博客

4.4、vue3-vite主应用 接入 vue2子应用

微前端-qiankun:vue3-vite 接入 nuxt2_snow@li的博客-CSDN博客

微前端-qiankun:vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用(微前端的好处和缺陷)

4.5、vue3-vite主应用 接入 html子应用

待补充

4.6、vue3-vite主应用 接入 jQuery子应用

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

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

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

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

4.7、vue3-vite主应用 接入 nuxt2子应用

微前端-qiankun:vue3-vite 接入 nuxt2_snow@li的博客-CSDN博客

4.8、nuxt2主应用 接入 nuxt2子应用

微前端-qiankun:nuxt2 接入 nuxt2_snow@li的博客-CSDN博客

4.9、vue3-vite主应用 接入 nuxt3子应用

待补充

4.10、nuxt作为主应用

https://www.cnblogs.com/rain-watcher/p/16938611.html

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

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(实践及总结)--摘抄 - 建站教程

本文链接地址:https://www.jiuchutong.com/zhishi/292398.html 转载请保留说明!

上一篇:Transformers 库的基本使用(transformers document)

下一篇:鸟瞰罗卡附近的Grotta della Poesia,意大利莱切 (© Amazing Aerial Agency/Offset by Shutterstock)(罗卡购物村)

  • 高级月嫂培训公司培训费多少钱?

    高级月嫂培训公司培训费多少钱?

  • 店铺门口贴的健康二维码怎么申请(店铺门口贴的健康二维码怎么申请?微信)

    店铺门口贴的健康二维码怎么申请(店铺门口贴的健康二维码怎么申请?微信)

  • 网易云怎么移除登录设备(网易云怎么移除别的设备)

    网易云怎么移除登录设备(网易云怎么移除别的设备)

  • mate20支持4g双通吗(mate 20支持双电信卡吗)

    mate20支持4g双通吗(mate 20支持双电信卡吗)

  • qq号绑定的手机号被注销了怎么办(qq号绑定的手机号注销了怎么换绑)

    qq号绑定的手机号被注销了怎么办(qq号绑定的手机号注销了怎么换绑)

  • uhd graphics是什么显卡(uhd graphics是什么显卡相当于)

    uhd graphics是什么显卡(uhd graphics是什么显卡相当于)

  • 区分朋友圈屏蔽和清空(区分朋友圈屏蔽还是删除)

    区分朋友圈屏蔽和清空(区分朋友圈屏蔽还是删除)

  • 为什么word里公式不能全部显示(为什么word公式不能输入数字)

    为什么word里公式不能全部显示(为什么word公式不能输入数字)

  • 拼多多怎么同时买两个品种(拼多多怎么两个一起付款)

    拼多多怎么同时买两个品种(拼多多怎么两个一起付款)

  • 笔记本突然断电后开不了机(笔记本突然断电关机开不了机)

    笔记本突然断电后开不了机(笔记本突然断电关机开不了机)

  • 移出黑名单聊天记录还在吗(从黑名单移出来还有聊天记录吗)

    移出黑名单聊天记录还在吗(从黑名单移出来还有聊天记录吗)

  • 微信发的消息删除了对方能看到吗(微信发的消息删除后对方还能看到吗)

    微信发的消息删除了对方能看到吗(微信发的消息删除后对方还能看到吗)

  • 抖音可以屏蔽关键词吗(抖音可以屏蔽关键词视频吗)

    抖音可以屏蔽关键词吗(抖音可以屏蔽关键词视频吗)

  • 处理器有哪些品牌(处理器有哪些品牌电脑)

    处理器有哪些品牌(处理器有哪些品牌电脑)

  • 电力驱动控制系统各部分的主要功能(电力驱动控制系统包括)

    电力驱动控制系统各部分的主要功能(电力驱动控制系统包括)

  • iphone点两下home有什么用(苹果手机点两下home键有什么用)

    iphone点两下home有什么用(苹果手机点两下home键有什么用)

  • 华为nova65g手机如何截屏(华为nova65g手机长度)

    华为nova65g手机如何截屏(华为nova65g手机长度)

  • 计算机辅助制造的英文缩写(计算机辅助制造英文全称)

    计算机辅助制造的英文缩写(计算机辅助制造英文全称)

  • 淘宝评价心级怎么算(淘宝评价的心多久升一次)

    淘宝评价心级怎么算(淘宝评价的心多久升一次)

  • 快手如何转播别人直播(快手怎么转播别人的直播视频教程)

    快手如何转播别人直播(快手怎么转播别人的直播视频教程)

  • s8无线充电设置在哪(s8无线充电器)

    s8无线充电设置在哪(s8无线充电器)

  • 苹果手机充电孔变松了(苹果手机充电孔进水了充不了电怎么办)

    苹果手机充电孔变松了(苹果手机充电孔进水了充不了电怎么办)

  • ipad手电筒在哪里设置(iPad手电筒在哪开)

    ipad手电筒在哪里设置(iPad手电筒在哪开)

  • 红盘绿盘蓝盘的区别(红盘绿盘蓝盘的区别在哪)

    红盘绿盘蓝盘的区别(红盘绿盘蓝盘的区别在哪)

  • 打电话空号是什么意思(打电话给空号)

    打电话空号是什么意思(打电话给空号)

  • jfCacheMgr.exe是什么进程?jfCacheMgr.exe是病毒吗?jfCacheMgr.exe程序文件介绍(jusched.exe是什么进程)

    jfCacheMgr.exe是什么进程?jfCacheMgr.exe是病毒吗?jfCacheMgr.exe程序文件介绍(jusched.exe是什么进程)

  • 增值税专用发票的税率是多少啊
  • 如何开具免税发票
  • 印花税的分录如何做
  • 流转税解释
  • 固定资产的处理包括
  • 个体工商户可以给自己交五险一金吗
  • 税控减免税额如何做分录
  • 企业季度预缴所得税怎么账务处理
  • 特许权使用费增值税征收品目
  • 购房所需的税费种类和费用
  • 出售拆迁补偿住房违法吗
  • 财务报表分析方法有
  • 劳务公司核定征收怎么交税的
  • 当月作废的专票需要开负数发票么
  • 银行本票超过付款期限可以向出票人追索吗
  • 公司没有缴纳住房公积金离职能要求补缴吗
  • 开专票还需要提供营业执照?
  • 个人股权转让申报表
  • 受赠人个人所得税
  • 结转开发产品
  • 税务师入会与不入会冲突
  • 带息商业汇票的利息分录?
  • 如何不同版本复制粘贴
  • 怎么用红字信息表开红字发票
  • 文件错误会追究拟稿人吗
  • 公司出租房屋租赁发票税率
  • 所有者权益会计要素包括
  • 土地使用税缴纳人是使用者还是所有权人
  • ajax 返回
  • 小微企业免税额的会计分录
  • 网络电话综合布线
  • 基于MATLAB的车牌识别
  • 面试官问:mysql 的自增 id 用完了,怎么办?
  • 取得进项税发票什么时期内可以抵扣
  • 没有校验码的发票可以报销吗
  • mysql的文件格式有哪些
  • 企业所得税的营业收入怎么填
  • 社保为什么单位缴费是0什么时间才正常
  • SQL中Exists的用法
  • 企业向个人的借款合同
  • 加油票子能报销吗
  • 本月计提费用,发票下个月到可以吗
  • 积分换物品是真的吗
  • 去年多计提的企业所得税怎么调整
  • 个人取得全年一次性奖金征税规定
  • 包工包料工程预付款的支付比例
  • 计提以前年度应付股利的分录
  • 现金日记账支出写借方还是贷方
  • 以前年度财务费用漏记
  • 个人独资企业与一人公司的区别与联系
  • 专打发票的打印机
  • 发票专用章需要备案吗?
  • mysql数据库内存缓存设置
  • vista下实现秘密下载的解决办法
  • 如何查看windows2008修改密码日志
  • win7系统系统
  • Win8.1如何能将任意文件隐藏到普通图片中例如JPG图片
  • winxp修改ip地址方法
  • 未能打开这台计算机上的组策略对象
  • xp主题怎么改成win7
  • centos下安装windows
  • win8安装itunes
  • win7系统浏览器打不开网页怎么办
  • 一直显示正在安装windows
  • Win10 RS1 14267 SDK版本发布下载
  • bootstrap基础
  • node 加密解密
  • jqgrid api中文手册
  • 使用nodejs开发后端
  • javascript()
  • unitytest
  • jQuery实现表格行和列的动态添加与删除方法【测试可用】
  • super函数python
  • 企业环境信用等级在哪里查询
  • 中国裁判文书怎么查个人案件
  • 国家税务总局公告2023第12号
  • 国税稽查局查账单凭个人流水能不能当做证据
  • 深圳龙华九价怎么预约
  • 上市公司季报有哪些内容
  • 杭州国税电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设