開篇語

哈嘍，各位小伙伴們，你們好呀，我是喵手。運營社區：C站/掘金/騰訊云/阿里云/華為云/51CTO；歡迎大家常來逛逛

??今天我要給大家分享一些自己日常學習到的一些知識點，并以文字的形式跟大家一起交流，互相學習，一個人雖可以走的更快，但一群人可以走的更遠。

??我是一名后端開發愛好者，工作日常接觸到最多的就是Java語言啦，所以我都盡量抽業余時間把自己所學到所會的，通過文章的形式進行輸出，希望以這種方式幫助到更多的初學者或者想入門的小伙伴們，同時也能對自己的技術進行沉淀，加以復盤，查缺補漏。

小伙伴們在批閱的過程中，如果覺得文章不錯，歡迎點贊、收藏、關注哦。三連即是對作者我寫作道路上最好的鼓勵與支持！

📝 前言

前端世界的技術更新頻率就像是一場沒有終點的馬拉松，快到你剛熟悉一個框架，下一個趨勢就已經掀起了新的浪潮。而近年來，微前端作為“架構界的頂流”，用它的靈活性和模塊化特性給我們帶來了全新的開發思路。

今天，咱們就來聊聊微前端框架中的**“網紅”選手**——qiankun。從它的基礎概念到實戰案例，再到我們在實際開發中的一些思考，希望帶你更深地感受這個框架的魅力。

---

🛠? 微前端是什么？為什么需要它？

💡 先從“前端痛點”說起

在前端項目逐漸復雜化后，我們常會遇到以下問題：

1. 大而全的單體應用：代碼膨脹到讓人想辭職；
2. 團隊協作的尷尬：多個團隊一起開發時，分工不清、沖突頻繁；
3. 技術棧的約束：新舊項目技術棧不統一，升級是場噩夢。

微前端的出現就是為了解決這些問題，簡單來說，它就是把前端項目“拆分成小塊”，讓每個塊獨立開發、獨立運行，最后再把它們整合到一起。

🧐 微前端的優勢

• 獨立性：每個子應用可以獨立運行、部署，甚至使用不同的框架。
• 技術棧自由：團隊 A 用 React，團隊 B 用 Vue？完全沒問題！
• 漸進式升級：老舊的代碼不用全盤推翻，可以逐步替換。

---

🤹?♀? qiankun 簡介與核心概念

🌟 為什么選擇 qiankun？

qiankun 是基于 single-spa 的微前端實現，擁有以下優點：

• 簡單易用：開箱即用，幾乎沒有學習成本；
• 完整性：解決了主流微前端框架的坑點，比如樣式隔離、JS 沙箱等；
• 文檔友好：中文社區給了我們無比友好的學習環境。

📖 核心概念

1. 主應用與子應用：
   主應用負責整體布局和子應用的加載，子應用專注于自己的功能開發。

2. 沙箱機制：
   通過沙箱隔離子應用之間的樣式、JS，避免沖突。

3. 生命周期：
   qiankun 會為子應用提供生命周期鉤子，比如 mount、unmount，讓你可以精準控制它的加載與卸載。

---

🖥? qiankun 實戰案例——從 0 到 1 實現微前端

🎯 案例目標

實現一個簡單的微前端項目，包括：

1. 主應用使用 Vue 實現；
2. 子應用分別使用 React 和 Vue。

📂 項目結構

micro-frontend-demo/
├── main-app/        # 主應用（Vue）
├── sub-app-react/   # 子應用1（React）
├── sub-app-vue/     # 子應用2（Vue）

🚀 實現步驟

1. 主應用開發

主應用技術棧：Vue3 + qiankun

1. 安裝依賴：

   npm install qiankun --save
   

2. 主應用代碼實現：

   // main.js
   import { createApp } from 'vue';
   import App from './App.vue';
   import { registerMicroApps, start } from 'qiankun';const app = createApp(App);// 注冊子應用
   registerMicroApps([{name: 'sub-app-react',entry: '//localhost:3000',  // 子應用的入口container: '#sub-app-container', // 子應用掛載的容器activeRule: '/react', // 激活規則},{name: 'sub-app-vue',entry: '//localhost:8081',container: '#sub-app-container',activeRule: '/vue',},
   ]);// 啟動 qiankun
   start();app.mount('#app');
   

3. 主應用的頁面：

   <template><div><h1>主應用</h1><nav><a href="/react">React 子應用</a><a href="/vue">Vue 子應用</a></nav><div id="sub-app-container"></div></div>
   </template>
   

2. 子應用開發

子應用 1：React

1. 配置入口：
   在 package.json 中添加：

   {"name": "sub-app-react","main": "index.js","homepage": "/react"
   }
   

2. 生命周期鉤子：

   import ReactDOM from 'react-dom';
   import App from './App';function render() {ReactDOM.render(<App />, document.getElementById('root'));
   }if (!window.__POWERED_BY_QIANKUN__) {render();
   }export async function bootstrap() {console.log('React app bootstraped');
   }export async function mount() {render();
   }export async function unmount() {ReactDOM.unmountComponentAtNode(document.getElementById('root'));
   }
   

子應用 2：Vue
類似 React，只需調整為 Vue 的生命周期鉤子即可。

---

📈 進階拓展：微前端的最佳實踐

🛡? 樣式隔離

使用 qiankun 提供的樣式隔離能力，防止主應用和子應用之間的 CSS 沖突。

🧩 共享數據

利用 qiankun 的通信 API 實現主應用與子應用之間的數據共享。例如：

// 主應用中
import { initGlobalState } from 'qiankun';const actions = initGlobalState({user: 'Alice',
});actions.onGlobalStateChange((state) => {console.log('主應用監聽到狀態變化：', state);
});// 子應用中
import { getActions } from 'qiankun';const actions = getActions();
actions.setGlobalState({ user: 'Bob' });

---

🎉 總結

微前端的魅力在于將復雜拆解為簡單，而 qiankun 則以其易用性和穩定性成為了開發者的最佳選擇。在本文中，我們從理論到實踐，全方位體驗了 qiankun 的強大功能。不僅如此，我們還探討了它在實際開發中的一些進階玩法。

🌟 如果你還在為前端項目的復雜性頭疼，不妨試試微前端！期待你的探索之路更有趣、更高效。

… …

文末

好啦，以上就是我這期的全部內容，如果有任何疑問，歡迎下方留言哦，咱們下期見。

… …

學習不分先后，知識不分多少；事無巨細，當以虛心求教；三人行，必有我師焉！！！

wished for you successed ！！！

---

??若喜歡我，就請關注我叭。

??若對您有用，就請點贊叭。
??若有疑問，就請評論留言告訴我叭。

---

版權聲明：本文由作者原創，轉載請注明出處，謝謝支持！