这门课解决什么工作场景

当企业级前端项目逐渐庞大，单一技术栈难以维系，或需要团队并行开发、独立部署时，微前端架构成为必选项。本课程的核心价值不在于泛泛而谈概念，而是聚焦于一个高难度的实战场景：如何在同一个主应用中，无缝集成 Vue 2、Vue 3、React 15 和 React 16 四种不同技术栈的子应用。

这对于正在经历系统重构、需要兼容老旧代码与新功能模块的开发人员来说，是极高频的痛点。课程以“汽车资讯平台”为载体，还原了真实的工程复杂度——既要处理不同版本 React 的共存冲突，又要构建独立的后端服务来协调请求。如果你在工作中面临技术栈碎片化、巨石应用维护困难，或者想深入理解微前端底层原理而非仅停留在使用现成框架层面，这门课提供的思路非常具体且可落地。

适合什么基础与阅读建议

本课程难度跨度较大，适合具备一定前端基础、希望向架构方向进阶的开发者。要求读者熟悉 Vue 和 React 的基本用法，并对前端工程化有基本认知。零基础直接上手可能会在架构设计章节感到吃力，建议先补足 HTML/CSS/JS 基础后再切入。

学习顺序上，不建议跳过第二章“架构基础知识”。这一部分涵盖了软件设计原则、分层架构以及系统健壮性设计，是后续动手实践的理论基石。特别是关于“技术填补”与“崩溃预防”的章节，直接对应了微前端落地中最易踩坑的稳定性问题。完成理论学习后，直接进入第四章的应用开发环节，按照 Vue 和 React 不同版本的子应用构建顺序进行实操，最后配合后端服务章节，理解前后端分离在微前端语境下的新形态。

学完能独立做什么

结课后，你将能够独立从零搭建一个支持多技术栈共存的微前端基座，并掌握主应用与各子应用之间的通信与样式隔离方案。具体而言，你可以独立完成以下工作：一是解决不同版本 React 框架在同一页面的冲突问题，实现平滑共存；二是绘制清晰的项目架构图，根据团队规模和技术现状选择合适的微前端实现方式；三是具备构建简单后端服务以统一处理跨域或鉴权请求的能力，从而真正打通前后端全链路。

资料包中的代码结构完整，建议读者不要仅做“代码搬运工”，而是要对照课程中的架构讲解，尝试手动重构其中的子应用模块，例如将 Vue 2 的组件逐步迁移至 Vue 3 语法，或在 React 子应用中尝试替换状态管理方案。只有通过这种针对性的练习，才能将课程中关于架构设计的抽象知识转化为解决实际工程问题的能力。

课程目录

第1章 课程简介 试看 2 节 | 7分钟 1-1 导学 (06:23).mp4
 1-2 了解微前端.mp4
 第2章 架构基础知识 

14 节 | 102分钟 2-1 导学-微前端实现方式对比.mp4
 2-2 前端架构的前世今生 (17:31).mp4
 2-3 软件设计原则与分层（1） (04:37).mp4
 2-4 软件设计原则与分层（2） (05:11).mp4
 2-5 软件设计原则与分层（3） (06:24).mp4
 2-6 软件设计原则与分层（4） (08:02).mp4
 2-7 架构设计的质量-健壮性和稳定性 (11:41).mp4
 2-8 架构前期准备 (13:45).mp4
 2-9 技术填补与崩溃预防（1） (18:38).mp4
 2-10 技术填补与崩溃预防（2） (05:34).mp4
 2-11 系统重构（1） (07:51).mp4
 2-12 系统重构（2） (02:13).mp4
 2-13 前端架构基础.mp4
 2-14 讨论题—浏览器对于微前端的支持能力.mp4
 第3章 基础准备工作 试看 3 节 | 33分钟 3-1 微前端实现方式对比 (11:03).mp4
 3-2 技术选型-确定技术栈 (07:41).mp4
 3-3 绘制项目架构图 (13:51).mp4
 第4章 应用开发 

19 节 | 141分钟 4-1 vue2子应用-新能源页面 (10:51).mp4
 4-2 vue3子应用-首页、选车页面 (14:15).mp4
 4-3 react15子应用-资讯、视频、视频详情 (11:39).mp4
 4-4 react16子应用-新车、排行、登录（1） (02:04).mp4
 4-5 react16子应用-新车、排行、登录（2） (03:26).mp4
 4-6 react16 子应用-新车、排行、登录（3） (01:21).mp4
 4-7 react16子应用-登录、新车、排行（4） (10:48).mp4
 4-8 构建一个后端服务 (14:29).mp4
 4-9 后端服务请求处理（1） (11:58).mp4
 4-10 后端服务请求处理（2） (09:23).mp4
 4-11 子应用接入微前端-vue2 （1） (06:46).mp4
 4-12 子应用接入微前端-vue2 （2） (11:28).mp4
 4-

