Web前端架構師 | 更新至34周資源簡介

系統培養大廠P7技術專家/中小廠前端Leader

6~8個月，讓3年+前端完成質的飛躍

超大復雜項目+高端技術+大廠規范+全局架構思維

系統培養大廠P7技術專家/中小廠前端Leader

這是一門專門培養前端架構師的高端課程

〖課程目錄〗:

階段一課程設計及前端創建腳手架開發

第1周 需求分析和架構設計做什么，如何做？

開工之前，先來看看我們到底要做一個什么項目，有哪些功能。然后站在上帝視角，從整體的架構層面，該如何設計該項目。

課程安排

1、需求分析，到底要做一個什么產品

2、項目設計，多個項目之間的關系

3、數據模型設計，各項目之間的數據流轉過程

4、后臺管理需求，管理員要管控什么內容

5、統計需求，知道被訪問了多少次

第2周 腳手架架構設計和框架搭建

萬丈高樓平地起，講解大廠級別的腳手架是如何設計的，從頭開始繪制架構設計圖，并完成腳手架的框架搭建。

課程安排

1、掌握腳手架的實現原理

2、掌握腳手架管理工具Lerna和常用操作

3、基于Lerna構建腳手架項目

4、圖解腳手架架構設計

5、腳手架工程體系設計

6、深入閱讀Lerna源碼，剖析require.resolve原理

第3周 腳手架核心流程開發

本周將完成腳手架內核@imooc-cli/core子項目設計，并開發腳手架的執行準備階段和命令注冊階段。

課程安排

1、腳手架核心子項目core包架構設計

2、掌握腳手架node運行版本限制

3、掌握腳手架root自動降級

4、掌握npmlog實現自定義腳手架日志

5、掌握腳手架用戶主目錄檢查

6、掌握腳手架入參解析和環境變量配置

7、運用npm API實現腳手架自動更新

8、掌握腳手架命令注冊原理

9、運用commander簡化腳手架命令注冊

10、node支持ES模塊化標準的兩種方法

第4周 腳手架命令注冊和執行過程開發

本周將完成腳手架內核@imooc-cli/core子項目的執行命令階段，我們將采用分離式架構設計、緩存結構設計大幅提升腳手架的下載速度和執行性能。

課程安排

1、掌握腳手架執行命令原理

2、掌握高性能腳手架架構思路和具體方法

3、封裝通用的npm包管理類Package

4、掌握API方式完成npm包下載和自動更新

5、掌握腳手架緩存結構設計

6、掌握Node多進程的四種實現方案

7、深度解析Node多進程child_process庫源碼

第5周 腳手架創建項目流程設計和開發

本周將開發腳手架創建項目的@imooc-cli/init子項目，完成init包的準備階段和下載模板階段開發。

課程安排

1、腳手架項目創建能力架構設計

2、深入理解命令行交互原理和inquirer的應用

3、掌握服務端框架egg.js的開發方法

4、掌握云mongodb和egg接入mongodb方法

5、運用egg.js+mongodb構建項目模板API

6、掌握正則表達式并完成項目名稱自動格式化

7、掌握spinner實現命令行loading效果

8、完成標準項目模板開發

9、完成項目模板的緩存和下載功能

第6周 腳手架項目和組件初始化開發

init包將完成項目和組件的初始化過程，本周將完成init包的安裝模板階段。

課程安排

1、掌握腳手架標準安裝模式和自定義安裝模式實現原理

2、掌握ejs模板的實現原理和開發方法

3、基于ejs模板完成項目模板動態化

4、完成標準組件模板開發

5、完成項目或組件項目標準安裝流程開發

6、完成自定義項目模板初始化流程開發

7、ejs源碼解析——徹底搞懂ejs模板編譯和渲染原理

8、require源碼解析——徹底搞懂Node.js模塊加載原理

階段二B端項目分析和設計，編輯器初步編碼，業務組件庫的搭建

第7周 B端項目需求分析 和 架構設計

對于一個復雜前端項目，在編碼之前，分析過程可謂是;磨刀不誤砍柴工;，本周我們來給大家講解怎樣一步步抽絲剝繭，從需求到難點，再到系統整體設計。

課程安排

1、整體需求分析初步 和 細化編輯器需求分析

2、編輯器開發的難點分析 和 難點可能使用解決方案

3、整體架構設計

第8周 前端基礎技術回顧和巡禮

在課程正式開始之前，扎實的基礎知識是本課程的必備條件。這一周，讓我們一起來溫習 – typescript，vue3，ant-desing-vue 以及 webpack 和 rollup 的基礎知識。

課程安排

1、Typescript – 進入類型的世界

2、vue3 以及 新版全家桶 vuex，vue-router

3、ant-design-vue – 完美支持 vue3 的組件庫

