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