微前端的不断探索之路—— qiankun 实战与思考！

全文目录：

- 开篇语
- 📝 前言
- 🛠️ 微前端是什么？为什么需要它？
- - 💡 先从“前端痛点”说起
  - 🧐 微前端的优势
- 🤹‍♀️ qiankun 简介与核心概念
- - 🌟 为什么选择 qiankun？
  - 📖 核心概念
- 🖥️ qiankun 实战案例——从 0 到 1 实现微前端
- - 🎯 案例目标
  - 📂 项目结构
  - 🚀 实现步骤
  - - **1. 主应用开发**
    - **2. 子应用开发**
- 📈 进阶拓展：微前端的最佳实践
- - 🛡️ 样式隔离
  - 🧩 共享数据
- 🎉 总结
- 文末

开篇语

哈喽，各位小伙伴们，你们好呀，我是喵手。运营社区：C站/掘金/腾讯云/阿里云/华为云/51CTO；欢迎大家常来逛逛

今天我要给大家分享一些自己日常学习到的一些知识点，并以文字的形式跟大家一起交流，互相学习，一个人虽可以走的更快，但一群人可以走的更远。

我是一名后端开发爱好者，工作日常接触到最多的就是Java语言啦，所以我都尽量抽业余时间把自己所学到所会的，通过文章的形式进行输出，希望以这种方式帮助到更多的初学者或者想入门的小伙伴们，同时也能对自己的技术进行沉淀，加以复盘，查缺补漏。

小伙伴们在批阅的过程中，如果觉得文章不错，欢迎点赞、收藏、关注哦。三连即是对作者我写作道路上最好的鼓励与支持！

📝 前言

前端世界的技术更新频率就像是一场没有终点的马拉松，快到你刚熟悉一个框架，下一个趋势就已经掀起了新的浪潮。而近年来，微前端作为“架构界的顶流”，用它的灵活性和模块化特性给我们带来了全新的开发思路。

今天，咱们就来聊聊微前端框架中的**“网红”选手**——qiankun。从它的基础概念到实战案例，再到我们在实际开发中的一些思考，希望带你更深地感受这个框架的魅力。

🛠️ 微前端是什么？为什么需要它？

💡 先从“前端痛点”说起

在前端项目逐渐复杂化后，我们常会遇到以下问题：

大而全的单体应用：代码膨胀到让人想辞职；
团队协作的尴尬：多个团队一起开发时，分工不清、冲突频繁；
技术栈的约束：新旧项目技术栈不统一，升级是场噩梦。

微前端的出现就是为了解决这些问题，简单来说，它就是把前端项目“拆分成小块”，让每个块独立开发、独立运行，最后再把它们整合到一起。

🧐 微前端的优势

独立性：每个子应用可以独立运行、部署，甚至使用不同的框架。
技术栈自由：团队 A 用 React，团队 B 用 Vue？完全没问题！
渐进式升级：老旧的代码不用全盘推翻，可以逐步替换。

🤹‍♀️ qiankun 简介与核心概念

🌟 为什么选择 qiankun？

qiankun 是基于 single-spa 的微前端实现，拥有以下优点：

简单易用：开箱即用，几乎没有学习成本；
完整性：解决了主流微前端框架的坑点，比如样式隔离、JS 沙箱等；
文档友好：中文社区给了我们无比友好的学习环境。

📖 核心概念

主应用与子应用：
主应用负责整体布局和子应用的加载，子应用专注于自己的功能开发。
沙箱机制：
通过沙箱隔离子应用之间的样式、JS，避免冲突。
生命周期：
qiankun 会为子应用提供生命周期钩子，比如 mount、unmount，让你可以精准控制它的加载与卸载。

🖥️ qiankun 实战案例——从 0 到 1 实现微前端

🎯 案例目标

实现一个简单的微前端项目，包括：

主应用使用 Vue 实现；
子应用分别使用 React 和 Vue。

📂 项目结构

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

🚀 实现步骤

1. 主应用开发

主应用技术栈：Vue3 + qiankun

安装依赖：
```
npm install qiankun --save
```

主应用代码实现：

// 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');

主应用的页面：

<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

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

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

生命周期钩子：

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