微前端框架之乾坤【qiankun】(一)

微前端乾坤 boolean } - 可选,是否开启沙箱,默认为 true。experimentalStyleIsolation是在子应用的样式前面加上特定的一个hash属性,类似于scope但是不能防止全局在主应用的样式影响。{ strictStyleIsolation: true } 时表示开启严格的样式隔离模式。这种模式下 qiankun 会为每个微应用的容器包裹上一个 shadow dom 节点,从而确保微应用的样式不会对全局造成影响。但是这个属性有兼容性,有时候需要特殊处理(react)。 阅读详情

        先上背景,新入职一家公司,公司使用到了这个框架,学习一番,要求很低,让自己能够在这个业务线正常的开发。

        学习第一步,看官网。给您贴一下官网地址,开心贴贴。

        什么是微前端:抄一下,如下:

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

        英文好的可以再看一下:

Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. -- Micro Frontends

        微前端架构旨在解决单体应用在一个相对长的时间跨度下,由于参与的人员、团队的增多、变迁,从一个普通应用演变成一个巨石应用(Frontend Monolith)后,随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。

        读到这里就知道,能用这个框架的都不是小项目了,最起码要有一定的规模,才用得上这个框架。

特性和优势:

  • 📦 基于 single-spa 封装,提供了更加开箱即用的 API。
  • 📱 技术栈无关,任意技术栈的应用均可 使用/接入,不论是 React/Vue/Angular/JQuery 还是其他等框架。
  • 💪 HTML Entry 接入方式,让你接入微应用像使用 iframe 一样简单。
  • 🛡​ 样式隔离,确保微应用之间样式互相不干扰。
  • 🧳 JS 沙箱,确保微应用之间 全局变量/事件 不冲突。
  • ⚡️ 资源预加载,在浏览器空闲时间预加载未打开的微应用资源,加速微应用打开速度。
  • 🔌 umi 插件,提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统。

好了,不闲扯了,下面开始正式学习。

微前端完整vue实例-乾坤【qiankun】 微前端服务vue实例-乾坤【qiankun】一、前言一、乾坤实例应用创建主应用 一、前言 功能说明: 此实例包含有一个qiankun-main主应用和qiankun-vue-child子应用。【可以包含若干个子应用,这里只建立一个子应用进行演示】 主应用可以跨域访问子应用系统。 qiankun-main主应用运行端口8085,qiankun-vue-child子应用运行端口8083。【由于使用了vue create创建vue项目,故需在项目文件夹下手动创建vue.config.js】 参考文档:qian 阅读详情

相关推荐

万字长文+图文并茂+全面解析微前端框架 qiankun 源码 - qiankun 篇

本文将针对微前端框架 qiankun 的源码进行深入解析,在源码讲解之前,我们先来了解一下什么是 微前端。 微前端 是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。同时,它们也可以在共享组件的同时进行并行开发——这些组件可以通过 NPM 或者 Git Tag、Git Submod...

qq_34621851的博客 6046

微前端-乾坤

本文将按照下面的顺序逐一讲解: 1)什么是微前端以及为什么使用微前端 2)乾坤框架介绍 3)基于乾坤框架实例 一、什么是微前端 微前端的核心思想就是将按照不同功能或不同维度拆分的独立子应用,通过主应用来加载这些子应用,达到子项目可以独立开发、独立部署、不受技术栈影响效果。 二、乾坤框架介绍 下面的地址是乾坤文档地址,详细介绍了微前端的概念、乾坤的核心设计思想介绍https://qiankun.umijs.org/zh/guide 三、乾坤框架实例 说明:例子基于三个独立项目,项

感恩、奋进、自信 9337

2024年最全详细解析微前端、微前端框架qiankun以及源码(1),前端程序员秋招三面蚂蚁金服

全网独播-价值千万金融项目前端架构实战从两道网易面试题-分析JavaScript底层机制RESTful架构在Nodejs下的最佳实践开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一线互联网企业如何初始化项目-做一个自己的vue-cli思维无价,看我用Nodejs实现MVC代码优雅的秘诀-用观察者模式深度解耦模块前端高级实战,如何封装属于自己的JS库VUE组件库级组件封装-高复用弹窗组件。

2401_84438067的博客 3205