4、webpack 和 rollup – 現代打包工具雙雄

第9周 項目整體搭建

萬事開頭難，本周我們使用技術儲備中簡介的知識，來搭建項目的大體結構和框架，包括 項目創建，代碼結構，基礎路由，基本布局和 基本的全局數據結構。

課程安排

1、使用 imooc-cli 創建項目

2、規定代碼規范和項目結構 ，安裝編輯器輔助插件

3、使用 vue-router 添加基礎路由結構

4、使用 ant-design-vue 搭建基礎布局

5、使用 vuex 創建項目的基本數據結構

第10周 編輯器基本布局，及業務組件庫初步開發

本周從編輯器開始開發，完成編輯器的基本布局，并且分析組件屬性和修改組件屬性的對應關系，創建業務組件庫的第一個組件，并且完成最簡單的編輯器交互，最后提出了業務組件實時實現編輯更新的解決方案。

課程安排

1、創建編輯器的基本布局

2、分析畫布組成元素的組件屬性

3、創建第一個組件 LText

4、屬性和編輯組件的實現方案

第11周 掌握測試基本工具，給組件庫添加單元測試

本周從什么是測試入手，簡介了測試的基本概念，介紹通用測試工具 Jest 和 Vue 測試框架 vue-test-utils，然后使用這兩種工具完成LText組件的單元測試。

課程安排

1、Jest 簡介和基本用法

2、vue-test-utils 的基本用法

3、為 Ltext 添加測試用例

第12周 通用上傳組件開發以及使用

本周主要從業務組件 LImage 入手，從易到難使用 TDD 開發一個復雜的通用上傳組件，之后將組件用于左側組件列表中，完成圖片組件的功能。

課程安排

1、為通用上傳組件寫需求。

2、從易到難漸進式使用 TDD 的混合方式開發一個復雜的上傳組件。

3、將組件用于左側組件列表用于創建 LImage 組件。

4、衍生出來的一系列擴展知識比如 Vue3 組件的類型，Vue3 通信的幾種方法，以及 Element Plus Upload 組件的源碼分析等。

第13周 業務組件庫打包、發布，添加 CI/CD

本周繼續豐富業務組件庫的功能，將組件庫剝離成單獨的代碼庫，使用 rollup 打包成多種 JS 模塊形式，發布到 NPM，最后還使用 travis 完成了 CI/CD 流程。

課程安排

1、創建單獨的組件庫代碼庫

2、添加剩余的業務組件

3、使用 rollup 打包生成多種 JS 模塊

4、發布至 npm 和 使用 husky 完成發布前測試

5、使用 travis 完成組件庫 CI/CD 功能

階段三從 0 搭建編輯器服務端

第14周 服務端技術選型（選修）

本周介紹做服務端必備的技能、框架、工具和服務，以及為何選擇他們。 這一章節是做服務端開發的基礎知識（后端知識串講，已經掌握的同學可以跳過）。

課程安排

1、為何選擇 koa2 框架，而不是 express egg nest.js

2、三大常用數據庫 Mysql Mongodb Redis

3、使用 JWT 做登錄驗證，放棄 Session

4、用 jest 做單元測試和接口測試

5、pm2 和 nginx 能保證服務端高效穩定運行

第15周 服務端 CI/CD github自動化

本周我們使用 github actions 和 docker 這兩大利器，從 0 實現 CI/CD 流程。這一章節是做服務端開發的基礎知識（后端知識串講，已經掌握的同學可以跳過）。

課程安排

1、github actions 一顆的 CI/CD 新星

2、docker 讓你一鍵擁有各種軟件環境，如 Mysql

3、docker-compose 快速搭建測試環境

4、提交代碼，自動發布到測試機

5、提交代碼，自動觸發單元測試

第16周 編輯器服務端基礎 API 開發

本周正式開發業務開發。開發之前要做技術方案設計（接口設計，數據庫設計），初始化項目環境和 CI/CD 流程。然后完成所有業務功能開發，同時進行單元測試和接口測試。

課程安排

1、接口設計，捋一捋需要提供哪些 API

2、數據庫設計，如何存儲更加合理

3、初始化項目環境，連接數據庫，跑通 CI/CD 流程

4、各個模塊的代碼介紹，不會一行一行帶著寫代碼的

5、單元測試和接口測試，邊開發邊測試，才能保證穩定性

第17周 編輯器服務端調用第三方服務

真正線上項目才需要這些功能，還要花錢購買第三方服務，一般課程不常見到。這些功能很實用，很大眾，學完即可照搬到實際項目中。

課程安排

1、用短信驗證碼實現登錄

2、內容安全檢查，屏蔽所有黃色、血腥、政治敏感內容

3、上傳圖片到阿里云 OSS

階段四完善B端所有功能，前后端結合和性能優化

