Download：?https://xmq1024.com/5833.html

課程簡(jiǎn)介：

• 前端項(xiàng)目到了一定規(guī)模，基本都會(huì)沉淀自身組件庫——組件庫服務(wù)于整個(gè)團(tuán)隊(duì)，是所有項(xiàng)目的基座。如果能開發(fā)符合團(tuán)隊(duì)需求的組件庫，那么你已經(jīng)是團(tuán)隊(duì)的核心主力了。本課程由大廠前端專家授課，從一個(gè)高級(jí)前端開發(fā)的角度做一套類似 AntD 的組件庫，在這個(gè)過程中講透優(yōu)秀組件庫的搭建思路及實(shí)現(xiàn)方式，讓你迅速具備搭建前端基礎(chǔ)設(shè)施的重要能力

• 第1章 課程簡(jiǎn)介

  第2章 0-1 搭建開發(fā)環(huán)境

  第3章 熱身：完整的寫一個(gè) Button 組件

  第4章 工欲善其事必先利其器：組件庫的工程化

  第5章 組件設(shè)計(jì)（Radio、checkbox、Input、TextArea等）

  第6章 組件設(shè)計(jì)（Affix、progress、Menu）

  第7章 復(fù)雜組件設(shè)計(jì)-彈窗類

  第8章 復(fù)雜復(fù)合組件- 表單

  本課程已完結(jié)

• 視頻：8-1 Form 布局和數(shù)據(jù)獲取-1(15:40)

• 視頻：8-2 Form 布局和數(shù)據(jù)獲取-2(17:58)

• 視頻：8-3 Form 數(shù)據(jù)獲取優(yōu)化(20:29)

• 視頻：8-4 Form 表單校驗(yàn)(22:06)

• 視頻：8-5 Form 表單校驗(yàn)問題處理(09:18)

• 視頻：8-6 Form 使用現(xiàn)成的開源校驗(yàn)庫(15:55)

• 視頻：8-7 Form 數(shù)據(jù)手動(dòng) Reset 和填充(16:12)

• 視頻：8-8 Form Reset 的時(shí)候清空錯(cuò)誤提示(07:43)

• 視頻：8-9 Form 通過 api 調(diào)用的方式提交、reset、fill 數(shù)據(jù)(15:03)

• 視頻：8-10 編譯 StoryBook，排查編譯中遇到的 commonjs 規(guī)范問題(17:41)

• 視頻：8-11 babel 編譯 src 到 es5(13:19)

• 視頻：7-1 實(shí)現(xiàn)一個(gè)基礎(chǔ)彈窗(17:59)

• 視頻：7-2 完善彈窗基礎(chǔ)事件(19:19)

• 視頻：7-3 實(shí)現(xiàn) Overlay 相對(duì)目標(biāo)元素的定位計(jì)算-1(14:29)

• 視頻：7-4 實(shí)現(xiàn) Overlay 相對(duì)目標(biāo)元素的定位計(jì)算-2(16:21)

• 視頻：7-5 實(shí)現(xiàn) Overlay 通用位置計(jì)算算法-1(19:01)

• 視頻：7-6 實(shí)現(xiàn) Overlay 通用位置計(jì)算算法-2(16:36)

• 視頻：7-7 快捷彈窗組件 Popup-1最近學(xué)習(xí)

• 視頻：7-8 快捷彈窗組件 Popup-2(15:37)

• 視頻：7-9 Tooltip文字提示組件的開發(fā)-1(15:00)

• 視頻：7-10 Tooltip文字提示組件的開發(fā)-2(14:53)

• 視頻：7-11 彈窗超出可視區(qū)域的自動(dòng)訂正-1(15:10)

• 視頻：7-12 彈窗超出可視區(qū)域的自動(dòng)訂正-2(11:50)

• 視頻：7-13 Dropdown 組件的開發(fā)-1(13:04)

• 視頻：7-14 Dropdown 組件的開發(fā)-2(14:47)

