qiankunjs框架 代码行业 以看懂代码 看懂框架代码 背的出原理 背的出代码哲理 为荣 以此来跟老板要高工资 在qiankun库里 有一个版本文件 里面导出了版本 是从包json中配置的 在乾坤错误中 会调用错误类的构造方法 …
qiankun特性 基于single-spa 封装,提供了更加开箱即用的 API。 技术栈无关,任意技术栈的应用均可 使用/接入,不论是 React/Vue/Angular/JQuery 还是其他等框架。 HTML Entry 接入方式,让你接入微应用像使用 iframe 一样简单。 样式隔离,确保微应用之间样式互相不干扰。 JS 沙箱,确保微应用之间 全局变量/事件 不...
qiankun.js是当前最出色的一款微前端实现库, 他帮我们实现了css隔离、js隔离、项目关联等功能, 文章的后面都会有所涉及的现在就让我们开始实战吧。 2. 本次的项目结构一主二附 一共三个vue项目, 第一个container项目负责导航模块, 第二个web1第三个web2,container项目里面有个s...
1. 新建 public-path.js 文件 并在main.js中引用 //qiankun Vue子应用配置if(window.__POWERED_BY_QIANKUN__) {//eslint-disable-next-line no-undef__webpack_public_path__ =window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; } 2. qiankun相关配置 import './public-path'; import Vue from'vue';...
选择qiankun.js是因为它在目前市面上表现卓越，基于single-spa，却更为简单且功能强大。在vue2项目中落地微前端服务架构，我经历了项目调整与学习过程。起初，项目使用nuxt.js，后转用vue-cli以适应qiankun.js。最初接触qiankun.js，面对官方文档一脸迷茫，后来通过公开课了解其原理并搭建项目，理解变得...
qiankunjs 架构图 Qiankun 是一个微前端框架,它在技术上采用了 Web Components 技术实现样式隔离。具体来说,Qiankun 利用 Shadow DOM 的特性,在应用程序容器中创建一个隔离的 DOM 树,使得每个子应用都可以拥有自己独立的样式作用域。 在Qiankun 中,每个子应用都被封装为一个 Custom Element,这个 Custom Element ...
主项目需要配置Qiankun,并注册子应用。以下是main.js的代码: import{registerMicroApps,start}from'qiankun';registerMicroApps([{name:'FlightBooking',entry:'//localhost:3001',// 假设子应用在3001端口运行container:'#app',activeRule:'/flights',},{name:'HotelBooking',entry:'//localhost:3002',// 假设...
Vue3.0 + qiankun.js 实现多tab标签页路由切换 Github地址 Github网页演示地址 原理是通过监听主应用的vue-router的 router.beforeEach 方法来动态加载(loadMicroApp)微应用页面 用vuex来管理已加载的微应用和tab标签数据 监听用initialState的变化来执行对微页面内部的路由跳转 ...
微前端:微前端场景下,各个子应用被集成到一个运行时,避免每个子应用互相影响,导致的一些如全局污染的问题,下面👇会以QianKun为例进行详细的讲述 JSONP:当运行通过标签的url返回的JS代码时,为了规避一定程度上的风险可能需要在沙箱中执行 在线编辑器:在某些场景下我们会提供一个编辑器或者类似的可输入界面需要用户...
使用其中一个叫做qiankunbase的作为项目基座,剩下两个作为子项目 先改写基座项目当中的入口js(vue cli创建出来的是main.js),大致分为两个目的: a.配置子项目地址 b.配置项目间的数据传递 值得注意一点的是,我用的是qiankun2.0,过程中使用到过已经有变化的1.0的配置字段(render),造成不必要的精力浪费,https://...