这堂课在解决什么真实痛点？

大多数前端团队在业务扩张到一定阶段后，都会撞上一堵墙：单体巨石应用越来越难维护。代码耦合严重、构建速度极慢、不同子业务想用不同框架却难以共存，甚至改一个模块都要全量重新发布。对于想从「业务开发」跃迁到「架构设计」的高级工程师而言，能独立拆分并融合多技术栈的大型中台项目，是必须具备的核心能力。

这门课的核心价值不在于单纯讲解微前端理论，而是聚焦于「落地」。它选择业界口碑较好、与 qiankun 同源的 MicroApp 框架作为载体，真实还原了企业级项目中常见的异构技术栈场景——Vue3、React18、Vue2、Nuxt2 并存，Vite 和 Webpack 混用。课程通过搭建一个完整的招聘网站，演示如何将上述四种不同技术栈的子应用无缝集成到一个主应用中。这意味着你学完后，面对现实中复杂的存量系统改造或新建大型平台时，不再只有「拆不拆得动」的焦虑，而是有了一套可复用的最佳实践方案。

适合什么基础？建议先看哪几块？

这门课不是给零基础学员准备的，甚至对刚入门中级的前端工程师来说也有门槛。读者需要已经熟练掌握 Vue 或 React 中任意一种框架的单页应用开发，理解组件化思想，并且对工程化构建工具（如 Vite 或 Webpack）有基本认知。如果你还停留在「只会写页面」的阶段，建议先补齐单应用开发的短板，再回头来看这门课，否则很容易在子应用通信和样式隔离的细节上陷入困惑。

在学习路径上，建议不要急于跳到最后的整合阶段。前期应重点消化「微前端原理」与「MicroApp 核心配置」部分，理解主应用如何注册、加载子应用，以及子应用如何暴露生命周期钩子。这是整个架构的地基。随后，针对课中提到的不同技术栈案例，建议挑选一个你最陌生的领域（比如你是 Vue 开发者，就重点看 React 或 Nuxt2 子应用的改造）深入对照练习。不要只看不练，微前端的坑往往藏在配置细节里，只有亲手把两个不同栈的应用跑通，才能真正理解样式隔离和数据通信的实现逻辑。

学完能独立做什么？资料怎么配合练习？

完成这门课的学习与实战后，你将具备独立主导中大型前端项目架构拆分的能力。具体表现为：能够评估现有巨石应用是否适合微前端改造，并能制定合理的拆分策略；能够搭建基于 MicroApp 的主子应用架构，解决多技术栈共存下的样式冲突、脚本隔离和全局状态共享问题；能够配置 CI/CD 流程，实现子应用的独立开发、独立部署与自动联调。

为了达到上述效果，建议采用「读源码 + 本地复现」的方式使用资料。课程提供的示例代码不要直接复制粘贴，而是要先尝试手动输入核心配置，理解每一行代码背后的意图。在练习时，可以尝试替换课中的业务场景，例如将一个电商项目的不同品类模块改造成子应用，或者尝试将课中的 Nuxt2 子应用替换为你更熟悉的 Svelte 或 Angular 应用，以验证你对 MicroApp 兼容性的掌握程度。这种主动变式的练习，才是将课程知识转化为职场竞争力的关键一步。

课程目录