微前端框架——乾坤入门

介绍乾坤的概念和背景乾坤(qiankun)是一款成熟的微前端框架,由蚂蚁金服推出。它基于single-spa进行二次开发,旨在帮助开发者更简单、无痛地构建一个生产可用的微前端架构系统。它支持在一个主应用中加载和运行多个子应用,每个子应用都是一个独立的单页面应用(SPA)。我们先来了解一下什么是微前端。微前端是一种前端架构风格,它将一个大型应用拆分成多个更小、更易维护的子应用,这些子应用可以独立开发、部署和运行。每个子应用是独立的可以自由选择技术栈独立部署和升级在浏览器中集成。

weixin_41484284的博客 6104

微前端配置-实例qiankun

微前端配置-实例qiankun

不可云 2261

乾坤微前端实践:qiankun与UMI的融合之道

微前端架构是一种前端架构设计方法,它将一个复杂的前端应用拆分为多个小的、独立的前端模块,这些模块可以是基于不同的技术栈、由不同的团队独立开发和维护。每个模块都被当作一个“微应用”,它们可以独立部署、独立测试,并且能够被集成到一个统一的主应用中。微前端的目标是降低前端系统的复杂性、提高系统的可维护性、可扩展性和团队协作的效率。乾坤(qiankun)是一个企业级微前端解决方案,它提供了开箱即用的微前端能力,能够帮助开发者更方便地构建和管理微前端架构的前端项目。

weixin_36149538的博客 1305

微前端——qiankun(乾坤)实例

微前端qiankun+vue实例

qq_37049128的博客 6411

osgEarth shapefile矢量生成三维模型案例 2.boston.earth

osgEarth shapefile矢量生成三维模型案例 2.boston.earth 波士顿城市建筑、路灯、公园、道路shp矢量生成三维模型案例。

qq_24934183的博客 3545

qiankun(乾坤)微前端框架简介

qiankun(乾坤)微前端框架简介

偏执的小男孩儿 9976

不用写代码!用AIStarter 5.0.0离线包部署InfiniteTalk的完整指南(Windows/Mac/Linux全平台)

本文详细介绍了如何使用AIStarter 5.0.0离线包在Windows、Mac和Linux平台上零代码部署InfiniteTalk数字人。从环境准备、离线资源获取与验证,到全平台部署实操指南,提供了完整的本地化安装流程和优化建议,帮助用户快速实现AI项目的一键部署。

weixin_30275415的博客 274

DDR的Controller、Channel、Chip、Rank、Bank、Row、Column、Sided、Dimm

DDR的Controller、Channel、Chip、Bank、Rank、Row、Column、Sided、Dimm

张飞online博客 2万+

微前端vue项目实战 -- 乾坤qiankun框架 (一)

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

csl125的博客 3万+

28.Anaconda安装jupyter notebook、jupyterlab及体验

手贱,不小心将Anaconda自带得jupyter给卸载了,没法子了查了好多资料都比较麻烦,所以自己摸索着重新安装,记录一下心得。说明:Anaconda没有加入环境变量,Anaconda官方建议不要将Anaconda加入环境变量,这就意味着他和python是可以共存的。

迷逝 5030

微前端——乾坤qiankun Demo

微前端——qiankun(乾坤)实例 一、什么是微前端 微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。微前端的核心在于拆,拆完后在合! 二、为什么使用微前端 不同团队间开发同一个应用技术栈不同 希望每个团队都可以独立开发,独立部署 项目中还需要老的应用代码 我们可以将一个应用划分成若干个子应用,将子应用打包成一个个的 lib 。当路径切换 时加载不同的子应用。这样每个子应用都是独立的,技术栈也不用做限制了!从而解决了前端协同开发问题。 三、qiankun框架 **文档

欠踹的背影 2万+

Python调用CANoe(1)(启动与停止,变量和信号读写)

CANoe因为其封闭性(Vector独有),开发的时候,有很多局限性;Python 因为其开源,容易上手,功能强大,那么Python 和 CANoe结合会产生怎样的火花呢?

蚂蚁小兵 4万+

基于STM32L4XX、HAL库的 TMC2660C-PA 驱动程序设计

/ 默认灵敏度和电流。// 20/31最大电流。

zhusl6688的博客 386

