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

开篇语

哈喽，各位小伙伴们，你们好呀，我是喵手。运营社区：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 ！！！

⭐️若喜欢我，就请关注我叭。

⭐️若对您有用，就请点赞叭。
⭐️若有疑问，就请评论留言告诉我叭。

版权声明：本文由作者原创，转载请注明出处，谢谢支持！