2021-web前端-web前端架構
阿新 • • 發佈：2022-05-24
階段一：課程設計及前端建立腳手架開發
第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. 伺服器端需求分析和技術選型
2. Egg.js + Typescript 開發 RESTful API
3. Mongodb 基礎以及高階特性
4. Egg.js 進階 - 外掛機制以及原始碼解讀 第15周 使用者系統設計與實現 正式開始專案，本週我們從實現三種使用者登入的實現方式入手，在學習的過程中，引出並學習 Redis，鑑權，Cookie-Session 以及 JWT 和 Oauth2 前後端分離開發的實現方式。 課程安排： 1. 使用者系統三種方法實現 - 密碼，簡訊（阿里雲SMS） 以及 Oauth2
2. Redis 適用場景以及應用
3. 使用者鑑權的解決方案彙總以及 JWT 的實現方案
4. 使用阿里雲簡訊服務（SMS）實現手機登入
5. Oauth2 登入實現前後端分離的解決方案 第16周 檔案上傳（本地 + OSS 雲服務） 繼續深入專案，這周著重三大塊內容，Stream 的學習，HTTP 中檔案處理（本地以及雲服務），SSR 實現 H5 作品展示，最後使用 Casl 完成 RBAC 使用者許可權控制。 課程安排： 1. Stream 概念以及進階使用
2. 本地檔案上傳以及圖片處理
3. 雲服務OSS完成檔案上傳以及處理
4. SSR 概念以及實現 H5 端作品的展示
5. RBAC 完成使用者許可權的細粒度控制 第17周 部署 以及 CI/CD 專案開發結束，進入部署環境，從傳統的部署到 Docker 容器化部署，Nginx 轉發配置，以及使用 Github Actions 完成 CI/CD 自動部署。 課程安排： 1. 傳統部署到虛擬化容器的發展
2. 使用 Docker 以及 docker-compose 完成部署
3. 使用 Github Actions 完成 CI/CD
4. 使用 Github Actions 和 Docker 完成自動部署 階段四：完善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周 腳手架功能升級-上手大廠開發模式 本週講解如何通過腳手架+頁面模板實現程式碼的快速複用。 課程安排： 1、掌握大廠程式碼複用方法輪和背後思考
2、掌握如何通過腳手架實現頁面級別複用
3、掌握頁面模板的開發方法
4、完成腳手架add命令的開發邏輯
5、解決頁面模板安裝過程中的依賴衝突問題 第24周 腳手架功能升級-程式碼複用能力開發 講解如何通過腳手架+程式碼片段實現更復雜的程式碼複用功能。 課程安排： 1、掌握大廠程式碼片段複用的實現原理
2、掌握程式碼片段的開發方法
3、掌握程式碼片段模板殼應用開發方法
4、掌握程式碼片段核心插入演算法實現
5、掌握程式碼複用能力自定義安裝功能 第25周 前端監控平臺之JS 庫開發 本週講解如何通過JS庫開發實現前端監控埋點處理 課程安排： 1、掌握前端監控的阿里雲arms接入方法與架構設計
2、掌握前端監控的百度統計接入方法
3、掌握前端JSSDK的實際開發應用
4、掌握前端監控埋點採集和上報的方法
5、掌握瀏覽器監聽DOM的Observer的實際開發應用 第26周 前端監控平臺之大資料開發 本週講解監控埋點的儲存方法，如何通過大資料獲得埋點資料，並進行資料視覺化展示。 課程安排： 1. 掌握MaxCompute計算引擎開通方法
2. 掌握MaxCompute的資料處理方法
3. 掌握監控平臺如何通過程式碼連線MaxCompute的兩種方法
4. 掌握PythonSDK在監控平臺的實際應用
5. 掌握在js檔案通過子程序執行python檔案的開發應用 第27周 前端監控平臺之資料視覺化開發 本週講解監控平臺常見流量指標和統計方法，完整實現埋點資料視覺化流程。 課程安排： 1. 掌握常見流量監控指標
2. 掌握如何完善前端埋點上報內容
3. 掌握MaxCompute和RDS實現資料整合方法
4. 掌握前端監控資料視覺化功能的實現
5. 掌握前端埋點SDK效能優化方法：上報佇列功能實現
6. 掌握服務端上報API效能優化方法：定時任務上報 階段六：前端釋出腳手架開發 第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庫測試用例開發和除錯 階段七：架構師領導力培養 第35周 大廠如何管理多人協作的研發專案 本週帶領大家進入大廠文化 ，瞭解大廠如何做專案管理，多人協作的管理，以及團隊人員的管理，課程內容覆盤，未來技術的發展分析。 課程安排： 1、軟體研發流程概述，先有一個整體的認識
2、敏感專案研發流程，以及常用工具
3、制定專案計劃，包括範圍 WBS，時間，質量，風險，溝通
4、計劃監控，保證計劃順利執行
5、專案功能迭代和 bug 修復
6、多人協作、工作分配和跟蹤
7、大廠績效考核標準
8、大廠人員面試標準
9、大廠數值彙報方法和技巧
10、大廠標準的工作交流方式
11、整個課程內容覆盤
12、未來的技術展望 領V: cbq2393159 備註：部落格園
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. 伺服器端需求分析和技術選型
2. Egg.js + Typescript 開發 RESTful API
3. Mongodb 基礎以及高階特性
4. Egg.js 進階 - 外掛機制以及原始碼解讀 第15周 使用者系統設計與實現 正式開始專案，本週我們從實現三種使用者登入的實現方式入手，在學習的過程中，引出並學習 Redis，鑑權，Cookie-Session 以及 JWT 和 Oauth2 前後端分離開發的實現方式。 課程安排： 1. 使用者系統三種方法實現 - 密碼，簡訊（阿里雲SMS） 以及 Oauth2
2. Redis 適用場景以及應用
3. 使用者鑑權的解決方案彙總以及 JWT 的實現方案
4. 使用阿里雲簡訊服務（SMS）實現手機登入
5. Oauth2 登入實現前後端分離的解決方案 第16周 檔案上傳（本地 + OSS 雲服務） 繼續深入專案，這周著重三大塊內容，Stream 的學習，HTTP 中檔案處理（本地以及雲服務），SSR 實現 H5 作品展示，最後使用 Casl 完成 RBAC 使用者許可權控制。 課程安排： 1. Stream 概念以及進階使用
2. 本地檔案上傳以及圖片處理
3. 雲服務OSS完成檔案上傳以及處理
4. SSR 概念以及實現 H5 端作品的展示
5. RBAC 完成使用者許可權的細粒度控制 第17周 部署 以及 CI/CD 專案開發結束，進入部署環境，從傳統的部署到 Docker 容器化部署，Nginx 轉發配置，以及使用 Github Actions 完成 CI/CD 自動部署。 課程安排： 1. 傳統部署到虛擬化容器的發展
2. 使用 Docker 以及 docker-compose 完成部署
3. 使用 Github Actions 完成 CI/CD
4. 使用 Github Actions 和 Docker 完成自動部署 階段四：完善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周 腳手架功能升級-上手大廠開發模式 本週講解如何通過腳手架+頁面模板實現程式碼的快速複用。 課程安排： 1、掌握大廠程式碼複用方法輪和背後思考
2、掌握如何通過腳手架實現頁面級別複用
3、掌握頁面模板的開發方法
4、完成腳手架add命令的開發邏輯
5、解決頁面模板安裝過程中的依賴衝突問題 第24周 腳手架功能升級-程式碼複用能力開發 講解如何通過腳手架+程式碼片段實現更復雜的程式碼複用功能。 課程安排： 1、掌握大廠程式碼片段複用的實現原理
2、掌握程式碼片段的開發方法
3、掌握程式碼片段模板殼應用開發方法
4、掌握程式碼片段核心插入演算法實現
5、掌握程式碼複用能力自定義安裝功能 第25周 前端監控平臺之JS 庫開發 本週講解如何通過JS庫開發實現前端監控埋點處理 課程安排： 1、掌握前端監控的阿里雲arms接入方法與架構設計
2、掌握前端監控的百度統計接入方法
3、掌握前端JSSDK的實際開發應用
4、掌握前端監控埋點採集和上報的方法
5、掌握瀏覽器監聽DOM的Observer的實際開發應用 第26周 前端監控平臺之大資料開發 本週講解監控埋點的儲存方法，如何通過大資料獲得埋點資料，並進行資料視覺化展示。 課程安排： 1. 掌握MaxCompute計算引擎開通方法
2. 掌握MaxCompute的資料處理方法
3. 掌握監控平臺如何通過程式碼連線MaxCompute的兩種方法
4. 掌握PythonSDK在監控平臺的實際應用
5. 掌握在js檔案通過子程序執行python檔案的開發應用 第27周 前端監控平臺之資料視覺化開發 本週講解監控平臺常見流量指標和統計方法，完整實現埋點資料視覺化流程。 課程安排： 1. 掌握常見流量監控指標
2. 掌握如何完善前端埋點上報內容
3. 掌握MaxCompute和RDS實現資料整合方法
4. 掌握前端監控資料視覺化功能的實現
5. 掌握前端埋點SDK效能優化方法：上報佇列功能實現
6. 掌握服務端上報API效能優化方法：定時任務上報 階段六：前端釋出腳手架開發 第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庫測試用例開發和除錯 階段七：架構師領導力培養 第35周 大廠如何管理多人協作的研發專案 本週帶領大家進入大廠文化 ，瞭解大廠如何做專案管理，多人協作的管理，以及團隊人員的管理，課程內容覆盤，未來技術的發展分析。 課程安排： 1、軟體研發流程概述，先有一個整體的認識
2、敏感專案研發流程，以及常用工具
3、制定專案計劃，包括範圍 WBS，時間，質量，風險，溝通
4、計劃監控，保證計劃順利執行
5、專案功能迭代和 bug 修復
6、多人協作、工作分配和跟蹤
7、大廠績效考核標準
8、大廠人員面試標準
9、大廠數值彙報方法和技巧
10、大廠標準的工作交流方式
11、整個課程內容覆盤
12、未來的技術展望 領V: cbq2393159 備註：部落格園