├── 1-课程介绍/ │ └── [ 14M] 1-1 ：课程导学 ├── 2-为什么前端工程师都应该学习微前端？/ │ ├── [ 26M] 2-1 ：什么是微前端？为什么要学习微前端？ │ ├── [ 16M] 2-2 ：微前端实现方案大乱炖：iframe、single-spa、qiankun、micro-app │ └── [ 14M] 2-3 ：现代微前端架构理念：团队自治、独立部署、场景落地 ├── 3-微前端技术选型&微前端架构设计方案/ │ ├── [ 26M] 3-1 ：技术选型：基于micro-app框架的微前端应用 │ └── [ 12M] 3-2 ：架构设计：一站式微前端架构设计方案 ├── 4-开发环境搭建&后端API联调说明/ │ ├── [ 36M] 4-1 ：开发环境搭建：nvm、node │ └── [ 17M] 4-2 ：主、子应用的后端API联调说明 ├── 5-微前端实战1—主应用main-vue3/ │ ├── [2.5M] 5-1 ：本章导学 │ ├── [ 12M] 5-2 ：vue3+vite4主应用快速构建 │ ├── [ 78M] 5-3 ：vue3全家桶集成：vue-router、axios、element-plus、sass │ ├── [ 29M] 5-4 ：主应用接入微前端：MicroApp开箱即用、统筹全局 │ ├── [ 68M] 5-5 ：封装通用组件commonHeader、commonFooter │ ├── [9.0M] 5-6 ：封装容器组件mainContainer │ ├── [ 51M] 5-7 ：主应用登录页面布局 │ ├── [ 41M] 5-8 -1：主应用登录功能开发：axios封装、proxy跨域设置、MD5加密 │ ├── [ 38M] 5-9 -2：主应用登录功能开发：axios封装、proxy跨域设置、MD5加密 │ ├── [ 32M] 5-10 ：主应用登出功能开发：MicroApp全局数据通信 │ └── [4.1M] 5-

11 ：本章小结 ├── 6-微前端实战2—子应用child-nuxt2-home/ │ ├── [2.9M] 6-1 ：本章导学 │ ├── [ 26M] 6-2 ：nuxt2子应用快速构建 │ ├── [ 22M] 6-3 ：nuxt2集成1：sass │ ├── [ 33M] 6-4 ：nuxt2集成2：axios安装与二次封装 │ ├── [ 43M] 6-5 ：nuxt2子应用功能开发：实现首页SSR │ ├── [ 48M] 6-6 ：nuxt2子应用跨域请求：proxy跨域设置 │ ├── [ 22M] 6-7 ：接入微前端1：chrome插件解决本地跨域 │ ├── [ 41M] 6-8 ：接入微前端2：express自定义跨域服务 │ ├── [ 20M] 6-9 ：接入微前端3：ssr模式加载子应用 │ └── [ 25M] 6-

10 ：本章小结 ├── 7-微前端实战3—子应用child-vue2-job/ │ ├── [2.1M] 7-1 ：本章导学 │ ├── [9.8M] 7-2 ：vue2子应用快速构建 │ ├── [ 46M] 7-3 ：vue2全家桶集成：vue-router、axios、element-ui、sass │ ├── [ 67M] 7-4 ：vue2子应用功能开发1：职位列表 │ ├── [ 38M] 7-5 ：vue2子应用功能开发2：职位详情 │ ├── [ 12M] 7-6 ：vue2子应用跨域请求：proxy跨域设置 │ ├── [ 16M] 7-7 ：接入微前端1：如何解决vue2子应用跨域 │ ├── [ 14M] 7-8 ：接入微前端2：设置publicPath补全静态资源路径 │ └── [ 11M] 7-9 ：本章小结 ├── 8-微前端实战4—子应用child-vue3-enterprise/ │ ├── @ – 优质IT视频课程分享 │ ├── [2.7M] 8-1 ：本章导学 │ ├── [ 23M] 8-2 ：vue3+vite4子应用快速构建 │ ├── [ 74M] 8-3 ：vue3子应用功能开发1：企业列表 │ ├── [ 21M] 8-4 ：vue3子应用功能开发2：企业详情 │ ├── [ 47M] 8-5 ：接入微前端：全心全意为vite打造的iframe沙箱方案 │ └── [ 16M] 8-6 ：本章小 结 ├── 9-微前端实战5—子应用child-react18-about/ │ ├── [1.4M] 9-1 ：本章导学 │ ├── [6.0M] 9-2 ：react18+webpack5子应用快速构建 │ ├── [ 33M] 9-3 ：react18集成router、axios、sass │ ├── [ 12M] 9-4 ：react18子应用功能开发：关于我们 │ ├── [ 18M] 9-5 ：react子应用跨域请求：暴露webpack实现proxy跨域设置 │ ├── [ 28M] 9-6 ：接入微前端：设置publicPath补全静态资源路径 │ └── [6.4M] 9-7 ：本章小结 ├── 10-沙箱隔离&加载&缓存&数据通信&跨应用跳转等能力拓展/ │ ├── 【更多it资源 www.】 │ ├── [3.0M] 10-1 ：本章导学 │ ├── [ 38M] 10-2 ：沙箱隔离能力1：JS隔离 │ ├── [ 47M] 10-3 ：沙箱隔离能力2：样式隔离 │ ├── [ 21M] 10-4 ：沙箱隔离能力3：元素隔离 │ ├── [ 22M] 10-5 ：加载能力：微前端的生命周期 │ ├── [ 28M] 10-6 ：数据通信能力1：主子通信 │ ├── [ 43M] 10-7 ：数据通信能力2：子主通信 │ ├── [ 31M] 10-8 ：数据通信能力3：子应用之间通信 │ ├── [ 14M] 10-9 ：跨应用跳转能力1：主应用跳转子应用 │ ├── [ 27M] 10-10 ：跨应用跳转能力2：子应用跳转主应用 │ ├── [8.0M] 10-11 ：跨应用跳转能力3：子应用之间跳转 │ └── [ 55M] 10-