• 視頻：7-15 Dropdown 組件的開發(fā)-3(14:49)

• 視頻：7-16 Message 組件開發(fā)-1(13:54)

• 視頻：7-17 Message 組件開發(fā)-2(15:22)

• 視頻：7-18 Message 組件開發(fā)-3(08:36)

• 視頻：6-1 固釘 Affix 組件開發(fā)-1(13:03)

• 視頻：6-2 固釘 Affix 組件開發(fā)-2(11:38)

• 視頻：6-3 固釘 Affix 組件，第二種實(shí)現(xiàn)方法和優(yōu)化思路(06:06)

• 視頻：6-4 progress 組件開發(fā)：用 css3 來開發(fā)進(jìn)度條(15:38)

• 視頻：6-5 circle 類型 progress：用 css3 來開發(fā)圓形進(jìn)度條-1(15:14)

• 視頻：6-6 circle 類型 progress：用 css3 來開發(fā)圓形進(jìn)度條-2(10:50)

• 視頻：6-7 Menu組件開發(fā)： UI 結(jié)構(gòu)還原-1(15:28)

• 視頻：6-8 Menu組件開發(fā)： UI 結(jié)構(gòu)還原-2(08:09)

• 視頻：6-9 Menu 邏輯完善-縮進(jìn)實(shí)現(xiàn)(14:23)

• 視頻：6-10 Menu 邏輯完善-高亮顯示-1(16:04)

• 視頻：6-11 Menu 邏輯完善-高亮顯示-2(09:22)

• 視頻：5-1 組件基礎(chǔ)理論(05:29)

• 視頻：5-2 組件開發(fā) Radio-點(diǎn)擊事件(14:28)

• 視頻：5-3 組件開發(fā) Radio-受控組件&非受控組件(18:32)

• 視頻：5-4 RadioGroup 開發(fā)(15:39)

• 視頻：5-5 RadioGroup 開發(fā)-補(bǔ)充(04:17)

• 視頻：5-6 checkbox & checkboxgroup(21:02)

• 視頻：5-7 Input 組件開發(fā)-腳手架升級(jí)自動(dòng)抓取 css(08:48)

• 視頻：5-8 Input 組件受控功能演示(13:59)

• 視頻：5-9 Input & TextArea maxLength-1(06:57)

• 視頻：5-10 Input & TextArea maxLength-2(08:10)

• 視頻：5-11 TextArea 支持自動(dòng)高度-1(15:17)

• 視頻：5-12 TextArea 支持自動(dòng)高度-2(12:23)

• 視頻：5-13 TextArea 自動(dòng)高度的另外一種思路 – 影子組件(12:02)

• 視頻：5-14 受控&非受控單測(cè)編寫(05:16)

• 視頻：5-15 Avatar 開發(fā)(18:45)

• 視頻：5-16 Switch 開發(fā)-1(09:49)

• 視頻：5-17 Switch 開發(fā)-2(09:03)

• 視頻：4-1 腳手架框架搭建(09:59)

• 視頻：4-2 制作標(biāo)準(zhǔn)化組件模板(17:54)

• 視頻：3-1 如何完善組件單測(cè)(19:33)

• 視頻：3-2 使用 sass 寫 css(14:05)

• 視頻：3-3 完整開發(fā)一個(gè) Icon 組件(15:37)

• 視頻：3-4 用 copy 的方式完成一個(gè)交互多一些的 Tag 組件開發(fā)(1)(17:42)

• 視頻：3-5 用 copy 的方式完成一個(gè)交互多一些的 Tag 組件開發(fā)(2)-完善代碼(08:05)

• 視頻：2-1 0-1 搭建開發(fā)環(huán)境 – 工具安裝(07:40)

• 視頻：2-2 初始化一個(gè) React 項(xiàng)目(08:25)

• 視頻：2-3 徒手寫一個(gè) button 組件感受下(16:44)

• 視頻：2-4 組件開發(fā) – 引入 storybook(27:09)

• 視頻：1-1 課程導(dǎo)讀(14:37)