微前端架构在大型项目中的落地经验（初学者教程）

开篇：微前端是什么？为什么需要它？

你有没有想过，像京东、淘宝、美团这样的大型网站是如何开发和维护的？这些平台功能非常复杂，页面数以千计，团队人数可能高达几十甚至上百人。如果所有代码都放在一个项目中，就会出现“牵一发而动全身”的问题 —— 修改一小部分代码，可能导致整个网站出错。

为了解决这个问题，微前端（Micro Frontends）应运而生。它借鉴了后端的微服务思想，把一个大前端项目拆分成多个小项目（也就是“微应用”），每个小项目可以独立开发、测试、部署，最终再组合成一个完整的系统。

微前端的核心优势：

• 🧱 模块化开发：每个团队负责一个小项目，互不干扰
• ⚡ 灵活升级：技术栈可以不同（比如有的用 Vue，有的用 React）
• 🔄 快速迭代：某个功能出问题时，不会影响其他部分

✅ 初学者思维导图：如果你是第一次听说微前端，只需要记住它是“把大前端切成小块来管理”的方式。

---

环境准备：从零开始搭建微前端开发环境

我们先来搭建一个适合微前端开发的本地开发环境。为了简化入门门槛，我们使用最常见的技术组合：Vue.js 作为主框架，Vite 作为构建工具，Qiankun 作为微前端解决方案。

第一步：安装 Node.js 和 npm

1. 下载并安装 Node.js（推荐 LTS 版本）
2. 安装完成后，在命令行输入以下命令查看版本：

node -v
npm -v

你应该看到类似如下输出（数字可能不同）：

v18.17.1
9.6.7

第二步：创建主工程（宿主应用）

我们将创建一个简单的主应用（Host App），用来容纳我们的子应用。

npm create vite@latest host-app
# 选择 vue 框架，不启用 TypeScript
cd host-app
npm install

然后启动项目：

npm run dev

打开浏览器访问 http://localhost:5173，看到 Vite + Vue 的欢迎页面就说明成功了。

第三步：安装 Qiankun 微前端库

接下来我们安装 Qiankun 这个流行的微前端方案：

npm install qiankun --save

---

核心概念讲解：什么是微应用？它们之间怎么通信？

核心术语一览表：

术语	中文名	含义
Host App	主应用	相当于“总指挥”，用来加载和管理所有子应用
Micro App	子应用	每个子项目，相当于一个独立的小网站
Communication	通信机制	子应用之间如何共享数据（如用户信息）

拆解理解：就像拼积木一样

你可以把微前端想象成搭积木游戏：

• 每个子应用就是一个积木块
• 主应用是一个展示台，把这些积木放上去，并控制它们的位置和显示方式
• 积木块之间也可以互相传话（比如告诉另一个积木当前用户是谁）

---

实战项目：动手搭建你的第一个微前端应用

我们来一步步完成这个实战项目：

• 创建两个子应用（product-app 和 cart-app）
• 把它们加载到主应用中
• 实现简单的跨应用通信（比如购物车数量更新）

第一步：创建第一个子应用 product-app

npm create vite@latest product-app
# 同样选 vue，不要 ts
cd product-app
npm install

修改 main.js，支持被主应用加载

import { createApp } from 'vue'
import App from './App.vue'

// 新增判断是否是嵌入运行
if (window.__POWERED_BY_QIANKUN__) {
  let app = null;
  window.mount = () => {
    app = createApp(App).mount('#app');
  };
  window.unmount = () => {
    app = null;
  };
} else {
  createApp(App).mount('#app');
}

第二步：创建第二个子应用 cart-app（结构相同）

重复上面步骤创建 cart-app，修改 main.js 做同样处理。

第三步：在主应用中加载这两个子应用

编辑 host-app/src/main.js 文件：

import { createApp } from 'vue'
import App from './App.vue'
import { registerMicroApps, start } from 'qiankun';

const apps = [
  {
    name: "product-app",
    entry: "//localhost:5174",
    container: "#subapp-viewport",
    activeRule: "/product",
  },
  {
    name: "cart-app",
    entry: "//localhost:5175",
    container: "#subapp-viewport",
    activeRule: "/cart",
  }
];

registerMicroApps(apps);
start({ prefetch: "all" });

createApp(App).mount('#app')

第四步：添加路由切换功能

我们在主应用中添加导航菜单：

<!-- App.vue -->
<template>
  <div id="app">
    <nav>
      <a href="/product">商品页</a> | 
      <a href="/cart">购物车</a>
    </nav>
    <div id="subapp-viewport"></div>
  </div>
</template>

现在分别启动三个项目：

# 主应用
cd host-app && npm run dev # 访问 http://localhost:5173

# 商品子应用
cd product-app && npm run dev # 默认端口 5174

# 购物车子应用
cd cart-app && npm run dev # 默认端口 5175

点击导航栏就可以在两个子应用间切换啦！

---

常见问题解答区

❓ 我为什么看不到子应用的内容？

• 检查子应用的 main.js 是否有写好 mount/unmount 函数
• 查看主应用调用的 URL 端口号是否正确
• 控制台是否有 “Cross-Origin” 报错？需要配置跨域请求头

❓ 不同子应用之间能共享数据吗？

当然可以！可以使用全局变量或者 Qiankun 提供的通信 API：

// 在主应用中设置共享数据
window.globalData = {
  user: { id: 1, name: '张三' }
};

// 在子应用中读取
console.log(window.globalData.user.name);

更高级的方式可以使用 event bus 或者状态管理库（Vuex/Pinia）结合微前端来做统一状态同步。

❓ 微前端项目上线后如何部署？

通常的做法是：

1. 子应用打包上传 CDN（如阿里云 OSS）
2. 主应用通过远程地址加载子应用 JS 包
3. 使用 Nginx 或其它网关做域名统一路由

---

学习建议：下一步该学什么？

恭喜你完成了第一个微前端项目！以下是进阶学习路径建议：

🔹 基础巩固阶段

• ✅ 掌握 Vue/React 基本语法
• ✅ 理解模块化与组件化开发思想
• ✅ 熟悉 Webpack/Vite 等构建工具

🔹 微前端进阶方向

方向	建议学习内容
子应用通信	事件广播、全局状态管理（如 Pinia 共享）
动态加载	根据权限或业务动态加载不同的子应用
错误隔离	防止一个子应用崩溃导致整个系统挂掉
SEO 支持	如何让搜索引擎识别微前端内容

🔹 推荐阅读资料

• 官方文档：Qiankun 文档
• 视频课程：B站搜索《微前端实战》可找到完整项目演练
• 实战项目：尝试将一个旧系统拆分为多个微前端应用

---

总结

本教程带着你从零开始了解微前端是什么、为什么要用它，并手把手带你搭建了一个包含两个子应用的完整项目。虽然只是冰山一角，但这已经为你打开了微前端世界的大门。

📌 练习建议：尝试自己新建第三个子应用 user-center，并实现与主应用的登录信息共享功能。这样你就能对整个微前端体系有更深的理解。

继续加油吧，未来的前端工程师！