12 本章小结 ├── 11-微前端性能优化实践/ │ ├── [5.8M] 11-1 ：本章导学 │ ├── [ 40M] 11-2 ：微前端预加载 │ ├── [ 27M] 11-3 ：微前端资源共享 │ ├── [ 34M] 11-4 ：子应用缓存 │ ├── [ 32M] 11-5 ：子应用的丝滑转场 │ └── [8.1M] 11-6 ：本章小结 ├── 12-微前端应用如何优雅上线？/ │ ├── [8.7M] 12-1 ：本章导学 │ ├── [ 30M] 12-2 ：发布工具准备：putty、xftp │ ├── [ 39M] 12-3 ：服务器环境依赖：Node、Nginx、Screen │ ├── [ 53M] 12-4 ：封装config文件统一管理开发和生产环境域名 │ ├── [ 66M] 12-5 ：nuxt2子应用部署 │ ├── [ 38M] 12-6 ：产环境Nginx配置 │ ├── [ 28M] 12-7 ：vue2子应用部署 │ ├── [ 13M] 12-8 ：vue3子应用部署 │ ├── [ 17M] 12-9 ：react18子应用部署 │ ├── [ 35M] 12-10 ：vue3基座应用部署 │ ├── [ 20M] 12-

11 ：Nginx开启Gzip压缩：为微前端应用增速 │ ├── [ 13M] 12-12 ：查缺补漏1：优化微前端应用样式 │ ├── [ 12M] 12-13 ：查缺补漏2：解决vue2子应用白屏问题 │ ├── [ 60M] 12-14 ：查缺补漏3：结合Vuex优化基座应用的导航栏选中问题 │ ├── [ 33M] 12-15 ：查缺补漏4：解决子应用页面重定向和token透传问题 │ └── [7.2M] 12-

16 ：本章小结 ├── 13-工程化微前端的另一种方案/ │ ├── [ 17M] 13-1 ：MPA架构治好了我的精神内耗 │ ├── [ 40M] 13-2 ：快速搭建MPA脚手架 │ ├── [ 39M] 13-3 ：微应用的跨应用跳转与内部路由跳转 │ └── [ 20M] 13-4 ：微应用的组件复用 ├── 14-课程总结/ │ └── [ 14M] 14-1 ：课程回顾 └── 资料代码/