第18周 編輯器組件圖層面板功能開發

本周繼續進行屬性編輯面板的功能，完成屬性的分組功能，完成圖層面板的顯示 隱藏 鎖定 排序等功能。最后完成背景設置面板的功能，在這個過程中，學習一系列第三方庫的使用。

課程安排

1、使用 cropper.js 開發 image processer 組件

2、同屬性分組并且開發 EditGroup 組件

3、開發圖層面板 并且 使用 vue-draggable-next 完成排序功能

4、背景設置面板開發

第19周 讓元素動起來 – 編輯器畫布交互功能開發

本周是集中火力在編輯器交互功能上，完成元素的拖動定位，拖動改變大小，快捷鍵支持，重做，回滾，右鍵菜單等一系列功能的開發。

課程安排

1、拖動定位功能開發

2、拖動改變大小功能開發

3、使用 hotkeys js 開發快捷鍵功能

4、實現 Undo Redo 功能

5、添加右鍵菜單功能

第20周 前后端結合 – 編輯器整合后端接口

本周開始接入后端開發，實現作品的預覽，保存，自動保存，發布和渠道編輯等一系列功能。

課程安排

1、預覽功能開發

2、保存和自動保存功能

3、使用 html2canvas 生成截圖并發布作品

4、使用 qrcodejs2 生成二維碼并實現渠道編輯功能

第21周 整合開發 B 端其他頁面的各種功能

這周來完成其他頁面的分析和編碼工作，在這個過程中我們最重要的是掌握幾個重要的第三方庫以的用法及它們的原理，以及通過一個比較復雜的鉤子函數加強 vue3 composition API 的應用。

課程安排

1、使用HTML2Canvas 完成頁面元素截圖

2、使用 QRCode 生成二維碼

3、使用 Clipboard.js 完成拷貝文字到剪貼板

4、編寫 useLoadMore 鉤子函數

5、使用 FileSaver.js 完成文件的下載

第22周 大型項目的編譯，部署以及性能優化

這一周我們來完成一個大型項目開發完畢以后的過程，那就是將在本地運行的項目編譯成符合線上要求的版本，將它部署上線，并且盡可能的完成性能優化。

課程安排

1、Vue Cli 編譯的環境，過程和模式

2、Webpack 的基礎回顧以及 Loader 和 Plugin 的原理

3、Webpack 打包的分析和優化手段

3、HTTP 傳輸的優化手段

階段五完善服務端，發布上線

第23周 基于Vue3 SSR渲染作品H5頁。

編輯器可以創建、保存和發布作品，但發布后的作品如何查看？本周就來搞定。我們不僅要把 H5 頁渲染出來，考慮 H5 前端的各項工作，還要打包、發布靜態文件到 OSS 。

課程安排

1、技術方案設計，如何才能渲染出頁面

2、初始化項目，跑通 CI/CD 流程

3、Vue3 SSR 渲染頁面，基于 lego-components 組件庫

4、webpack 打包文件，發布到 OSS

5、h5 前端功能，如事件跳轉、url 參數處理

6、h5 響應式，讓頁面適配所有手機屏幕

7、微信分享，前后端配合使用微信 jssdk

第24周 自研統計服務，使作品能實現分渠道統計

自定義事件統計，是一個線上產品必備的統計功能。目前市面上沒有合適的第三方服務，干脆我們就自研一個。包括收集日志、分析日志、Open API 功能。

課程安排

1、技術方案設計，看如何實現一個統計服務

2、nginx 服務收集統計日志

3、定時拆分日志文件，按天拆分

4、定時分析日志，離線計算統計結果，存入數據庫

5、提供 Open API ，獲取統計結果

6、定時清理過期日志文件，讓硬盤無壓力

第25周 后臺管理讓所有數據都在我們的掌控之中

一個完善的線上產品，后臺管理是必備的模塊。我們可以查看網站內容數據，管理用戶、作品和模板，推薦優質內容，屏蔽垃圾數據。

課程安排

1、需求分析，到底需要查看和管理哪些數據？

2、技術方案設計，如何實現這些功能

3、umijs 腳手架，創建 React 前端項目，跑通 CI/CD

4、使用 React Hooks 開發前端頁面

5、開發服務端接口，跑通 CI/CD

6、作業寫各個系統的單元測試和接口測試

第26周 發布到阿里云服務器，支持快速回滾

既然是真實的線上產品，就需要購買各種云服務，配置服務器和數據庫，然后正式發布到線上環境，一旦遇到問題還要能快速回滾。

課程安排

1、配置云服務器，安裝必備軟件

2、配置云數據庫，創建賬戶，開通 IP 白名單

3、流程設計，基于 git tag 和 github actions 實現發布和回滾

4、nginx 配置和二級域名轉發

