title: Vue微前端架構與Qiankun實踐理論指南
date: 2024/6/15
updated: 2024/6/15
author: cmdragon
excerpt:
這篇文章介紹了微前端架構概念，聚焦於如何在Vue.js專案中應用Qiankun框架實現模組化和元件化，以達到高效開發和維護的目的。討論了Qiankun的原理、如何設定主應用與子應用的通訊，以及如何解決跨域問題和最佳化整合過程，從而實現前端應用的靈活擴充套件與組織。
categories:
- 前端開發
tags:
- 微前端
- Vue.js
- Qiankun
- 框架
- 架構
- 通訊
- 整合
掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長
第一章：微前端架構概述
微前端概念介紹
微前端是一種設計理念，它借鑑了微服務架構的思想，將一個龐大的前端應用拆分成多個獨立的小型應用（微應用）。每個微應用可以獨立開發、測試、部署和維護，並且可以獨立執行。這些微應用透過一定的機制（如路由、事件匯流排等）整合在一起，形成一個完整的應用程式。微前端的核心思想是將前端應用分解為一組可獨立維護、獨立部署的子應用，從而提高開發效率、降低維護成本，同時保證系統的靈活性和可擴充套件性。
微前端架構的優勢
- 技術棧無關：不同的團隊可以使用不同的技術棧進行開發，例如，一個團隊可以使用React，另一個團隊可以使用Vue，而主應用可以使用Angular。這種靈活性使得團隊能夠選擇最適合他們需求的技術棧。
- 獨立部署：每個微應用可以獨立部署，這意味著一個微應用的更新不會影響到其他微應用，從而提高了部署的靈活性和安全性。
- 易於擴充套件：隨著專案的增長，可以輕鬆地新增新的微應用，而無需重構整個應用。這種模組化的設計使得應用更容易擴充套件和維護。
- 團隊協作：微前端架構鼓勵並行開發，不同的團隊可以獨立工作，互不干擾，從而提高了團隊協作的效率。
- 可維護性：由於每個微應用都是獨立的，因此它們可以獨立維護，這有助於降低維護成本和提高維護效率。
微前端架構的挑戰
- 通訊複雜性：微應用之間的通訊可能會變得複雜，需要設計良好的通訊機制來確保資料的一致性和實時性。
- 樣式隔離：確保微應用之間的樣式不會相互干擾是一個挑戰，需要使用CSS隔離技術來避免樣式衝突。
- 效能問題：微前端架構可能會引入額外的效能開銷，例如，微應用之間的載入和通訊可能會影響應用的響應速度。
- 技術債務：隨著時間的推移，不同的微應用可能會使用不同的技術棧和版本，這可能導致技術債務的積累。
微前端架構的應用場景
- 大型企業級應用：對於大型企業級應用，微前端架構可以幫助管理複雜的程式碼庫，提高開發效率。
- 多團隊協作專案：在多團隊協作的專案中，微前端架構可以減少團隊之間的依賴，提高協作效率。
- 遺留系統現代化：對於需要現代化的遺留系統，微前端架構可以逐步替換舊的功能模組，而不影響整個系統的執行。
- 多租戶應用：在多租戶應用中，微前端架構可以允許每個租戶擁有自己的前端應用，同時共享後端服務。
第二章：Vue與微前端
Vue.js的介紹
Vue.js 是一個漸進式 JavaScript 框架，用於構建使用者介面。它易於上手，同時提供了豐富的功能，使得它非常適合構建複雜的單頁應用（SPA）。Vue.js
的核心庫專注於檢視層，易於與第三方庫或已有專案整合。此外，Vue.js 還提供了 Vue Router 用於頁面路由和 Vuex 用於狀態管理，以及
Vue CLI 用於快速搭建專案。
Vue.js在微前端架構中的應用
在微前端架構中，Vue.js 可以作為一個獨立的微應用來使用。每個微應用可以獨立開發、測試和部署，然後透過一定的整合機制（如路由、事件匯流排等）與其他微應用整合在一起。Vue.js
的模組化設計使得它非常適合微前端架構，因為它允許開發者將應用拆分成多個可複用的元件。
Vue.js與其他前端框架的整合
Vue.js 可以與其他前端框架整合，例如 React 或 Angular。這種整合可以透過以下幾種方式實現：
- 共享庫：可以建立一個共享庫，包含一些通用的元件或工具函式，這些可以在不同的微應用中使用，無論它們是基於 Vue.js 還是其他框架。
- 微應用容器：可以使用微應用容器（如 Single-SPA）來整合不同的微應用。這些容器可以管理不同框架的微應用的生命週期，並提供通訊機制。
- 自定義整合：如果需要更精細的控制，可以編寫自定義的整合程式碼，以實現不同框架之間的通訊和狀態共享。
- API閘道器：對於後端服務，可以使用 API 閘道器來統一不同微應用的後端介面，使得前端應用可以無縫地呼叫後端服務。
- 事件匯流排：可以使用事件匯流排來實現微應用之間的通訊，無論它們是基於 Vue.js 還是其他框架。
第三章：Qiankun框架介紹
Qiankun框架的起源與發展
Qiankun 是一個由螞蟻金服開源的企業級微前端框架，它允許你將不同框架開發的應用作為微應用整合到主應用中，同時保持每個微應用的獨立性和完整性。Qiankun
的名字來源於中國古代神話中的“千鈞一髮”，寓意著它能夠承載大量的微應用，並且能夠在關鍵時刻發揮作用。
Qiankun 的起源可以追溯到螞蟻金服內部對微前端架構的需求，隨著微前端架構的流行，Qiankun
逐漸發展成為一個成熟的微前端解決方案，並在開源社群中獲得了廣泛的關注和認可。
Qiankun框架的核心概念
Qiankun 的核心概念包括：
- 微應用：指被整合到主應用中的獨立應用，可以是基於任何前端框架開發的。
- 主應用：指承載和管理微應用的容器應用，通常負責微應用的載入、解除安裝、通訊等。
- 沙箱：Qiankun 使用沙箱技術來隔離微應用之間的執行環境，確保它們不會相互干擾。
- 基座應用：在 Qiankun 中，主應用也被稱為基座應用，它是整個微前端架構的入口。
Qiankun框架的架構設計
Qiankun 的架構設計主要包括以下幾個部分：
- 入口：微應用的入口通常是它的 HTML 檔案，Qiankun 透過載入這個 HTML 檔案來啟動微應用。
- 生命週期：Qiankun 管理微應用的生命週期，包括載入、掛載、解除安裝等。
- 通訊：Qiankun 提供了全域性的狀態管理機制，允許微應用之間進行通訊。
- 樣式隔離：Qiankun 使用 Shadow DOM 或 CSS 隔離技術來防止樣式衝突。
- 沙箱：Qiankun 使用沙箱技術來隔離微應用的執行環境，確保它們不會相互干擾。
Qiankun框架的功能特點
Qiankun 的功能特點包括：
- 輕量級：Qiankun 本身非常輕量，不會對主應用或微應用造成負擔。
- 高效能：Qiankun 的架構設計保證了微應用的載入和執行效率。
- 易用性：Qiankun 提供了簡單的 API 和配置選項，使得整合微應用變得容易。
- 可擴充套件性：Qiankun 的設計允許開發者根據需要擴充套件其功能。
- 社群支援：Qiankun 擁有一個活躍的開源社群，提供了豐富的文件和示例。
- 沙箱技術：Qiankun 使用沙箱技術來隔離微應用的執行環境，確保它們不會相互干擾。
- 樣式隔離：Qiankun 使用 Shadow DOM 或 CSS 隔離技術來防止樣式衝突。
- 全域性狀態管理：Qiankun 提供了全域性的狀態管理機制，允許微應用之間進行通訊。
第四章：Qiankun框架安裝與配置
Qiankun框架的安裝方法
Qiankun 框架的安裝通常涉及到以下步驟：
-
環境準備：確保你的開發環境中已經安裝了 Node.js 和 npm 或 yarn。
-
建立專案：使用腳手架工具建立一個新的專案，或者將 Qiankun 整合到現有的專案中。
-
安裝 Qiankun：在專案目錄下，執行以下命令來安裝 Qiankun：
npm install qiankun或者使用 yarn：
yarn add qiankun -
整合 Qiankun：根據你的專案型別（如 React、Vue、Angular 等），按照 Qiankun 官方文件的指引進行整合。
Qiankun框架的基本配置
Qiankun 的基本配置通常包括以下幾個部分：
- 註冊微應用：在主應用中，使用
registerMicroApps方法來註冊微應用，包括微應用的名稱、入口、容器等資訊。 - 啟動 Qiankun：在主應用中，使用
start方法來啟動 Qiankun，並配置一些全域性的生命週期鉤子。 - 配置路由：根據需要配置主應用的路由，以便正確地載入和切換微應用。
Qiankun框架的高階配置
Qiankun 的高階配置包括但不限於：
- 沙箱配置：可以配置沙箱的型別（如 LegacySandbox、StrictSandbox 等）以及沙箱的執行模式。
- 樣式隔離：可以配置樣式隔離的策略，如使用 Shadow DOM 或 CSS 隔離。
- 全域性狀態管理：可以配置全域性狀態管理，如使用 Redux、Vuex 等。
- 生命週期鉤子：可以配置微應用的生命週期鉤子，如載入前、載入後、掛載前、掛載後、解除安裝前、解除安裝後等。
- 通訊：可以配置微應用之間的通訊機制，如使用全域性事件匯流排、Redux 等。
- 載入微應用：可以配置微應用的載入策略，如使用 prefetch、lazy 等。
- 錯誤處理：可以配置錯誤處理機制，如使用全域性錯誤處理器。
- 自定義渲染：可以配置自定義渲染邏輯，如使用自定義的載入動畫、錯誤頁面等。
- 許可權控制：可以配置許可權控制機制，如使用路由守衛、許可權驗證等。
- 日誌記錄：可以配置日誌記錄機制，如使用 console.log、第三方日誌庫等。
第五章：Vue微前端專案搭建
Vue微前端專案的規劃
在搭建Vue微前端專案之前，需要進行詳細的規劃，包括：
- 需求分析：明確專案的需求，包括功能需求、效能需求、安全需求等。
- 技術選型：選擇合適的技術棧，包括前端框架（Vue）、構建工具（Webpack）、狀態管理（Vuex）、路由管理（Vue Router）等。
- 架構設計：設計專案的架構，包括微應用劃分、通訊機制、狀態管理、樣式隔離等。
- 開發流程：制定開發流程，包括開發規範、程式碼審查、版本控制等。
- 部署策略：制定部署策略，包括部署環境、部署流程、監控機制等。
Vue微前端專案的搭建步驟
搭建Vue微前端專案通常包括以下步驟：
- 環境準備：安裝Node.js、npm或yarn，並配置好開發環境。
- 建立主應用：使用Vue CLI建立主應用，並配置好專案的基本結構。
- 建立微應用：使用Vue CLI建立微應用，並配置好專案的基本結構。
- 整合Qiankun：在主應用和微應用中整合Qiankun框架，並配置好相關引數。
- 配置路由：配置主應用和微應用的路由，以便正確地載入和切換微應用。
- 樣式隔離：配置樣式隔離策略，如使用Shadow DOM或CSS隔離。
- 狀態管理：配置狀態管理策略，如使用Vuex或Redux。
- 通訊機制：配置微應用之間的通訊機制，如使用全域性事件匯流排或Redux。
- 測試：進行單元測試、整合測試和效能測試，確保專案質量。
- 部署：將專案部署到生產環境，並進行監控和維護。
Vue微前端專案的目錄結構
Vue微前端專案的目錄結構通常包括以下幾個部分：
-
主應用：
-
src/：原始碼目錄assets/：靜態資源目錄components/：公共元件目錄views/：頁面目錄App.vue：主元件main.js：入口檔案
-
public/：公共資源目錄 -
package.json：專案配置檔案 -
vue.config.js：Vue CLI配置檔案
-
-
微應用：
-
src/：原始碼目錄assets/：靜態資源目錄components/：公共元件目錄views/：頁面目錄App.vue：主元件main.js：入口檔案
-
public/：公共資源目錄 -
package.json：專案配置檔案 -
vue.config.js：Vue CLI配置檔案
-
-
Qiankun配置：
src/micro-apps.js：微應用註冊配置檔案src/lifecycles.js：生命週期鉤子配置檔案
-
其他：
.eslintrc.js：ESLint配置檔案.gitignore：Git忽略檔案README.md：專案說明檔案
第六章：Vue微前端專案開發
Vue微前端專案的開發流程
Vue微前端專案的開發流程通常包括以下幾個步驟：
- 需求分析：明確每個微應用的功能需求，確定開發任務和目標。
- 技術選型：根據需求選擇合適的技術棧，包括前端框架（Vue）、構建工具（Webpack）、狀態管理（Vuex）、路由管理（Vue Router）等。
- 架構設計：設計每個微應用的架構，包括元件劃分、狀態管理、路由配置等。
- 編碼實現：根據設計文件進行編碼實現，包括編寫Vue元件、配置Vuex狀態管理、設定Vue Router路由等。
- 單元測試：編寫單元測試用例，對元件和功能進行測試，確保程式碼質量。
- 整合測試：將微應用整合到主應用中，進行整合測試，確保微應用之間能夠正常通訊和協作。
- 效能最佳化：對專案進行效能最佳化，包括程式碼最佳化、資源最佳化、網路最佳化等。
- 部署上線：將專案部署到生產環境，並進行監控和維護。
Vue微前端專案的開發工具
Vue微前端專案的開發工具通常包括以下幾個：
- 編輯器：如VSCode、Sublime Text、WebStorm等，用於編寫程式碼。
- 構建工具：如Webpack、Vite等，用於打包和構建專案。
- 版本控制：如Git，用於管理程式碼版本和協作開發。
- 除錯工具：如Chrome DevTools、Vue DevTools等，用於除錯和最佳化程式碼。
- 測試工具：如Jest、Mocha、Chai等，用於編寫和執行測試用例。
- 效能監控工具：如Lighthouse、WebPageTest等，用於監控和分析專案效能。
Vue微前端專案的開發技巧
Vue微前端專案的開發技巧包括以下幾個：
- 元件化開發：將頁面拆分成獨立的Vue元件，提高程式碼的可維護性和複用性。
- 狀態管理：使用Vuex或Redux等狀態管理庫，集中管理應用狀態，方便資料共享和狀態更新。
- 路由管理：使用Vue Router或React Router等路由管理庫，配置路由規則，實現頁面跳轉和引數傳遞。
- 樣式隔離：使用CSS Modules或Shadow DOM等技術，實現樣式隔離，避免樣式衝突。
- 程式碼分割：使用Webpack的程式碼分割功能，將程式碼拆分成多個塊，按需載入，提高頁面載入速度。
- 懶載入：使用Vue的非同步元件或Webpack的懶載入功能，實現元件的懶載入，提高頁面載入速度。
- 效能最佳化：使用Lighthouse、WebPageTest等工具，對專案進行效能分析，並進行最佳化，提高頁面效能。
- 單元測試：編寫單元測試用例，對元件和功能進行測試，確保程式碼質量。
- 整合測試：將微應用整合到主應用中，進行整合測試，確保微應用之間能夠正常通訊和協作。
- 持續整合：使用Jenkins、Travis CI等持續整合工具，自動化構建、測試和部署流程。
附錄
Vue微前端專案相關資源
-
官方文件：Vue.js 官方文件提供了關於 Vue 微前端架構的詳細資訊和指南，包括如何使用 Vue.js 進行微前端開發。
-
社群論壇：Vue.js 社群論壇是一個活躍的地方，開發者可以在這裡提問、分享經驗和資源。
-
開源專案：GitHub 上有許多開源的 Vue 微前端專案，可以提供參考和學習的案例。
-
教程和部落格：網路上有很多關於 Vue 微前端開發的教程和部落格，可以幫助開發者學習和掌握相關技術。
-
微前端框架：如 qiankun、single-spa、wujie 等，這些框架提供了微前端架構的實現，可以幫助開發者快速搭建微前端專案。
Vue微前端專案常見問題解答
-
什麼是微前端？微前端是一種將多個小型前端應用組合成一個大型應用的架構方式，每個應用負責一部分功能，可以獨立開發和部署。
-
為什麼使用微前端？使用微前端可以提高開發效率、可維護性、可擴充套件性、使用者體驗和安全性。
-
如何選擇微前端框架？選擇微前端框架時，需要考慮框架的穩定性、社群支援、文件完善程度、功能豐富程度等因素。
-
如何進行微前端專案的部署？微前端專案的部署需要考慮各個應用的獨立部署和協同部署，可以使用容器化技術或雲服務進行部署。
-
如何處理微前端專案中的樣式衝突？可以透過 CSS 隔離、名稱空間、CSS-in-JS 等技術來處理微前端專案中的樣式衝突。
Vue微前端專案開發工具介紹
-
Vue CLI：Vue CLI 是 Vue.js 官方提供的腳手架工具，可以幫助開發者快速搭建 Vue 專案，包括微前端專案。
-
Webpack：Webpack 是一個現代 JavaScript 應用程式的靜態模組打包器，可以用於構建 Vue 微前端專案。
-
qiankun：qiankun 是一個基於 single-spa 的微前端框架，提供了微前端架構的實現，可以幫助開發者快速搭建微前端專案。
-
single-spa：single-spa 是一個用於構建微前端架構的 JavaScript 庫，可以用於構建 Vue 微前端專案。
-
wujie：wujie 是一個基於 Web Components 的微前端框架，提供了微前端架構的實現，可以幫助開發者快速搭建微前端專案。