详细解析微前端、微前端框架qiankun以及源码

作者 | 晒兜斯来源 | https://segmentfault.com/a/1190000022275991本文将针对微前端框架qiankun的源码进行深入解析,在源码讲解之前...

web前端开发 1万+

解决Office 365 SMTP问题:C#邮件发送详解

本文介绍了如何在C#中使用Office 365 SMTP服务发送邮件。重点讲解了正确配置SMTP客户端的关键参数:必须使用587端口并启用TLS加密(EnableSsl=true),同时通过NetworkCredential进行身份验证。虽然SmtpClient已不推荐用于新项目,但本文提供的代码示例仍适用于临时项目或系统维护,并建议未来可考虑使用MailKit等现代邮件库。文章还包含了错误处理机制,确保程序健壮性。

2501_90323865的博客 141

微前端框架之乾坤【qiankun】 vue3+vite+qiankun(手把手搭建版)

简介:qiankun是一种微前端框架,可以将多个前端应用集成为一个整体。每个子应用可以使用不同的框架和技术栈,它们之间可以相互独立开发和部署,qiankun提供了一套完整的生命周期函数和通信机制,可以让不同的子应用之间进行跨框架和跨域的通信和交互。

m0_51400948的博客 1万+

【Claude】Auto Mode 触发安全分类器拦截的三种错误变体及对应处理 bug报错已解决

深度解析Claude Auto Mode安全分类器拦截的三种变体:内容拒绝、操作中断、累积触发,含完整排查流程与绕过策略。

博客 7598

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

乾坤 微前端_阿里开源微前端解决方案——qiankun(乾坤)

介绍乾坤这个名字取得很大气,在中国传统文化中,乾意味着天堂而坤代表地球,所以乾坤是宇宙。乾坤是一个阿里巴巴UMI基于single-spa而对Micro Frontens的实现,但是它更容易应用到开发!Github因为是基于single-spa,地址一并给出https://github.com/CanopyTax/single-spahttps://github.com/umijs/qiankun微...

weixin_39863161的博客 1万+

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

qiankun 微前端_微前端、微前端框架 “qiankun” 全解析

本文将针对微前端框架qiankun的源码进行深入解析,在源码讲解之前,我们先来了解一下什么是微前端。微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。同时,它们也可以在共享组件的同时进行并行开发——这些组件可以通过NPM或者Git Tag、Git Su...

weixin_39523887的博客 5310

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

微前端框架对比与实践:无界(Wujie)与乾坤(qiankun)

浅了解一下为前端框架 无界 乾坤

2302_78599038的博客 1310

分享一篇关于微前端乾坤(qiankun)的文章

原文地址:落地微前端 qiankun 理论与实践指北 一、前言 “一千个人眼里有一千个哈姆雷特” 本文仅是作者这段时间对微前端的思考与感悟,文笔拙劣,多多海涵。微前端的实现方式有很多种,但是微前端并不完美。只有适合自己、适合团队的才是最佳实践。 由于本文较长(PS:本人懒得分篇),目录一至目录七偏理论知识,目录七之后为实践操作与思考,大家可以适当的跳跃来看 微前端是什么? 微前端不是特指某一项技术,而是一种思想。是由2016年ThoughtWorks Technology Radar 中.

sg_knight的专栏 4840

微前端框架乾坤配置记录

主应用 1. 路由包装为history模式 // src/main.js import routes from './routes'; const router = new VueRouter({ mode: 'history', routes }); new Vue({ router, store, render: (h) => h(App) }).$mount('#app'); 2. 引入乾坤微前端主应用配置 // src/mico/index.js import {

林中路 6365

qiankun 微前端_深入浅出解析阿里成熟的微前端框架 qiankun乾坤源码【图文并茂】...

作者:leaf(a1029563229)转发链接:https://github.com/a1029563229/blogs/blob/master/Source-Code/qiankun/1.md本文将针对微前端框架 qiankun 的源码进行深入解析,在源码讲解之前,我们先来了解一下什么是 微前端。微前端 是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将单页面前端应用由单一的单体应...

weixin_39649965的博客 2594
上一篇: File not found: /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/l
下一篇: npm仓库镜像源
develop_csdn_LGQ
博客等级 码龄10年 21粉丝 61原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值