課程簡介
本課程是系統(tǒng)介紹前端頁面開發(fā)的課程，包括下面幾個模塊內容，TS語法的核心，Vue3核心模塊，包括路由、pinia，框架源碼分析，并手動編寫一個基于Vue3 核心的框架，并介紹了微服務的應用和實踐。
本課程從最基礎的框架核心講起，詳細介紹 Vue3的方方面面，包含組件應用、路由和核心思想，并結合案例，講述微服務開發(fā)項目的流程和注意事項，最后，手動開發(fā)一個屬于自己的Vue3 框架。
目標收益
1.學習Vue3進階內容，包括路由和組件高級應用。
2.學會如何在項目中應用Vue3編程思想開發(fā)。
3.掌握在項目中使用vite工具開發(fā)項目的過程。
4.掌握微前端搭建和項目應用的方法。
培訓對象
本課程知識面向以下學習對象：
1.正在從事傳統(tǒng)PC端Web頁面的技術開發(fā)人員。
2.希望從事移動端WebApp應用開發(fā)的技術人員。
3.對前端技術感興趣，希望從事這方面工作的人員。
4.掌握一些傳統(tǒng)的前端開發(fā)技術，想進一步學習Web開發(fā)的人員。
5.想進一步掌握和提升Vue3核心技術應用人員。
課程大綱
| 1.前端框架現(xiàn)狀 |
1.1面臨現(xiàn)狀和問題 1.2前端發(fā)展方向 1.3框架選擇 1.4MVVM模式介紹 |
| 2.ES 6中面向對象編程 |
2.1類的定義和組成 2.2類的封裝和繼承 2.3模塊化編程 2.4完整案例實戰(zhàn) |
| 3.認識TypeScript |
3.1什么是 TS 3.2為什么要使用TS 3.3語言特點 3.4成功案例 3.5環(huán)境構建 3.6編譯過程分析 |
| 4.響應式編程 |
4.1基礎概念 4.2概念示意圖 4.3創(chuàng)建器 4.4合并操作符 |
| 5.Vue3組件高級應用 |
5.1父子間傳值 5.2slot傳參 5.3并列組件傳值 5.4全局變量 5.5案例——數(shù)據(jù)請求應用 |
| 6.Vue3動態(tài)和異步組件 |
6.1動態(tài)組件實現(xiàn) 6.2動態(tài)組件傳參 6.3keep-alive使用 6.4異步組件實現(xiàn) 6.5異步組件和Suspense |
| 7.Provide/Inject依賴注入 |
7.1提供數(shù)據(jù) 7.2注入數(shù)據(jù) 7.3提供和注入響應式數(shù)據(jù) 7.4defineProps和defineEmits 7.5defineExpose 7.6useSlots和useAttrs |
| 8.路由配置和應用 |
8.1Router基礎配置 8.2路由傳參與接收 8.3嵌套路由配置 8.4路由攔截 8.5重定向和404配置 |
| 9.Pinia數(shù)據(jù)管理 |
9.1為什么使用Pinia 9.2如何使用Pinia 9.3Pinia核心內容 9.4Pinia與Vuex區(qū)別 9.5緩存狀態(tài)數(shù)據(jù) |
| 10.Vue3中key和diff算法 |
10.1認識VNode和VDOM 10.2key的作用和diff算法 10.3沒有key時的diff算法操作 10.4有key時的diff算法操作 |
| 11.Vue3源碼核心模塊 |
11.1源碼概述 11.2認識虛擬DOM 11.3編譯和渲染系統(tǒng) 11.4響應式系統(tǒng) |
| 12.手寫微型Vue3核心系統(tǒng) |
12.1渲染流程和VNode 12.2h和 mount 函數(shù) 12.3patch函數(shù)實現(xiàn) 12.4響應式系統(tǒng)實現(xiàn) 12.5應用程序入口模塊 |
| 13.什么是前后端分離 |
13.1誕生背景 13.2面臨問題 13.3解決方案 |
| 14.如何做前后端分離 |
14.1單頁應用面臨問題 14.2優(yōu)化SPA方案 14.3中間件功能與優(yōu)勢 14.4應用——分段輸出頁面 14.5應用——嵌套異步請求 |
| 15.微前端出現(xiàn)背景 |
15.1 什么是微前端 15.2 為什么去使用它 15.3 怎樣使用微前端 15.4 應用間如何通信 15.5 如何處理公共依賴 |
| 16.微前端在美團外賣實踐 |
16.1需求背景 16.2實踐方案 16.3以路由為基座式微前端 16.4動態(tài)方案 16.5配置方案 |
| 17.字節(jié)跳動是落地微前端 |
17.1基于 SPA 的微前端架構 17.2應用生命周期 17.3加載器的設計 17.4沙箱的設計 17.5路由系統(tǒng)的設計 |
| 18.Vite打包 |
18.1為什么選擇vite 18.2安裝與配置 18.3構建一個指定模板項目 18.4使用插件和靜態(tài)資源處理 18.5案例——打包一個Vue3項目 |
|
1.前端框架現(xiàn)狀 1.1面臨現(xiàn)狀和問題 1.2前端發(fā)展方向 1.3框架選擇 1.4MVVM模式介紹 |
|
2.ES 6中面向對象編程 2.1類的定義和組成 2.2類的封裝和繼承 2.3模塊化編程 2.4完整案例實戰(zhàn) |
|
3.認識TypeScript 3.1什么是 TS 3.2為什么要使用TS 3.3語言特點 3.4成功案例 3.5環(huán)境構建 3.6編譯過程分析 |
|
4.響應式編程 4.1基礎概念 4.2概念示意圖 4.3創(chuàng)建器 4.4合并操作符 |
|
5.Vue3組件高級應用 5.1父子間傳值 5.2slot傳參 5.3并列組件傳值 5.4全局變量 5.5案例——數(shù)據(jù)請求應用 |
|
6.Vue3動態(tài)和異步組件 6.1動態(tài)組件實現(xiàn) 6.2動態(tài)組件傳參 6.3keep-alive使用 6.4異步組件實現(xiàn) 6.5異步組件和Suspense |
|
7.Provide/Inject依賴注入 7.1提供數(shù)據(jù) 7.2注入數(shù)據(jù) 7.3提供和注入響應式數(shù)據(jù) 7.4defineProps和defineEmits 7.5defineExpose 7.6useSlots和useAttrs |
|
8.路由配置和應用 8.1Router基礎配置 8.2路由傳參與接收 8.3嵌套路由配置 8.4路由攔截 8.5重定向和404配置 |
|
9.Pinia數(shù)據(jù)管理 9.1為什么使用Pinia 9.2如何使用Pinia 9.3Pinia核心內容 9.4Pinia與Vuex區(qū)別 9.5緩存狀態(tài)數(shù)據(jù) |
|
10.Vue3中key和diff算法 10.1認識VNode和VDOM 10.2key的作用和diff算法 10.3沒有key時的diff算法操作 10.4有key時的diff算法操作 |
|
11.Vue3源碼核心模塊 11.1源碼概述 11.2認識虛擬DOM 11.3編譯和渲染系統(tǒng) 11.4響應式系統(tǒng) |
|
12.手寫微型Vue3核心系統(tǒng) 12.1渲染流程和VNode 12.2h和 mount 函數(shù) 12.3patch函數(shù)實現(xiàn) 12.4響應式系統(tǒng)實現(xiàn) 12.5應用程序入口模塊 |
|
13.什么是前后端分離 13.1誕生背景 13.2面臨問題 13.3解決方案 |
|
14.如何做前后端分離 14.1單頁應用面臨問題 14.2優(yōu)化SPA方案 14.3中間件功能與優(yōu)勢 14.4應用——分段輸出頁面 14.5應用——嵌套異步請求 |
|
15.微前端出現(xiàn)背景 15.1 什么是微前端 15.2 為什么去使用它 15.3 怎樣使用微前端 15.4 應用間如何通信 15.5 如何處理公共依賴 |
|
16.微前端在美團外賣實踐 16.1需求背景 16.2實踐方案 16.3以路由為基座式微前端 16.4動態(tài)方案 16.5配置方案 |
|
17.字節(jié)跳動是落地微前端 17.1基于 SPA 的微前端架構 17.2應用生命周期 17.3加載器的設計 17.4沙箱的設計 17.5路由系統(tǒng)的設計 |
|
18.Vite打包 18.1為什么選擇vite 18.2安裝與配置 18.3構建一個指定模板項目 18.4使用插件和靜態(tài)資源處理 18.5案例——打包一個Vue3項目 |
近期公開課推薦
