一、了解qiankun.js

qiankun - qiankun

1.1、簡單，任意 js 框架均可使用。微應用接入像使用接入一個 iframe 系統(tǒng)一樣簡單，但實際不是 iframe。

1.2、完備，幾乎包含所有構建微前端系統(tǒng)時所需要的基本能力，如 樣式隔離、js 沙箱、預加載等。解耦，與技術無關。

1.3、生產可用，已在螞蟻內外經受過足夠大量的線上系統(tǒng)的考驗及打磨，健壯性值得信賴。

1.4、qiankun 是一個基于?single-spa?的微前端實現(xiàn)庫，旨在幫助大家能更簡單、無痛的構建一個生產可用微前端架構系統(tǒng)。

1.5、qiankun 孵化自螞蟻金融科技基于微前端架構的云產品統(tǒng)一接入平臺，目前 qiankun 已在螞蟻內部服務了超過 2000+ 線上應用，在易用性及完備性上，絕對是值得信賴的。

1.6、微前端概念

微前端是一種多個團隊通過獨立發(fā)布功能的方式來共同構建現(xiàn)代化 web 應用的技術手段及方法策略。

1.7、核心價值：

介紹 - qiankun

1.7.1、技術棧無關：主框架不限制接入應用的技術棧，微應用具備完全自主權

1.7.2、獨立開發(fā)、獨立部署：微應用倉庫獨立，前后端可獨立開發(fā)，部署完成后主框架自動完成同步更新

1.7.3、增量升級：在面對各種復雜場景時，我們通常很難對一個已經存在的系統(tǒng)做全量的技術棧升級或重構，而微前端是一種非常好的實施漸進式重構的手段和策略

1.7.4、獨立運行時：每個微應用之間狀態(tài)隔離，運行時狀態(tài)不共享

1.8、特性

1.8.1、基于?single-spa?封裝，提供了更加開箱即用的 API。

1.8.2、技術棧無關，任意技術棧的應用均可 使用/接入，不論是 React/Vue/Angular/JQuery 還是其他等框架。可以對老jQuery項目進行升級，老業(yè)務不變，新頁面使用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 應用一鍵切換成微前端架構系統(tǒng)。

二、安裝

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',
  },
});

四、實戰(zhàn)

項目實踐 - qiankun

4.1、vue3，基座項目/主應用/main-app

4.1.1、創(chuàng)建項目

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配置的節(jié)點
    activeRule: '/subAppVue3', // 訪問：http://localhost:5174/subAppVue3
    props: {
        mag: '我是主應用main' // 主應用向微應用傳遞參數(shù)
    }
  }
  // 再有其他子應用，同理
]);
// 啟動 qiankun
start({
    prefetch:'all', // 預加載
    sandbox: {
        experimentalStyleIsolation: true, //   開啟沙箱模式,實驗性方案
    },
});
// 添加全局異常捕獲
addGlobalUncaughtErrorHandler((handler) => {
    console.log("異常捕獲", handler);
});

4.1.4、app.vue創(chuàng)建掛載節(jié)點，再有其他子應用，同理

<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博客

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

待補充

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

不要對 iframe 抱有偏見，它也是微前端的一種實現(xiàn)方式，如果頁面上無彈窗、無全屏等操作，iframe 也是很好用的。配置緩存和 cdn 加速，如果是內網訪問，也不會很慢。
iframe 和 qiankun 可以并存，jQuery 多頁應用使用 iframe 接入就挺好，什么時候什么場景該用哪種方案，具體情況具體分析。

最后，文章有什么問題或錯誤歡迎指出，謝謝！

微前端方案 qiankun（實踐及總結）--摘抄 - 建站教程文章來源地址http://www.zghlxwxcb.cn/news/detail-438810.html

jquery項目嵌入vue3框架_jquery vue3_卷大爺?shù)牟┛?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做了樣式隔離，父子應用樣式隔離可以使用如下方法

默認情況下切換應用會采用動態(tài)樣式表，加載的時候添加樣式，刪除的時候卸載樣式（子應用之家的樣式隔離）

主應用和子應用如何隔離（我們通過BEM規(guī)范）->（cssmodules）動態(tài)生成一個前綴（并不是完全隔離）

shadowDOM video 標簽中的 快進 放大功能 增加全局樣式就會有問題

六、乾坤項目服務器部署

所有項目，包括基座項目，業(yè)務項目都在服務器可以獨立部署。

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+阿里乾坤實現(xiàn)主應用和微應用_乾坤微應用_花無缺001的博客-CSDN博客

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

vue乾坤快速入門_嗶哩嗶哩_bilibili

微前端qiankun快速入門_嗶哩嗶哩_bilibili

qiankun從接入到部署（nuxt篇） - 掘金

關于qiankun的使用與部署過程，全詳細記錄_qiankun打包部署_朝花夕實的博客-CSDN博客

微前端qiankun的源碼實現(xiàn)_嗶哩嗶哩_bilibili

如何設計實現(xiàn)微前端框架-qiankun

看滴普大前端是如何玩轉基于“qiankun”（乾坤）的微前端架構的_應用

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

微前端qiankun的實戰(zhàn)_嗶哩嗶哩_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（實踐及總結）--摘抄 - 建站教程

到了這里，關于微前端-qiankun：vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子應用的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！