13 子应用接入微前端 - vue3（1） (06:03).mp4
 4-

14 子应用接入微前端 - vue3（2） (05:52).mp4
 4-

15 子应用接入微前端 - react15 (12:12).mp4
 4-

16 子应用接入微前端 - react16 (08:22).mp4
 4-

17 知识补充 - vue3开发指南.mp4
 4-

18 知识补充 - Webpack基本配置.mp4
 4-

19 面试题 -- vue3和vue2的不同.mp4
 第5章 微前端框架开发 - 框架初长成 

10 节 | 162分钟 5-1 项目整体介绍 (09:44).mp4
 5-2 中央控制器 - 主应用开发 (16:35).mp4
 5-3 子应用注册 (19:20).mp4
 5-4 微前端框架 - 路由拦截 (13:14).mp4
 5-5 微前端框架 - 获取首个子应用 (13:36).mp4
 5-6 微前端框架 - 主应用生命周期 (10:46).mp4
 5-7 微前端框架 - 微前端生命周期 (20:08).mp4
 5-8 获取需要展示的页面 - 加载和解析html (23:18).mp4
 5-9 加载和解析js (15:46).mp4
 5-

10 执行js脚本 (18:42).mp4
 第6章 微前端框架开发 - 添加辅助功能 

14 节 | 131分钟 6-1 微前端环境变量设置 （1） (08:30).mp4
 6-2 微前端环境变量设置 （2） (07:52).mp4
 6-3 运行环境隔离 - 快照沙箱 (15:08).mp4
 6-4 运行环境隔离 - 代理沙箱 (19:58).mp4
 6-5 css样式隔离 (14:22).mp4
 6-6 应用间通信 - 父子通信（1） (03:35).mp4
 6-7 应用间通信 - 父子通信（2） (14:19).mp4
 6-8 应用间通信 - 父子通信（3） (07:36).mp4
 6-9 应用间通信 - 子应用间通信 (12:19).mp4
 6-

10 全局状态管理 - 全局store（1） (04:52).mp4
 6-

11 全局状态管理 - 全局store（2） (05:02).mp4
 6-

12 全局状态管理 - 全局store（3） (02:35).mp4
 6-

13 提高加载性能 - 应用缓存 (06:26).mp4
 6-

14 提高加载性能 - 预加载子应用 (07:35).mp4
 第7章 微前端框架开发 - 实现自动发布 8 节 | 60分钟 7-1 框架发布 – 通过npm发布框架 （1） (06:17).mp4
 7-2 框架发布 – 通过npm发布框架 （2） (08:25).mp4
 7-3 应用部署 - 创建自动部署平台（1） (08:30).mp4
 7-4 应用部署 - 创建自动部署平台 （2） (08:42).mp4
 7-5 实现应用的自动化部署 （1） (07:46).mp4
 7-6 实现应用的自动化部署 （2） (02:14).mp4
 7-7 实现应用的自动化部署 （3） (09:32).mp4
 7-8 质量保证 - 如何实现主子应用测试 (07:46).mp4
 第8章 使用现有框架 qiankun 重写 

15 节 | 84分钟 8-1 使用qiankun重构项目 (16:29).mp4
 8-2 qiankun源码分析-应用注册 (04:56).mp4
 8-3 qiankun源码分析 - 应用加载 (07:32).mp4
 8-4 qiankun源码分析 - 沙箱隔离 (05:15).mp4
 8-5 qiankun源码分析 - 全局状态管理 (03:05).mp4
 8-6 qiankun源码分析 - 预加载 (02:09).mp4
 8-7 扩展：如何阅读源码？.mp4
 8-8 使用single-spa重构项目（1） (03:08).mp4
 8-9 使用single-spa重构项目（2） (04:43).mp4
 8-10 使用single-spa重构项目（3） (07:03).mp4
 8-11 使用single-spa重构项目（4） (05:02).mp4
 8-12 使用single-spa重构项目（5） (14:24).mp4
 8-13 使用single-spa重构项目（6） (02:26).mp4
 8-

14 single-spa源码介绍 (07:44).mp4
 8-15 后续学习建议.mp4