5、線上日志拆分，nginx 日志和 pm2 日志

第27周 運維監控和報警

一個完善的線上產品，必須有完善的運維體系，才能保證穩定運行。包括服務器監控，報警，以及網絡安全預防。

課程安排

1、服務器監控，實時檢測 CPU 內存 硬盤的健康狀況

2、心跳檢測，對接口自動定時;體檢;

3、統一異常處理，出問題 catch 住，不崩潰

4、報警，有問題第一時間發送郵件和短信

5、萬一出問題或內存泄露，自動重啟服務

6、安全預防，防刷、防爬、防網絡攻擊

階段六前端發布腳手架開發

第28周 腳手架發布模塊架構設計和核心流程開發

完成項目開發后，需要進行前端發布，腳手架的@imooc-cli/publish子項目將完成項目和組件的標準發布流程，本周將完成publish包的架構設計和核心流程開發

課程安排

1、掌握項目/組件標準發布流程架構設計和流程圖繪制

2、掌握自動化git流程架構設計和實現細節

3、掌握云構建實現原理和實現細節

4、掌握項目/組件發布原理和實現細節

5、完成public子項目創建和主流程開發

第29周 腳手架發布模塊git自動化流程開發

本周將完成項目發布過程中的git flow流程開發，遵循標準的git flow流程，學會可快速改造和優化日常開發中的git處理流程，鞏固git的各種使用技巧和方法。

課程安排

1、掌握git操作方法和git flow流程

2、封裝通用的git處理類Git

3、掌握git處理過程中的緩存結構設計

4、掌握git處理過程中的各種異常流程

5、完成Github & Gitee Open API接入

6、Git類準備階段開發，完成各種git配置初始化

7、Git類初始化階段開發，完成git倉庫初始化、remote自動關聯、強制合8、并遠程代碼等功能

9、Git類分支自動比對功能開發，完成代碼沖突檢查、stash區自動檢查、10、自動同步master分支等功能

11、完成Git類代碼自動提交功能開發

第30周 腳手架發布模塊云構建系統開發

git flow流程完成后，我們將進入腳手架中最重要也是難度最高的一個環節，即云構建系統開發，本周我們通過egg.js+WebSocket+Redis最終實現完成云構建模塊開發。

課程安排

1、封裝通用的云構建類CloudBuild

2、掌握WebSocket通信協議和開發方法

3、應用egg-socket.io插件快速接入WebSocket服務

4、掌握Redis緩存數據庫的應用

5、應用egg-redis插件快速接入Redis服務

6、完成CloudBuild準備和預發布階段開發，完成發布前配置和各類檢查

7、掌握服務端CloudBuild處理流程和實現邏輯

8、服務端CloudBuildTask類封裝，完成預處理、源碼下載、云構建等流程開發

9、大作業CloudBuild構建和依賴安裝指令動態化功能設計和實現

第31周 腳手架發布模塊云發布功能開發

腳手架云構建模塊開發完成后，本周將繼續完成項目的云發布流程開發。

課程安排

1、掌握前端云發布邏輯實現

2、掌握oss入門使用方法

3、完成服務端oss API接入

4、掌握oss域名綁定+cdn接入

5、掌握項目預發布和正式發布流程

6、掌握項目回滾等異常流程處理

7、完成發布后自動打tag和開發分支刪除功能

8、完成發布流程整體開發和聯調

9、大作業項目回滾+多版本發布功能架構設計和具體實現

第32周 腳手架組件發布功能開發

項目發布流程已經調通，本周將完成組件發布流程開發，組件發布流程和項目不同，主要差異在于組件需要發布到npm和組件信息需要落庫，所以需要不同的處理方式。

課程安排

1、完成組件git flow流程開發

2、掌握組件構建和發布流程設計

3、掌握組件預覽功能設計

4、完成組件構建和發布流程開發

5、完成組件預覽功能開發

6、掌握RDS開通和使用方法

7、掌握egg.js+mysql的開發方法

8、完成組件相關API的開發方法

9、完成組件發布全流程聯調

10、完成腳手架整體發布和上線

第33周 組件平臺開發

本周將基于umi完成組件庫前端部分創建，同時結合react hook開發組件庫的前端頁面，并將組件庫發布上線。

課程安排

1、掌握umi項目的開發方法

2、掌握react hook的開發方法

3、完成antd組件庫集成

4、完成組件列表頁開發

5、完成組件詳情頁開發

6、完成組件平臺上線

第34周 項目單元測試用例設計和開發

講解如何開發單元測試用例，并開發測試代碼。

課程安排

1、掌握腳手架單元測試庫mocha

2、掌握測試用例設計技巧

3、完成腳手架單元測試用例設計

4、完成init庫測試用例開發和調試

5、完成publish庫測試用例開發和調試