# 从0到1落地微前端架构， MicroApp实战招聘网站课程

*Published:* 2024-05-26
*Author:* 客服001

#### 温馨提醒

如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢

本文最后更新于2024年8月17日，已超过 180天没有更新



[![](https://www.xarjtc.com/wp-content/uploads/2024/05/ec5a8903c5914f2.webp)](https://www.xarjtc.com/wp-content/uploads/2024/05/ec5a8903c5914f2.webp)

一套解决巨石应用痛点的微前端架构方案+多技术栈融合+综合项目实战

**将学到：**

掌握整套微前端架构解决方案

训练前端多应用架构设计思维

收获从0到1落地微前端的经验

强化Vue3、Nuxt2等主流技术

提升多项目多技术栈融合能力

提高多角色分工与协作开发力

**简介：**

> 能够应对不同技术栈、不同构建工具的巨石应用架构是前端高级工程师的衡量标准之一。本课程为你提供一套大型中台项目构建、多技术栈项目融合的最佳落地方案，并结合主流微前端框架MicroApp，流行技术栈Vue3、React18、Nuxt2、Vue2、Vite、Webpack最终聚合实现多个子应用的大型招聘网站，助力你成长为独当一面、具备team leader潜质的前端高级工程师。

**章节目录：**

├──{1}--第1章 课程介绍

| └──\[1.1\]--1-1 ：课程导学.mp4 31.08M

├──{2}--第2章 为什么前端工程师都应该学习微前端？

| ├──\[2.1\]--2-1 ：什么是微前端？为什么要学习微前端？.mp4 79.66M

| ├──\[2.2\]--2-2 ：微前端实现方案大乱炖：iframe、single-sp.mp4 52.59M

| └──\[2.3\]--2-3 ：现代微前端架构理念：团队自治、独立部署、场景落地.mp4 52.32M

├──{3}--第3章 微前端技术选型&微前端架构设计方案

| ├──\[3.1\]--3-1 ：技术选型：基于micro-app框架的微前端应用.mp4 77.14M

| └──\[3.2\]--3-2 ：架构设计：一站式微前端架构设计方案.mp4 27.93M

├──{4}--第4章 开发环境搭建&后端API联调说明

| ├──\[4.1\]--4-1 ：开发环境搭建：nvm、node.mp4 50.18M

| └──\[4.2\]--4-2 ：主、子应用的后端API联调说明.mp4 33.31M

├──{5}--第5章 微前端实战1—主应用main-vue3

| ├──\[5.10\]--5-10 ：主应用登出功能开发：MicroApp全局数据通信.mp4 54.13M

| ├──\[5.11\]--5-11 ：本章小结.mp4 7.64M

| ├──\[5.1\]--5-1 ：本章导学.mp4 4.87M

| ├──\[5.2\]--5-2 ：vue3+vite4主应用快速构建.mp4 39.66M

| ├──\[5.3\]--5-3 ：vue3全家桶集成：vue-router、axios、.mp4 142.56M

| ├──\[5.4\]--5-4 ：主应用接入微前端：MicroApp开箱即用、统筹全局.mp4 54.68M

| ├──\[5.5\]--5-5 ：封装通用组件commonHeader、commonFo.mp4 98.38M

| ├──\[5.6\]--5-6 ：封装容器组件mainContainer.mp4 16.36M

| ├──\[5.7\]--5-7 ：主应用登录页面布局.mp4 123.53M

| ├──\[5.8\]--5-8 -1：主应用登录功能开发：axios封装、proxy跨域.mp4 84.06M

| └──\[5.9\]--5-9 -2：主应用登录功能开发：axios封装、proxy跨域.mp4 70.70M

├──{6}--第6章 微前端实战2—子应用child-nuxt2-

| ├──\[6.10\]--6-10 ：本章小结.mp4 29.73M

| ├──\[6.1\]--6-1 ：本章导学.mp4 10.15M

| ├──\[6.2\]--6-2 ：nuxt2子应用快速构建.mp4 62.15M

| ├──\[6.3\]--6-3 ：nuxt2集成1：sass.mp4 33.31M

| ├──\[6.4\]--6-4 ：nuxt2集成2：axios安装与二次封装.mp4 78.56M

| ├──\[6.5\]--6-5 ：nuxt2子应用功能开发：实现首页SSR.mp4 41.14M

| ├──\[6.6\]--6-6 ：nuxt2子应用跨域请求：proxy跨域设置.mp4 57.27M

| ├──\[6.7\]--6-7 ：接入微前端1：chrome插件解决本地跨域.mp4 29.22M

| ├──\[6.8\]--6-8 ：接入微前端2：express自定义跨域服务.mp4 45.19M

| └──\[6.9\]--6-9 ：接入微前端3：ssr模式加载子应用.mp4 21.80M

├──{7}--第7章 微前端实战3—子应用child-vue2-j

| ├──\[7.1\]--7-1 ：本章导学.mp4 7.40M

| ├──\[7.2\]--7-2 ：vue2子应用快速构建.mp4 25.97M

| ├──\[7.3\]--7-3 ：vue2全家桶集成：vue-router、axios、.mp4 89.59M

| ├──\[7.4\]--7-4 ：vue2子应用功能开发1：职位列表.mp4 90.79M

| ├──\[7.5\]--7-5 ：vue2子应用功能开发2：职位详情.mp4 51.88M

| ├──\[7.6\]--7-6 ：vue2子应用跨域请求：proxy跨域设置.mp4 21.04M

| ├──\[7.7\]--7-7 ：接入微前端1：如何解决vue2子应用跨域.mp4 32.98M

| ├──\[7.8\]--7-8 ：接入微前端2：设置publicPath补全静态资源路径.mp4 23.92M

| └──\[7.9\]--7-9 ：本章小结.mp4 23.60M

├──{8}--第8章 微前端实战4—子应用child-vue3-e

| ├──\[8.1\]--8-1 ：本章导学.mp4 9.67M

| ├──\[8.2\]--8-2 ：vue3+vite4子应用快速构建.mp4 50.58M

| ├──\[8.3\]--8-3 ：vue3子应用功能开发1：企业列表.mp4 106.17M

| ├──\[8.4\]--8-4 ：vue3子应用功能开发2：企业详情.mp4 26.05M

| ├──\[8.5\]--8-5 ：接入微前端：全心全意为vite打造的iframe沙箱方.mp4 70.85M

| └──\[8.6\]--8-6 ：本章小 结.mp4 24.18M

├──{9}--第9章 微前端实战5—子应用child-react1

| ├──\[9.1\]--9-1 ：本章导学.mp4 4.22M

| ├──\[9.2\]--9-2 ：react18+webpack5子应用快速构建.mp4 11.21M

| ├──\[9.3\]--9-3 ：react18集成router、axios、sass.mp4 54.85M

| ├──\[9.4\]--9-4 ：react18子应用功能开发：关于我们.mp4 21.04M

| ├──\[9.5\]--9-5 ：react子应用跨域请求：暴露webpack实现pro.mp4 20.72M

| ├──\[9.6\]--9-6 ：接入微前端：设置publicPath补全静态资源路径.mp4 38.93M

| └──\[9.7\]--9-7 ：本章小结.mp4 12.89M

├──{10}--第10章 沙箱隔离&加载&缓存&数据通信

| ├──\[10.10\]--10-10 ：跨应用跳转能力2：子应用跳转主应用.mp4 50.45M

| ├──\[10.11\]--10-11 ：跨应用跳转能力3：子应用之间跳转.mp4 11.33M

| ├──\[10.1\]--10-1 ：本章导学.mp4 6.26M

| ├──\[10.2\]--10-2 ：沙箱隔离能力1：JS隔离.mp4 61.53M

| ├──\[10.3\]--10-3 ：沙箱隔离能力2：样式隔离.mp4 55.19M

| ├──\[10.4\]--10-4 ：沙箱隔离能力3：元素隔离.mp4 48.70M

| ├──\[10.5\]--10-5 ：加载能力：微前端的生命周期.mp4 42.89M

| ├──\[10.6\]--10-6 ：数据通信能力1：主子通信.mp4 51.54M

| ├──\[10.7\]--10-7 ：数据通信能力2：子主通信.mp4 53.69M

| ├──\[10.8\]--10-8 ：数据通信能力3：子应用之间通信.mp4 40.52M

| └──\[10.9\]--10-9 ：跨应用跳转能力1：主应用跳转子应用.mp4 18.46M

├──{11}--第11章 微前端性能优化实践

| ├──\[11.1\]--11-1 ：本章导学.mp4 5.78M

| ├──\[11.2\]--11-2 ：微前端预加载.mp4 48.27M

| ├──\[11.3\]--11-3 ：微前端资源共享.mp4 44.42M

| ├──\[11.4\]--11-4 ：子应用缓存.mp4 43.72M

| ├──\[11.5\]--11-5 ：子应用的丝滑转场.mp4 44.43M

| └──\[11.6\]--11-6 ：本章小结.mp4 16.40M

├──{12}--第12章 微前端应用如何优雅上线？

| ├──\[12.10\]--12-10 ：vue3基座应用部署.mp4 47.66M

| ├──\[12.11\]--12-11 ：Nginx开启Gzip压缩：为微前端应用增速.mp4 23.16M

| ├──\[12.12\]--12-12 ：查缺补漏1：优化微前端应用样式.mp4 14.30M

| ├──\[12.13\]--12-13 ：查缺补漏2：解决vue2子应用白屏问题.mp4 13.27M

| ├──\[12.14\]--12-14 ：查缺补漏3：结合Vuex优化基座应用的导航栏选中问.mp4 69.95M

| ├──\[12.15\]--12-15 ：查缺补漏4：解决子应用页面重定向和token透传问.mp4 40.63M

| ├──\[12.16\]--12-16 ：本章小结.mp4 7.08M

| ├──\[12.1\]--12-1 ：本章导学.mp4 20.75M

| ├──\[12.2\]--12-2 ：发布工具准备：putty、xftp.mp4 38.62M

| ├──\[12.3\]--12-3 ：服务器环境依赖：Node、Nginx、Screen.mp4 64.67M

| ├──\[12.4\]--12-4 ：封装config文件统一管理开发和生产环境域名.mp4 94.51M

| ├──\[12.5\]--12-5 ：nuxt2子应用部署.mp4 85.29M

| ├──\[12.6\]--12-6 ：产环境Nginx配置.mp4 64.16M

| ├──\[12.7\]--12-7 ：vue2子应用部署.mp4 51.65M

| ├──\[12.8\]--12-8 ：vue3子应用部署.mp4 26.45M

| └──\[12.9\]--12-9 ：react18子应用部署.mp4 25.60M

├──{13}--第13章 工程化微前端的另一种方案

| ├──\[13.1\]--13-1 ：MPA架构治好了我的精神内耗.mp4 51.27M

| ├──\[13.2\]--13-2 ：快速搭建MPA脚手架.mp4 83.67M

| ├──\[13.3\]--13-3 ：微应用的跨应用跳转与内部路由跳转.mp4 83.52M

| └──\[13.4\]--13-4 ：微应用的组件复用.mp4 36.88M

├──{14}--第14章 课程总结

| └──\[14.1\]--14-1 ：课程回顾.mp4 31.27M

├──电子书

└──源码