微前端架构在大型项目中的落地经验（零基础入门教程）
一、开篇：微前端到底是什么？有什么用？
大家好，欢迎来到这篇微前端技术的入门教程。如果你是一位刚接触前端开发不久的新手，或者是对“微前端”这个词感到困惑的开发者，那这篇文章就是为你准备的！
1.1 微前端是个什么鬼？
简单来说，微前端就像是网页世界的“乐高积木”。传统开发中，一个大网站可能由很多功能组成，比如首页、用户中心、订单系统、客服模块等等。如果把这些都写在一起，项目会越来越臃肿、难维护。
而微前端的核心思想是：
把一个大网站拆分成多个小网站，每个小网站可以独立开发、测试和上线，最后再组合在一起，形成一个完整的网站。
这就像是盖房子，你可以把厨房、卧室、客厅分开建，然后拼接起来，而不是一开始就搭一个巨大的框架。
1.2 微前端适用于哪些场景？
- 公司有多个团队同时开发不同模块
- 想要逐步重构老项目而不是一次性重写
- 不同模块使用不同的技术栈（Vue/React/Angular）
- 多个产品之间需要共享 UI 组件或功能
二、环境准备：搭建我们的第一个微前端环境
为了更好地理解微前端的工作原理，我们将使用一个流行的微前端框架——qiankun。它是由阿里巴巴蚂蚁金服推出的开源库，适合新手入门学习。
说明：本文以 Vue3 + qiankun 构建主应用与子应用为例讲解，适合熟悉 Vue 的同学，不熟悉的请先学习 Vue 基础知识。
2.1 安装 Node.js 和 npm
- 前往官网下载安装 Node.js（v16+ 推荐）：https://nodejs.org
- 验证是否安装成功，在命令行输入：
node -v
npm -v
输出版本号则代表安装成功。
2.2 创建主应用（容器）
我们使用 Vite + Vue3 创建一个主应用：
npm create vite@latest main-app --template vue
cd main-app
npm install
npm run dev
打开 http://localhost:5173 确认项目运行正常。
接下来我们要引入 qiankun：
npm install qiankun
2.3 创建第一个子应用（child-app）
同样创建一个 Vue3 项目作为子应用：
npm create vite@latest child-app --template vue
cd child-app
npm install
npm run dev
现在你有了两个项目：
- 主应用（main-app）负责展示和加载其他模块
- 子应用（child-app）是我们未来拆分出去的功能块
三、核心概念：听不懂的专业术语，我来帮你翻译！
微前端听起来很酷，但涉及到很多专业名词。下面我来用通俗的语言解释几个关键概念。
3.1 主应用（主框架）
- 就像一个画布，负责展示页面结构。
- 负责加载、通信并协调各个子应用。
3.2 子应用（子系统）
- 每个子应用都是一个独立的小项目。
- 可以是 Vue、React 或者 Angular 应用。
- 在主应用中动态加载进来。
3.3 加载机制（Entry Point）
- 子应用通过一个入口地址被主应用加载，通常是远程的一个 HTML 页面或者 JS 包。
- 比如：http://localhost:7101
3.4 生命周期钩子函数（Lifecycle Hooks）
这是子应用必须提供的一组函数，用来告诉主应用：
- 我准备好加载了！
- 我开始渲染了！
- 我卸载了！
常见钩子包括：
bootstrap：初始化mount：挂载到页面上unmount：从页面移除
四、实战项目：跟着做一遍，你会更懂！
我们现在就动手实现一个简单的微前端项目。
4.1 子应用改造（child-app）
我们需要让这个子应用能被主应用识别并加载。
✅ 修改 main.js
import { createApp } from 'vue'
import App from './App.vue'
let app = null;
// bootstrap 是必须的生命周期
export async function bootstrap() {
console.log('子应用 bootstrapped');
}
// mount 是挂载时执行
export async function mount() {
console.log('子应用 mounted');
app = createApp(App);
app.mount('#app');
}
// unmount 是卸载时执行
export async function unmount() {
console.log('子应用 unmounted');
app.unmount();
}
注意：子应用默认使用的是 #app 作为容器，确保和主应用配置一致。
4.2 主应用加载子应用（main-app）
✅ 修改 main.js
import { createApp } from 'vue'
import App from './App.vue'
import { registerMicroApps, start } from 'qiankun';
const apps = [
{
name: "child-app",
entry: "//localhost:7101",
container: "#subapp-viewport", // 子应用插入的位置
activeRule: "/child",
props: {}
}
];
registerMicroApps(apps);
start();
createApp(App).use().mount('#app')
✅ 修改 index.html 添加子应用容器
<body>
<div id="app"></div>
<!-- 新增这个 div -->
<div id="subapp-viewport"></div>
</body>
4.3 启动两个项目并查看效果
分别运行：
# 主应用
npm run dev --port=7100
# 子应用
npm run dev --port=7101
访问 http://localhost:7100/child，你会发现子应用已经被加载进来了！
五、常见问题答疑：初学者容易踩的坑，我都替你想好了！
5.1 Q：子应用加载空白 / 不显示内容？
- 检查子应用是否导出了正确的生命周期函数。
- 确保容器 ID 与主应用中声明的
container一致。 - 使用浏览器控制台查看是否有 JS 报错。
5.2 Q：为什么子应用不能直接访问 window 上的对象？
- 微前端沙箱机制限制了全局作用域访问，避免污染。
- 推荐使用 props 或自定义通信方式传递数据。
5.3 Q：子应用路由冲突？
- 使用 history.pushState 时注意命名空间。
- 或改用 hash 路由避免干扰主应用。
5.4 Q：能不能不暴露子应用为一个服务？
- 可以将子应用打包成远程 JS 模块，并通过 SystemJS 加载。
- 适合生产部署，但需要额外构建配置。
六、学习建议：学完这篇还不够？下一步怎么走？
恭喜你完成了本篇教程的学习！如果你想要继续深入研究微前端，这里有几个推荐方向：
6.1 进阶学习路径建议：
| 阶段 | 内容 | 学习建议 |
|---|---|---|
| 初级 | 掌握基本流程 | 理解 qiankun 文档 + 实践单个子应用 |
| 中级 | 子应用通信 | 使用自定义事件或全局状态管理工具（如 Redux、Pinia） |
| 高级 | 动态加载 & 权限隔离 | 根据用户权限加载不同子应用，提升安全性 |
| 实战 | 多技术栈集成 | 尝试 React/Vue/Angular 子应用共存 |
6.2 推荐学习资料：
- qiankun 官方文档：https://qiankun.umijs.org/zh/guide/
- 微前端书籍：《Frontend in Microservices》
- GitHub 示例项目搜索关键词 “micro frontend demo”
6.3 加入交流社区：
- 微信公众号搜索 “微前端”
- 加入掘金、知乎等技术平台讨论小组
- 参与开源项目提交 Issue / PR，提升实战能力
结语：坚持就是进步的关键
学习微前端并不意味着你要一下子掌握所有东西。最重要的是，多动手、多实践、多思考。
希望这篇教程能够帮助你顺利开启微前端的大门。如果你觉得有用，也欢迎分享给身边正在学习前端的朋友～
一起加油，成为那个写出复杂项目还能条理清晰的前端工程师吧！🚀
📌 提示：如果你想要本教程配套的完整代码示例，也可以留言告诉我，我可以提供 Git 仓库地址哦~
评论 0