技術(shù)階段一網(wǎng)頁(yè)布局
可掌握的核心能力借助PxCook工具,參照設(shè)計(jì)稿,能綜合使用HTML+CSS技術(shù)完成企業(yè)級(jí)小兔鮮兒電商項(xiàng)目PC端首頁(yè)開(kāi)發(fā)
內(nèi)容介紹1. HTML 負(fù)責(zé)網(wǎng)頁(yè)的結(jié)構(gòu)層,是網(wǎng)頁(yè)開(kāi)發(fā)的基礎(chǔ),從最簡(jiǎn)單的網(wǎng)頁(yè)骨架搭建入手,使用常見(jiàn)的 HTML 標(biāo)簽豐富網(wǎng)頁(yè)結(jié)構(gòu)。
2. 在 HTML 搭建的網(wǎng)頁(yè)結(jié)構(gòu)基礎(chǔ)上,通過(guò) CSS 選擇器 精準(zhǔn)選擇標(biāo)簽,使用外觀、盒模型相關(guān)屬性完成網(wǎng)頁(yè)全部?jī)?nèi)容,學(xué)習(xí)傳統(tǒng)浮動(dòng)、定位等完成網(wǎng)頁(yè)布局,側(cè)重使用 Flex 布局技巧精準(zhǔn)控制網(wǎng)頁(yè)布局,最終結(jié)合背景、圓角、陰影等裝飾屬性進(jìn)一步美化網(wǎng)頁(yè)效果,達(dá)到能夠編寫企業(yè)級(jí)大型綜合網(wǎng)頁(yè)。
3. 借助PxCook工具,基于設(shè)計(jì)稿編寫網(wǎng)頁(yè),確保網(wǎng)頁(yè)的高度還原,通過(guò)綜合運(yùn)用 HTML + CSS 技術(shù),按照實(shí)際項(xiàng)目開(kāi)發(fā)流程,歸納開(kāi)發(fā)技巧,提升綜合實(shí)戰(zhàn)水平,最終完成企業(yè)級(jí)小兔鮮兒電商項(xiàng)目PC端首頁(yè)開(kāi)發(fā)。
技術(shù)階段二移動(dòng)Web
可掌握的核心能力1. 使用CSS高級(jí)特效,豐富網(wǎng)頁(yè)元素的呈現(xiàn)方式和效果
2. 使用rem或vw、vh實(shí)現(xiàn)網(wǎng)頁(yè)元素寬高隨著視口變化等比縮放的效果
3. 使用bootstrap框架布局響應(yīng)式網(wǎng)頁(yè)
內(nèi)容介紹1. 使用css高級(jí)特效豐富網(wǎng)頁(yè)元素的呈現(xiàn)方式和效果。
2. 首先介紹Flex布局模型,實(shí)現(xiàn)移動(dòng)端網(wǎng)頁(yè)的基本布局;再講解兩種移動(dòng)端網(wǎng)頁(yè)適配不同分辨率的解決方案,并使用不同的解決方案制作網(wǎng)頁(yè)元素寬高隨著視口的變化而等比縮放的效果。
3. 學(xué)習(xí)響應(yīng)式的原理,并使用bootstrap框架完成響應(yīng)式網(wǎng)頁(yè)的布局。
技術(shù)階段三JavaScript
可掌握的核心能力1. 掌握 JavaScript 核心語(yǔ)法,培養(yǎng)編程邏輯思維
2. 掌握 DOM 和 BOM 對(duì)象的常用屬性和方法,能夠完成網(wǎng)頁(yè)常見(jiàn)的交互效果
3. 掌握 JavaScript 底層工作機(jī)制和 ES6+ 高級(jí)特性,能夠高效實(shí)現(xiàn)業(yè)務(wù)邏輯
4. 能夠使用 axios 實(shí)現(xiàn) Ajax 操作,為后續(xù)項(xiàng)目課做好技術(shù)鋪墊
5. 能夠運(yùn)用 Git 管理前端項(xiàng)目,并且使用 Git 分支進(jìn)行多人協(xié)同開(kāi)發(fā)
6. 能夠使用 Promise 與 async/await 高效的實(shí)現(xiàn)異步操作
內(nèi)容介紹1. 學(xué)習(xí)JavaScript核心語(yǔ)法規(guī)則,深入理解 ECMAScript 的知識(shí)體系及工作機(jī)制。
2. 學(xué)習(xí)DOM和BOM對(duì)象的屬性和方法,以完成網(wǎng)頁(yè)常見(jiàn)的交互效果。
3. 利用 axios 發(fā)起 Ajax 請(qǐng)求,實(shí)現(xiàn)前后端的數(shù)據(jù)交互。并講解 HTTP 請(qǐng)求的過(guò)程以及 Ajax 的底層原理。深入學(xué)習(xí) JS 異步的底層原理,能夠使用 Promise 處理異步操作,并使用 async/await 簡(jiǎn)化異步操作。
4. 能夠創(chuàng)建 Git 倉(cāng)庫(kù)管理前端項(xiàng)目,基于 Git 分支進(jìn)行多人協(xié)同開(kāi)發(fā),并且能夠把本地的 Git 倉(cāng)庫(kù)同步到遠(yuǎn)程碼云或 Github 倉(cāng)庫(kù)中。
技術(shù)階段四Vue.js
可掌握的核心能力1. 通過(guò) Vue2 和 Vue3 的核心知識(shí)學(xué)習(xí),掌握企業(yè)開(kāi)發(fā)中常見(jiàn)業(yè)務(wù)功能實(shí)現(xiàn);
2. 通過(guò)深入 Vue 技術(shù)棧學(xué)習(xí) vue-router vuex vant element-ui 等主流技術(shù),掌握企業(yè)級(jí)項(xiàng)目開(kāi)發(fā)方式,如移動(dòng)端H5項(xiàng)目與PC端管理項(xiàng)目;
3. 掌握 qiankun 微前端技術(shù),具備重構(gòu)巨石應(yīng)用的能力,實(shí)現(xiàn)技術(shù)棧無(wú)關(guān)開(kāi)發(fā)方式;
4. 掌握 three.js web 3D技術(shù),具備大屏3D可視化開(kāi)發(fā)能力。
內(nèi)容介紹1. 掌握模塊化思想,npm包管理,webpack基礎(chǔ),初探工程化開(kāi)發(fā)。
2. 運(yùn)用Vue2.0全家桶核心內(nèi)容實(shí)現(xiàn)開(kāi)發(fā)中常見(jiàn)的功能,如購(gòu)物車,經(jīng)典列表、TodoMVC等。運(yùn)用 Vant 開(kāi)發(fā)移動(dòng)端,運(yùn)用element-ui開(kāi)發(fā)PC后臺(tái)管理系統(tǒng)。
3. 掌握 Vue3 新特性、Vite 新一代構(gòu)建工具、組合式 API、Pinia 等。
4. 掌握 qiankun 微前端庫(kù),重構(gòu)巨石應(yīng)用、做到與技術(shù)無(wú)關(guān)。
5. 掌握 three.js web 3D技術(shù),具備大屏3D可視化開(kāi)發(fā)能力。
6. 掌握 Vue 底層原理。
技術(shù)階段五小程序&多端開(kāi)發(fā)
可掌握的核心能力1. 掌握原生小程序開(kāi)發(fā),能夠獨(dú)立完成原生小程序項(xiàng)目開(kāi)發(fā)。
2. 掌握 uni-app 多端框架,能夠獨(dú)立開(kāi)發(fā)小程序和其他端的開(kāi)發(fā)。
內(nèi)容介紹1. 了解小程序開(kāi)發(fā)的一般流程序,熟悉小程基礎(chǔ)組件的使用,能夠基于 wxml 和 wxss 實(shí)現(xiàn)小程序的界面布局,基于模板的數(shù)據(jù)綁定實(shí)現(xiàn)數(shù)據(jù)的動(dòng)態(tài)渲染,基于 API 實(shí)現(xiàn)與服務(wù)端的數(shù)據(jù)通信,以及熟悉其它高級(jí) API 的使用。
2. 理解 uni-app 實(shí)現(xiàn)跨平臺(tái)開(kāi)發(fā)的原理機(jī)制,理清單文件組件與原生小程序組件的對(duì)應(yīng)關(guān)系,以及 uni-app 開(kāi)發(fā)小程序時(shí)開(kāi)發(fā)時(shí)與原生小程序的差異。
技術(shù)階段六鴻蒙應(yīng)用開(kāi)發(fā)
可掌握的核心能力1. 掌握TS核心語(yǔ)法,能夠使用TS開(kāi)發(fā)應(yīng)用程序;
2. 掌握 Vue3 + TS 實(shí)戰(zhàn)運(yùn)用,能完成企業(yè)級(jí) Web 應(yīng)用1~2的需求開(kāi)發(fā);
3. 掌握 ArkTS 和 ArkUI 核心技術(shù),能夠完成 HarmonyOS 應(yīng)用基礎(chǔ)界面開(kāi)發(fā);4. 掌握 ohos 內(nèi)置能力,完成網(wǎng)絡(luò)管理、進(jìn)程內(nèi)通信、消息通知、文件管理相關(guān)業(yè)務(wù)開(kāi)發(fā);
5. 掌握基于ArkUI進(jìn)行組件封裝,完成自定義功能組件開(kāi)發(fā),擴(kuò)展鴻蒙系統(tǒng)組件能力;
6. 掌握數(shù)據(jù)性能優(yōu)化方案,完成長(zhǎng)列表數(shù)據(jù)懶加載,提高應(yīng)用用戶體驗(yàn);
7. 掌握原生動(dòng)畫技巧,實(shí)現(xiàn)流暢頁(yè)面間動(dòng)畫、組件元素動(dòng)畫。
內(nèi)容介紹1. 掌握TypeScript基礎(chǔ)語(yǔ)法,且在項(xiàng)目中熟練運(yùn)用TypeScript。
2. 掌握 ArkTS 核心語(yǔ)法&接口,掌握ArkUI 搭建鴻蒙應(yīng)用界面,且在鴻蒙應(yīng)用開(kāi)發(fā)中熟練使用。
技術(shù)階段七React.js
可掌握的核心能力通過(guò) React + Hooks + Redux Toolkit 的學(xué)習(xí),實(shí)現(xiàn)多種業(yè)務(wù)場(chǎng)景下的功能開(kāi)發(fā),如 B站評(píng)論、知乎頻道管理、美團(tuán)外賣、記賬本等業(yè)務(wù)功能
內(nèi)容介紹1. 基于 React 腳手架(create-react-app)搭建React項(xiàng)目,掌握J(rèn)SX語(yǔ)法搭建頁(yè)面結(jié)構(gòu),使用函數(shù)組件實(shí)現(xiàn)組件化開(kāi)發(fā),掌握組件通訊在項(xiàng)目開(kāi)發(fā)中的使用。
2. 掌握 useEffect Hook 的應(yīng)用,掌握 useRef Hook 的高級(jí)用法,理解 Hooks 原理,掌握 react-router-dom 的應(yīng)用。
3. 掌握 React 最常用狀態(tài)管理工具 Redux 的基本使用,使用 react-redux 鏈接庫(kù)在 React 中使用 Redux,掌握 Redux 中間件 redux-thunk 用來(lái)處理異步請(qǐng)求,掌握 Redux Tookit 簡(jiǎn)化 Redux 的使用。
4. 利用 React + Hooks + Redux Tookit 實(shí)現(xiàn)記賬本案例,對(duì)整個(gè) React 階段所學(xué)內(nèi)容進(jìn)行練習(xí),驗(yàn)證我們是否掌握了 React 開(kāi)發(fā)能力。