從零打造微前端框架：實戰“汽車資訊平臺”專案
超清原畫 完整無密 網盤分享 點選下載：百度網盤
為什麼要學微前端架構？當你的專案越來越複雜，工程越來越大，程式碼衝突越來越頻繁，打包越來越慢的時候，就該好好學習下微前端架構了。本課程將帶你從零打造一個微前端框架，並實戰一個汽車資訊平臺，讓你係統掌握微前端架構設計與落地能力，輕鬆解構巨型應用。
適合人群
2~5 年前端開發人員
初中級架構設計人員
技術儲備
具備 2 年前端工程師必備基礎和框架技術，如：Nodejs 基礎、Vue/React/ Angular 基礎。
環境引數
前端 vue2/3、react15/16
後端 koa
釋出平臺 express
章節目錄：
第1章 課程簡介 試看 1 節 | 7分鐘
課程導學，介紹課程大概內容：課程安排、目標、學習人群等。
收起列表
視訊：
1-1 導學 (06:23)
試看
第2章 架構基礎知識 11 節 | 102分鐘
萬變不離其宗，沒有一種架構是憑空想象出來的，每一種架構實踐方式都是有基礎的內容搭建起來的，通過基礎知識內容的介紹，可以更根本的瞭解到做架構設計的時候需要考慮哪些內容，如何更加合理的進行專案的架構設計工作，由淺入深，逐步踏入架構的門檻。同時，基礎知識的講解也有助於大家建立完整的架構知識體系。 …
收起列表
視訊：
2-1 前端架構的前世今生 (17:31)
視訊：
2-2 軟體設計原則與分層（1） (04:37)
視訊：
2-3 軟體設計原則與分層（2） (05:11)
視訊：
2-4 軟體設計原則與分層（3） (06:24)
視訊：
2-5 軟體設計原則與分層（4） (08:02)
視訊：
2-6 架構設計的質量-健壯性和穩定性 (11:41)
視訊：
2-7 架構前期準備 (13:45)
視訊：
2-8 技術填補與崩潰預防（1） (18:38)
視訊：
2-9 技術填補與崩潰預防（2） (05:34)
視訊：
2-10 系統重構（1） (07:51)
視訊：
2-11 系統重構（2） (02:13)
第3章 基礎準備工作 試看 3 節 | 33分鐘
凡事預則立不預則廢，在做架構設計和架構實踐之前，做好充分的準備工作，然後按照預先設定好的步驟一步步實現理想的架構設計，同時，架構設計工作並不僅僅由架構師完成，更重要的是要調動全員完成架構設計，也需要讓專案組所有成員理解並認同自己的架構設計初衷，齊心協力完成架構設計工作。 …
收起列表
視訊：
3-1 微前端實現方式對比 (11:03)
試看
視訊：
3-2 技術選型-確定技術棧 (07:41)
試看
視訊：
3-3 繪製專案架構圖 (13:51)
第4章 應用開發 16 節 | 141分鐘
子應用：採用四種使用最多的框架技術完成子應用，確保在正常的工作中可以學以致用，同時也有助於每個人都可以按照自己的專案實際進行子應用的搭建和改造工作，每種子應用改造的方式大同小異，需要從細節處著手，將每個子應用完美的接入到微前端中。 主應用：主應用起到整體的排程作用，按照對應的路由匹配規則渲染對應的子…
收起列表
視訊：
4-1 vue2子應用-新能源頁面 (10:51)
視訊：
4-2 vue3子應用-首頁、選車頁面 (14:15)
視訊：
4-3 react15子應用-資訊、視訊、視訊詳情 (11:39)
視訊：
4-4 react16子應用-新車、排行、登入（1） (02:04)
視訊：
4-5 react16子應用-新車、排行、登入（2） (03:26)
視訊：
4-6 react16 子應用-新車、排行、登入（3） (01:21)
視訊：
4-7 react16子應用-登入、新車、排行（4） (10:48)
視訊：
4-8 構建一個後端服務 (14:29)
視訊：
4-9 後端服務請求處理（1） (11:58)
視訊：
4-10 後端服務請求處理（2） (09:23)
視訊：
4-11 子應用接入微前端-vue2 （1） (06:46)
視訊：
4-12 子應用接入微前端-vue2 （2） (11:28)
視訊：
4-13 子應用接入微前端 - vue3（1） (06:03)
視訊：
4-14 子應用接入微前端 - vue3（2） (05:52)
視訊：
4-15 子應用接入微前端 - react15 (12:12)
視訊：
4-16 子應用接入微前端 - react16 (08:22)
第5章 微前端框架開發 - 框架初長成 9 節 | 143分鐘
實現微前端框架基礎功能，包括：應用註冊、路由攔截、主應用生命週期新增、微前端生命週期新增、載入和解析html、載入和解析js、渲染、執行指令碼檔案等內容。
收起列表
視訊：
5-1 專案整體介紹 (09:44)
視訊：
5-2 中央控制器 - 主應用開發 (16:35)
視訊：
5-3 子應用註冊 (19:20)
視訊：
5-4 微前端框架 - 路由攔截 (13:14)
視訊：
5-5 微前端框架 - 獲取首個子應用 (13:36)
視訊：
5-6 微前端框架 - 主應用生命週期 (10:46)
視訊：
5-7 微前端框架 - 微前端生命週期 (20:08)
視訊：
5-8 獲取需要展示的頁面 - 載入和解析html (23:18)
視訊：
5-9 載入和解析js (15:46)
第6章 微前端框架開發 - 新增輔助功能 14 節 | 131分鐘
給微前端新增其他輔助功能，包含以下內容：預載入、應用通訊、全域性stroe、錯誤收集和資訊提示等功能。
收起列表
視訊：
6-1 微前端環境變數設定 （1） (08:30)
視訊：
6-2 微前端環境變數設定 （2） (07:52)
視訊：
6-3 執行環境隔離 - 快照沙箱 (15:08)
視訊：
6-4 執行環境隔離 - 代理沙箱 (19:58)
視訊：
6-5 css樣式隔離 (14:22)
視訊：
6-6 應用間通訊 - 父子通訊（1） (03:35)
視訊：
6-7 應用間通訊 - 父子通訊（2） (14:19)
視訊：
6-8 應用間通訊 - 父子通訊（3） (07:36)
視訊：
6-9 應用間通訊 - 子應用間通訊 (12:19)
視訊：
6-10 全域性狀態管理 - 全域性store（1） (04:52)
視訊：
6-11 全域性狀態管理 - 全域性store（2） (05:02)
視訊：
6-12 全域性狀態管理 - 全域性store（3） (02:35)
視訊：
6-13 提高載入效能 - 應用快取 (06:26)
視訊：
6-14 提高載入效能 - 預載入子應用 (07:35)
第7章 微前端框架開發 - 實現自動釋出 7 節 | 52分鐘
微前端框架和主應用子應用的釋出流程，學著如何部署一個微前端所有內容。
收起列表
視訊：
7-1 框架釋出 – 通過npm釋出框架 （1） (06:17)
視訊：
7-2 框架釋出 – 通過npm釋出框架 （2） (08:25)
視訊：
7-3 應用部署 - 建立自動部署平臺（1） (08:30)
視訊：
7-4 應用部署 - 建立自動部署平臺 （2） (08:42)
視訊：
7-5 實現應用的自動化部署 （1） (07:46)
視訊：
7-6 實現應用的自動化部署 （2） (02:14)
視訊：
7-7 實現應用的自動化部署 （3） (09:32)
第8章 使用現有框架 qiankun 重寫
使用現有的成熟的為前端框架內容來將專案重寫，理解熱門的微前端框架是如何實現的。怎樣使用現有為前端框架更低成本的改寫子應用。比較成熟的微前端框架和自己實現的框架之間有哪些異同點，一步步將自己的微前端框架補充完善，以致於能真正用於生產環境中。…
本課程持續更新中
本作品採用《CC 協議》，轉載必須註明作者和本文連結