qiankun专题
微前端解决方案 - qiankun 2.0
Announcing qiankun@2.0 2019 年 6 月，微前端框架 qiankun 正式发布了 1.0 版本，在这一年不到的时间内，我们收获了 4k+ star，收获了来自 single-spa 官方团队的问候，支撑了阿里 200+ 线上应用，也成为社区许多团队选用的微前端解决方案。 在今天，qiankun 将正式发布 2.0 版本。 qiankun@2.0 带来了一些新能力的同
使用Vite+Vue 3+Qiankun构建微前端应用
构建微前端应用可以使用Vite作为主应用的构建工具，Vue 3作为主应用和子应用的框架，Qiankun作为微前端框架。 以下是使用Vite+Vue 3+Qiankun构建微前端应用的步骤： 安装 Vite npm init vite@latest 创建主应用 cd 主应用目录npm installnpm run dev 创建子应用 cd 子应用目录npm insta
qiankun框架中基于actions机制实现主应用与子应用间的双向通信
文章目录 一、原理1、setGlobalState：2、onGlobalStateChange：3、offGlobalStateChange：4、图解 二、示例主应用1、在父应用中使用initGlobalState设置全局状态actions并导出供其他组件使用。2、在main.js中引入actions实例并在注册子应用时通过props传递全局状态actions：3、主应用中的组件要修改全局状
微前端——qiankun
一、微前端 微前端是指存在于浏览器中的微服务，其借鉴了后端微服务的架构理念，将微服务的概念扩展到前端。即将一个大型的前端应用拆分为成多个模块，每个微前端模块可以有不同的团队开发并进行管理，且可以自主选择框架，以及有自己的仓库，可以独立部署上线。 （1）未使用微服务之前的项目架构 （2）使用微服务之前的项目架构 二、微前端的优点 团队自治 在公司里面，一般团队都是按照业务划分的，在没有微
qiankun实现基座、子应用样式隔离
目录 qiankun 实现主应用与子应用样式隔离使用CSS-in-JS来实现样式隔离react-jssstyled-components qiankun 实现主应用与子应用样式隔离 qiankun 之中默认的样式隔离是针对子应用与子应用之间的。至于主应用的样式会影响到子应用，若需要，则需要配置进行隔离解决方法： 1：每个应用的样式使用固定的格式 eg：react 项目=> r
qiankun项目填坑：隐藏菜单和header
最近接了一个项目，架构是qiankun，需要在这基础上进行修改；找到对应的项目后，运行该项目就消耗了很多精力；好不容易运行起来了，单纯的运行子项目是能将菜单和header隐藏: layout中设置{headerRender: false,menuRender: false} 但是构建到dev环境，还是老样子；后面一直找寻方法能不能本地运行起一整个qiankun项目（走弯路了）。 后面发现
qiankun：vite/webpack项目配置
相关博文： https://juejin.cn/post/7216536069285429285?searchId=202403091501088BACFF113F980BA3B5F3 https://www.bilibili.com/video/BV12T411q7dq/?spm_id_from=333.337.search-card.all.click qiankun结构： 主应用bas
qiankun微前端使用
微前端是什么？ 微前端就是页面的某个功能可以独立为一个项目进行开发、部署。比如：自己的项目使用iframs引入百度 qiankun qiankun是一个基于single-spa的微前端实现库，qiankun 对于用户而言只是一个类似 jQuery 的库，你需要调用几个 qiankun 的 API 即可完成应用的微前端改造 主应用 安装qiankun npm i qiankun -S
微前端（qiankun）vue3+vite
目录 一、什么是微前端 二、主应用接入 qiankun 1.按照qiankun插件 2.注册微应用引用 3.挂载容器 三、微应用接入 qiankun 1.vite.config.ts 2.main.ts ps：手动加载微应用方式 ps：为什么不用 iframe 一、什么是微前端 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技
qiankun子应用静态资源404问题有效解决（涉及 css文件引用图片、svg图片无法转换成 base64等问题）
在👉🏻 qiankun微前端部署👈🏻这个部署方式的前提下，遇到的问题并解决问题的过程 最开始的问题现象 通过http请求本地的静态json文件404css中部分引入的图片无法显示 最开始的解决方式 在👉🏻 qiankun微前端部署👈🏻这个部署方式的前提下，指望用 nginx配置图片路径转发直接找到子应用的静态资源路径 # 子应用静态资源——通过http请求本
详细解析微前端、微前端框架qiankun以及源码
作者 | 晒兜斯 来源 | https://segmentfault.com/a/1190000022275991 本文将针对微前端框架 qiankun 的源码进行深入解析，在源码讲解之前，我们先来了解一下什么是 微前端。 微前端 是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部
vue配置qiankun及打包上线
项目结构 基座：vue3 子应用A：vue3 子应用B： react 子应用C：vue3+vite 项目目录： 配置基座 首先下载qiankun yarn add qiankun # 或者 npm i qiankun -S 所有子应用也要安装，vue-vite项目安装 cnpm install vite-plugin-qiankun 设置main.js import { c
微前端之qiankun的使用
微前端之qiankun的使用 在之前的文章中谈到了single-spa的使用，为了多了解微前端的各类架构，在新的项目中使用了qiankun，接下来就说一说qiankun的使用 安装 1、使用vue cli 快速创建基座（vue-portal）和子应用1（vue-supervise）、子应用2（vue-threen） 2、基座应用 npm install qiankun --save 准备工
qiankun微服务
官网 📦 基于 single-spa 封装，提供了更加开箱即用的 API。 📱 技术栈无关，任意技术栈的应用均可 使用/接入，不论是 React/Vue/Angular/JQuery 还是其他等框架。 💪 HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单。 🛡 样式隔离，确保微应用之间样式互相不干扰。 🧳 JS 沙箱，确保微应用之间 全局变量/事件 不冲
微前端-内里有乾坤-qiankun
刚接触微前端，这里介绍一下大佬推荐的Qiankun 卖点 简单：任意 js 框架均可使用。微应用接入像使用接入一个 iframe 系统一样简单，但实际不是 iframe。完备：几乎包含所有构建微前端系统时所需要的基本能力，如 样式隔离、js 沙箱、预加载等生产可用：已在蚂蚁内外经受过足够大量的线上系统的考验及打磨，健壮性值得信赖。 介绍 qiankun 是一个基于 single-sp
qiankun微前端路由模式
qiankun在vue框架下history 和hash路由模式的使用 一、主应用是hash模式 说明 当主应用是 hash 模式时，一般微应用也是 hash 模式。主应用的一级 hash 路径会分配给对应的微应用（比如 #/base1 ），此时微应用如果需要在 base 路径的基础上进行 hash 模式下的二级路径跳转（比如 #/base1/child1 ），这个场景在当前 VueRoute
关于qiankun沙箱sandbox（面试题）
为什么要有js资源隔离机制？ 主应用和子应用，相同的全局变量，可能会发生冲突，子应用和子应用之间，相同的全局变量，也可能会发生冲突。在这里我们主要指的就是window。 思路：打开沙箱时能够修改属性值；关闭沙箱时恢复未开启沙箱前的属性值，并且要记录修改了哪些属性。 qiankun.js隔离机制 SnapshotSandBox 快照沙箱，支持单个微应用 class SnapShotBox
微前端qiankun示例 Umi3.5
主应用配置（基座） 安装包 npm i @umijs/plugin-qiankun -D 配置 qiankun 开启 {"private": true,"scripts": {"start": "umi dev","build": "umi build","postinstall": "umi generate tmp","prettier": "prettier --write '**/*.
国微高校 html源码,基于 qiankun 的微前端实践
微前端的实践越来越受到大家的关注，在集成资源的平台上有比较大的应用价值，新增的需求只需要通过新增加子应用的方式，无需管理体积庞大的，耦合的单体应用。对技术栈的不限制也能够让年代久远的微前端项目能够比较轻松的逐步翻新。对微前端概念和应用价值的描述可以阅读 这篇译文。 single-spa 使用 single-spa, 需要子应用抛出生命周期，主应用根据 Location 的变化来对 app 进行动
基于qiankun.js微前端Vue项目源码
微前端 结合小编多年搬砖的经验，企业级的大规模集成平台普遍存在巨石项目难以维护的痛点。载最近的招聘面试中也会有面试官提及微前端的应用场景。小编拙见认为未来微前端将会成为一种趋势。目前为止，对于这种普遍的平台集成，第一种是打击熟悉的iframe，但是用过的人都知道，iframe的缺点，谁用谁知道哈。第二种的话就是基于阿里孵化的项目qiankun.js。这也是小编强力推荐的微前端解决方案。优缺点我就
微前端qiankun嵌入vue项目后iconfont显示方块
个人项目地址： SubTopH前端开发个人站 （自己开发的前端功能和UI组件，一些有趣的小功能，感兴趣的伙伴可以访问，欢迎提出更好的想法，私信沟通，网站属于静态页面） SubTopH前端开发个人站https://subtop.gitee.io/subtoph.github.io/#/home 以上 👆 是个人前端项目，欢迎提出您的建议😊 以下是正文内容...............
微前端qiankun框架的底层实现原理
qiankun框架的底层原理 现在我们手写一个简易的qiankun框架，实现基础的父应用中切换路径跳转子应用、沙箱隔离等qiankun框架的功能。 我们在已经配置好的qiankun主应用中不使用qinakun框架，而是引入我们自己手写的简易框架来实现本有的qiankun框架功能比如路由跳转、沙箱隔离、css样式隔离等。 // 引入qinakun框架内的方法// import { regis
qiankun--微前端可用小demo（主应用vue+子应用vue+子应用react）
qiankun–微前端可用小demo（主应用vue+子应用vue+子应用react） 说明： 在主应用的about页面加载子应用 成果： 加载子应用1，点击第一个按钮 子应用2，点击第二个按钮 注意：如果已经渲染一个子应用，切换另一个子应用的时候先返回about页面（自动清理上一个子应用），再点击切换按钮 代码： 主应用（vue实现） 1、初始化 使用vue-cli新建v
qiankun项目搭建手册
1. 项目结构 创建一个web-group的文件夹，进入该文件夹创建主项目和子项目。 主项目（必须）: main-service（main-service为主项目名称）子项目：sub1-service、sub2-service、… 2. 项目搭建及插件安装 2.1 项目搭建 项目要求：vue3+vite+ts+qiankun 项目搭建命令: npm create vite@lates
微前端二：qiankun
qiankun是基于Single-spa开发的框架，所以我们先来看下Single-spa是怎么做的： Single-spa 是最早的微前端框架，兼容多种前端技术栈，是一个将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架； 优点： 1、敏捷性 - 独立开发、独立部署，微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新； 2、技术栈无关，主框架不限制接入应用的