h5搭建教程（h5游戲搭建）

一、怎么制作游戲

制作游戲有制作的游戲的劇情和腳本、繪制游戲人物的圖形和背景、游戲建模、學(xué)會(huì)游戲制作軟件的操作、創(chuàng)建一個(gè)游戲的項(xiàng)目工程等五方面的內(nèi)容。

1、通過參考不同的游戲，寫出想要制作的游戲的劇情和腳本。游戲的種類有多種，根據(jù)自己喜歡的游戲種類，通過參考不同的游戲，寫出要制作游戲的劇情。

2、根據(jù)游戲的劇情和腳本，使用手繪軟件繪制游戲人物的圖形和背景。

3、通過建模的軟件把平面圖形創(chuàng)建為立體模型效果。有多種建模軟件，可以通過建模的軟件把平面圖形創(chuàng)建為立體模型效果。比如使用常用的建模軟件3dmax。

4、學(xué)會(huì)游戲制作軟件的操作，這樣制作游戲的效率高些。游戲制作的軟件有多種，比如用Unity3D開發(fā)游戲，熟悉游戲制作軟件的操作，這樣制作更快捷。

5、創(chuàng)建一個(gè)游戲的項(xiàng)目工程，在制作游戲時(shí)方便查找。根據(jù)游戲的設(shè)計(jì)，創(chuàng)建一個(gè)游戲的項(xiàng)目工程。這樣把游戲中所使用的資源文件和模型都放在一個(gè)目錄便于修改。

/iknow-pic.cdn.bcebos.com/29381f30e924b8998db9a54561061d950b7bf6c2"target="_blank"title="點(diǎn)擊查看大圖"class="ikqb_img_alink">/iknow-pic.cdn.bcebos.com/29381f30e924b8998db9a54561061d950b7bf6c2?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto"/>

注意事項(xiàng)：

1、游戲制作，是一個(gè)很花費(fèi)時(shí)間的過程，不是寫寫代碼就結(jié)束了?？赏嫘裕y度調(diào)整，美工，等等。即使是小游戲，也會(huì)花大量的時(shí)間。

2、大型游戲不推薦一個(gè)人單獨(dú)制作，但是不是說只有大公司大企業(yè)才能做出大型游戲。游戲規(guī)模越大，內(nèi)容整理起來越復(fù)雜，團(tuán)隊(duì)非常重要。

二、小白準(zhǔn)備轉(zhuǎn)行學(xué)習(xí)前端，有大神可以提一些建議嗎

如果是準(zhǔn)備學(xué)前端，建議你可以看下這篇文章！

2022 年最新 Web 前端學(xué)習(xí)路線圖，我梳理了完整的細(xì)節(jié)知識(shí)點(diǎn)，企業(yè)項(xiàng)目開發(fā)解決方案所需技術(shù)棧，更適合自學(xué) Web 前端開發(fā)的同學(xué)，路線清晰明確，少走彎路。

零基礎(chǔ)學(xué)編程，從宏觀到微觀全面了解

專業(yè)、語言選擇、行業(yè)介紹、技術(shù)發(fā)展變革 (opens new window)👆

零基礎(chǔ)學(xué)編程選擇什么專業(yè)好，為什么選擇前端開發(fā)，職業(yè)前景，未來選擇性，是否適合初學(xué)者，行業(yè)競爭，什么樣的前端工程師、市場需求更搶手，前端開發(fā)行業(yè)介紹，前端開發(fā)的變革，大前端時(shí)代

HTML / HTML5

1. 搭建網(wǎng)頁結(jié)構(gòu)的語言，增加了很多移動(dòng)端支持，簡單好學(xué)

2. 詳細(xì) HTML/HTML5 知識(shí)梳理

3. Web 前端入門到精通核心標(biāo)簽和屬性 (opens new window)

4. 文檔聲明、文檔結(jié)構(gòu)、功能標(biāo)簽，塊級(jí)元素，區(qū)塊標(biāo)簽，內(nèi)聯(lián)元素，特殊內(nèi)聯(lián)元素，轉(zhuǎn)義字符，表格標(biāo)簽，標(biāo)簽中的屬性，input 元素中的屬性

5. HTML/HTML5 標(biāo)簽和屬性，系統(tǒng)學(xué)習(xí)教程（圖文版）

6. 認(rèn)識(shí)互聯(lián)網(wǎng)（基本原理） (opens new window)

7. HTML/HTML5 標(biāo)簽基礎(chǔ)語法 (opens new window)

8. HTML/HTML5 常用標(biāo)簽和屬性 (opens new window)

9. Git 快速入門到實(shí)踐系統(tǒng)學(xué)習(xí)教程 (opens new window)；Git 是什么，Git 的安裝配置，Git 配置，創(chuàng)建版本庫，初始化項(xiàng)目，Git 本地提交、推送項(xiàng)目至遠(yuǎn)程倉庫，克隆遠(yuǎn)程倉庫（項(xiàng)目）

10. Markdown 語法 和 日常學(xué)習(xí)、工作筆記、企業(yè)項(xiàng)目文檔的最佳實(shí)踐

11. HTML/HTML5 標(biāo)簽和屬性，系統(tǒng)學(xué)習(xí)教程（視頻版）

12. 群直播回放視頻可查閱，或 在線觀看

13. HTML/HTML5 系統(tǒng)學(xué)習(xí)視頻合集 (opens new window)

14. HTML/HTML5 高頻面試真題和答案解析

15. 中小企業(yè)和一線大廠最近 3 個(gè)月 HTML/HTML5 最新面試真題和答案解析 (opens new window)

CSS / CSS3

樣式表，美化網(wǎng)頁的語言，增加了很多動(dòng)畫、過渡等新特性，所見即所得，非常有意思。

1. 詳細(xì) CSS/CSS3 知識(shí)梳理

2. Web 前端 CSS、CSS3 核心樣式和屬性 (opens new window)；盒模型，常用文本樣式屬性，字體屬性，段落和行相關(guān)屬性，CSS 的書寫位置，層疊性和選擇權(quán)重，偽元素，偽類，css3 新增偽類，標(biāo)簽選擇器、id、class 選擇器，復(fù)合選擇器，元素關(guān)系選擇器，序號(hào)選擇器，屬性選擇器，浮動(dòng)，定位，鼠標(biāo)樣式，邊框，圓角，盒子陰影，背景，瀏覽器前綴，2D/3D 轉(zhuǎn)換

3. CSS/CSS3 樣式，系統(tǒng)學(xué)習(xí)教程（圖文版）

4. CSS 基礎(chǔ)認(rèn)知 和 選擇器 (opens new window)

5. CSS 文本和字體屬性、列表屬性 (opens new window)

6. CSS 盒子模型 (opens new window)

7. CSS display 屬性、背景屬性、其他常用屬性 (opens new window)

8. CSS 三大特性：繼承、層疊性、優(yōu)先級(jí) (opens new window)

9. 浮動(dòng)、BFC 規(guī)范、清除浮動(dòng)的最佳實(shí)踐 (opens new window)

10. CSS 定位、層疊順序、層疊上下文 (opens new window)

11. margin 負(fù)值的最佳實(shí)踐 (opens new window)

12. 圓角、陰影、文本圖像處理、CSS 函數(shù) (opens new window)

13. transition 過渡動(dòng)畫與 animation 自定義動(dòng)畫 (opens new window)

14. transform 2D 與 3D 轉(zhuǎn)換 (opens new window)

15. SEO 搜索引擎優(yōu)化代碼規(guī)范

16. 網(wǎng)頁頭部代碼規(guī)范 (opens new window)

17. SEO 搜索引擎網(wǎng)頁代碼優(yōu)化 (opens new window)

18. HTML/CSS 標(biāo)簽和樣式代碼規(guī)范 (opens new window)

19. CSS 樣式命名規(guī)則和規(guī)范 (opens new window)

項(xiàng)目實(shí)戰(zhàn)

1. 30 個(gè) CSS/CSS3 真實(shí)項(xiàng)目案例布局訓(xùn)煉（視頻版） (opens new window

2. 防御式編程 - 防御式 CSS (opens new window)

3. 大廠 Web 前端項(xiàng)目開發(fā)規(guī)范和最佳實(shí)踐 (opens new window)

4. CSS 還原 UI 設(shè)計(jì)，前端項(xiàng)目開發(fā)的必備工具 (opens new window)

5. 擴(kuò)展學(xué)習(xí)，項(xiàng)目功能點(diǎn)主流布局最佳實(shí)踐

6. 100+ CSS 主流布局企業(yè)項(xiàng)目功能案例，最佳實(shí)踐 (opens new window)

7. CSS/CSS3 樣式、PC 端項(xiàng)目開發(fā)，系統(tǒng)學(xué)習(xí)教程（視頻版）

8. 群直播回放視頻可查閱，或 在線觀看

9. CSS/CSS3 高頻面試真題和答案解析，中小企業(yè)和一線大廠最近 3 個(gè)月 CSS/CSS3 最新面試真題和答案解析 (opens new window)

移動(dòng) WebApp 開發(fā)、多終端響應(yīng)式開發(fā)

1. 從 PC 端演化成移動(dòng) WebApp 熟練掌握跨端+各終端適配和性能優(yōu)化，是一名優(yōu)秀的前端開發(fā)必備的技能之一。

2. 移動(dòng) WebApp 開發(fā)核心重難點(diǎn)知識(shí)梳理

3. Flex 彈性布局 (opens new window)Grid 網(wǎng)格布局 (opens new window)

4. 響應(yīng)式布局 (opens new window)

5. 百分比布局 (opens new window)

6. rem 布局 (opens new window)

7. vw 布局 (opens new window)

8. 移動(dòng)端事件 (opens new window)

9. 移動(dòng) Web 開發(fā)常見問題 (opens new window)

10. 移動(dòng) Web 開發(fā)性能優(yōu)化 等

11. Flex 彈性布局從入門到實(shí)踐 (opens new window)

12. Grid 網(wǎng)格布局從入門到實(shí)踐 (opens new window)

移動(dòng)端項(xiàng)目實(shí)戰(zhàn)

1. 移動(dòng)端開發(fā)核心基礎(chǔ)必備知識(shí) (opens new window)

2. 移動(dòng) WebApp 項(xiàng)目開發(fā)常用技術(shù)及標(biāo)準(zhǔn)、規(guī)范和最佳實(shí)踐 (opens new window)

3. 響應(yīng)式項(xiàng)目開發(fā)

4. 多終端響應(yīng)式項(xiàng)目開發(fā)最佳實(shí)踐 (opens new window)

5. 移動(dòng) WebApp 開發(fā)、多端響應(yīng)式項(xiàng)目開發(fā)，系統(tǒng)學(xué)習(xí)教程（視頻版）

6. 群直播回放視頻可查閱，或 在線觀看

7. 移動(dòng) WebApp 開發(fā)、多端響應(yīng)式項(xiàng)目開發(fā)視頻合集 (opens new window)

8. 移動(dòng) WebApp 開發(fā)，高頻面試真題和答案解析

9. 中小企業(yè)和一線大廠最近 3 個(gè)月 移動(dòng) WebApp 開發(fā)，最新面試真題和答案解析 (opens new window)

云計(jì)算、云服務(wù)器的應(yīng)用與實(shí)踐

深入淺出云計(jì)算、云服務(wù)當(dāng)前最新、最流行的技術(shù)生態(tài)與最佳實(shí)踐是我們作為一名工程師時(shí)刻具備職業(yè)競爭力的前提。

云計(jì)算、低代碼、元宇宙、云服務(wù)器、云原生、互聯(lián)網(wǎng)技術(shù)架構(gòu)演進(jìn) (opens new window)👆

阿里云服務(wù)器實(shí)踐 與 Nginx 部署 (opens new window)👆

Nginx 部署的核心配置、性能優(yōu)化、域名服務(wù)器備案 (opens new window)👆

華為云服務(wù)器實(shí)踐與 Nginx 部署，完整版 (opens new window)👆

Git 在線部署入門到實(shí)踐 (opens new window)👆云服務(wù)器的實(shí)踐：注冊(cè)、配置，公共鏡像、操作系統(tǒng)，網(wǎng)絡(luò)和安全組，遠(yuǎn)程鏈接云服務(wù)器，常用 Linux 系統(tǒng)命令行，Nginx Web 服務(wù)器安裝和啟動(dòng)、常用 Nginx 命令，深入域名結(jié)構(gòu)，域名解析，Nginx 企業(yè)項(xiàng)目部署，Nginx 配置 HTTPS 加密協(xié)議、SSL 證書申請(qǐng)與配置，Nginx 性能優(yōu)化、Gzip 壓縮，多網(wǎng)站、多系統(tǒng)部署，企業(yè)級(jí)項(xiàng)目的最佳實(shí)踐 ...

云計(jì)算在項(xiàng)目中的相關(guān)應(yīng)用與實(shí)踐（視頻版）

群直播回放視頻可查閱，或 在線觀看

云計(jì)算、云服務(wù)器的實(shí)踐與項(xiàng)目部署系統(tǒng)學(xué)習(xí)視頻合集 (opens new window)👆

企業(yè)項(xiàng)目相關(guān)，高頻面試真題和答案解析

• 中小企業(yè)和一線大廠最近 3 個(gè)月 項(xiàng)目開發(fā)相關(guān)最新面試真題和答案解析 (opens new window)👆

#JavaScript

前端開發(fā)工程師最重要的 "看家語言"，JS 功底的好壞，決定了職業(yè)高度，學(xué)習(xí)需要下苦工

詳細(xì) JavaScript 基礎(chǔ)+高級(jí)核心知識(shí)梳理

• JavaScript 核心基礎(chǔ)和常用方法 (opens new window)👆

• JavaScript 函數(shù)、BOM、DOM (opens new window)👆

• JS 常用內(nèi)置對(duì)象和正則表達(dá)式 (opens new window)👆

• JavaScript 常見的 10 種設(shè)計(jì)模式、設(shè)計(jì)原則 (opens new window)👆

工廠模式、構(gòu)造器模式、單例模式、原型模式、發(fā)布訂閱者模式（觀察者模式）、適配器模式

裝飾器模式、代理模式、外觀模式、迭代器模式

JavaScript 在項(xiàng)目開發(fā)中的最佳實(shí)踐

• 實(shí)用的 JS 開發(fā)技巧 (opens new window)👆

• JS 語法糖、新特性及優(yōu)化技巧 (opens new window)👆

JavaScript 深入系統(tǒng)學(xué)習(xí)教程（圖文版）

待更新 ...

擴(kuò)展學(xué)習(xí)，項(xiàng)目功能點(diǎn) JavaScript 動(dòng)效最佳實(shí)踐

• 200+ JavaScript 動(dòng)效經(jīng)典企業(yè)項(xiàng)目功能案例，最佳實(shí)踐 (opens new window)👆（持續(xù)更新中 ...）

JavaScript 深入系統(tǒng)學(xué)習(xí)教程（視頻版）

待更新 ...

JavaScript 高頻面試真題和答案解析

• 中小企業(yè)和一線大廠最近 3 個(gè)月 JavaScript 最新面試真題和答案解析 (opens new window)👆

#模塊化、組件化開發(fā)

從傳統(tǒng)單一模塊開發(fā)到企業(yè)標(biāo)準(zhǔn)組件化開發(fā)掌握企業(yè)核心開發(fā)思想，動(dòng)態(tài)交互開發(fā)。

詳細(xì) ES6 基礎(chǔ)+高級(jí)核心知識(shí)梳理

• ES6 基礎(chǔ)入門和新增方法 (opens new window)👆

  新增變量、模板字符串、箭頭函數(shù)、解構(gòu)賦值、剩余參數(shù)、展開運(yùn)算符、數(shù)據(jù)結(jié)構(gòu)、Set 和 Map 共有的方法和屬性、Set 和 Map 實(shí)例的方法、遍歷器，數(shù)組、字符串、對(duì)象的新增方法等

• ES6 高級(jí)核心重難點(diǎn)知識(shí)梳理 (opens new window)👆

  Promise 異步編程解決方案，class 類，module 模塊化，module 的導(dǎo)入導(dǎo)出、注意事項(xiàng)，NodeJS 指令相關(guān),Babel 編譯器相關(guān)，webpack 相關(guān)

• HTTP 協(xié)議、Ajax、XHR、本地存儲(chǔ)、跨域、async/await (opens new window)👆

  HTTP 相關(guān)概念，HTTP 常用方法，HTTP 狀態(tài)碼，本地存儲(chǔ)（cookie 的屬性，編碼與解碼，sessionStorage/localStorage 的常用方法和屬性），Ajax 相關(guān)概念，本地服務(wù)器，Ajax 基本的使用，XHR 的屬性，XHR 的方法，XHR 的事件，JSON 的常用方法，跨域解決方案，Ajax 擴(kuò)展內(nèi)容，async/await

• 組件化開發(fā)

  模板引擎，PC 端項(xiàng)目組件化項(xiàng)目重構(gòu)開發(fā)，深入理解和實(shí)踐組件化開發(fā)的核心開發(fā)思想

ES6 基礎(chǔ) + 高級(jí)，系統(tǒng)學(xué)習(xí)教程（圖文版）

待更新 ...

ES6 實(shí)際開發(fā)中的實(shí)用技巧

• npm 常用命令和使用技巧 (opens new window)👆

• 選擇 npm 時(shí)，應(yīng)考慮的 5 個(gè)事項(xiàng) (opens new window)👆

正則表達(dá)式功能函數(shù)

• 15 個(gè)（ES6）正則表達(dá)式，真實(shí)項(xiàng)目應(yīng)用場景必備 (opens new window)👆

實(shí)用工具函數(shù)

• 58 個(gè) ES6 實(shí)用工具函數(shù)，快速提升項(xiàng)目開發(fā)效率 (opens new window)👆

模塊化、組件化開發(fā)，深入系統(tǒng)學(xué)習(xí)教程（視頻版）

待更新 ...

模塊化、組件化開發(fā)、ES6 相關(guān)高頻面試真題和答案解析

• 中小企業(yè)和一線大廠最近 3 個(gè)月模塊化、組件化開發(fā)、ES6 最新面試真題和答案解析 (opens new window)👆

#小程序開發(fā)

作為優(yōu)秀的前端工程師必備技能，小程序是當(dāng)下最爆火的輕應(yīng)用開發(fā)技術(shù)，需要能夠獨(dú)立開發(fā)企業(yè)級(jí)小程序，擁有解決主流小程序功能需求的能力

詳細(xì) 小程序開發(fā)知識(shí)梳理

小程序入門到實(shí)戰(zhàn)核心重點(diǎn)知識(shí)梳理 (opens new window)👆

基礎(chǔ)概念，小程序中的文件類型，全局文件，全局配置，頁面配置，window 屬性、tabbar 屬性、list 相關(guān)的配置，小程序 App 和頁面 Page，小程序的生命周期函數(shù)，頁面級(jí)的生命周期函數(shù)，頁面級(jí)的數(shù)據(jù)，邏輯層中常用的 API，WXML 中的常用語法，常用的組件，input 組件、swiper 組件的屬性，常用事件等

小程序開發(fā)，系統(tǒng)學(xué)習(xí)教程（圖文版）

待更新 ...

小程序項(xiàng)目實(shí)戰(zhàn)開發(fā)

待更新 ...

小程序開發(fā)，系統(tǒng)學(xué)習(xí)教程（視頻版）

待更新 ...

#Vue 全家桶

從 2016 年前后開始流行的前端框架，采用模塊化開發(fā)、數(shù)據(jù)驅(qū)動(dòng)、聲明式編程等等，核心在于前邊的基礎(chǔ)要扎實(shí)，后期學(xué)習(xí)就容易了

Vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架

與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。

另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動(dòng)。

Vue 全家桶必備知識(shí)梳理

• Vue 核心基礎(chǔ)知識(shí)梳理 (opens new window)👆

• Vue 高級(jí)知識(shí)梳理 (opens new window)👆

• Sass 常見面試題與核心基礎(chǔ)知識(shí)梳理 (opens new window)👆

• Vue 腳手架相關(guān)知識(shí)梳理 (opens new window)👆

• Vue3.x+TypeScript+Vite 即是當(dāng)下的主流 (opens new window)👆

Vue 全家桶，系統(tǒng)學(xué)習(xí)教程（圖文版）

待更新 ...

Vue 全家桶項(xiàng)目實(shí)戰(zhàn)開發(fā)

待更新 ...

Vue 全家桶深入系統(tǒng)學(xué)習(xí)教程（視頻版）

待更新 ...

Vue 全家桶高頻面試真題和答案解析

• 中小企業(yè)和一線大廠最近 3 個(gè)月 Vue 全家桶最新面試真題和答案解析 (opens new window)👆

據(jù)不完全統(tǒng)計(jì)目前國內(nèi)哪些大廠在使用 Vue

小紅書，微博，嗶哩嗶哩（B 站），愛奇藝，芒果 TV，手機(jī)搜狐

餓了么，小米商城，一加手機(jī)，樂視商城，滴滴開源、高德開放平臺(tái)、京東拼購+領(lǐng)券+新人頻道 H5+京東云，網(wǎng)易云信+手機(jī)網(wǎng)易+網(wǎng)易郵箱 H5，大麥網(wǎng) H5、唯品會(huì) H5、少數(shù)派、百度指數(shù)、微信公眾平臺(tái)、大魚號(hào)，攜程 H5 多個(gè)模塊，創(chuàng)客貼、兌吧、國美電器 H5、聚美優(yōu)品觸屏版，理想汽車，途虎養(yǎng)車，雪球財(cái)經(jīng)、電玩巴士等等

開源中國，CSDN，Gitee（碼云），GitLab，掘金，簡書，藍(lán)湖，IT 桔子等等

#TypeScript

TypeScript 簡稱 TS

TS 是 JavaScript 的超集，擴(kuò)展了 JavaScript 的語法，因此現(xiàn)有的 JavaScript 代碼可與 TS 一起工作無需任何修改，TS 通過類型注解提供編譯時(shí)的靜態(tài)類型檢查。

由微軟開發(fā)的自由和開源的編程語言。

TS 設(shè)計(jì)目標(biāo)：是開發(fā)大型應(yīng)用，它可以編譯成純 JavaScript，編譯出來的 JavaScript 可以運(yùn)行在任何瀏覽器上。

詳細(xì) TypeScript 知識(shí)梳理

• TypeScript 核心基礎(chǔ)知識(shí)梳理 (opens new window)👆

  TypeScript 開發(fā)環(huán)境、工作流，定義變量/常量，基本類型，高級(jí)類型，類型適配（類型斷言），函數(shù)類型，對(duì)象類型，接口，類，訪問修飾符，模塊，泛型

• TypeScript 高級(jí)核心知識(shí)梳理 (opens new window)👆

  類型守衛(wèi)，函數(shù)重載，調(diào)用簽名 call signiture，索引簽名，只讀 readonly，雙重?cái)嘌?Double Assertion，常量斷言，this，類型檢測 typeof，類型查找，類型映射 Mapped Types，映射修飾符

TypeScript 系統(tǒng)學(xué)習(xí)教程（圖文版）

待更新 ...

TypeScript 深入系統(tǒng)學(xué)習(xí)教程（視頻版）

待更新 ...

TypeScript 高頻面試真題和答案解析

• 中小企業(yè)和一線大廠最近 3 個(gè)月 TypeScript 最新面試真題和答案解析 (opens new window)👆

#React 生態(tài)

React 是一個(gè)用于構(gòu)建用戶界面的 JavaScript 庫，起源于 Facebook 的內(nèi)部項(xiàng)目，用來架設(shè) Instagram 的網(wǎng)站，并于 2013 年 5 月開源。 2022 年 4 月 26 日已發(fā)布最新版 18.1.0

詳細(xì) React 入門到項(xiàng)目實(shí)戰(zhàn)知識(shí)梳理

• React 核心基礎(chǔ)知識(shí)梳理 (opens new window)👆

  基礎(chǔ)環(huán)境準(zhǔn)備，搭建 react 項(xiàng)目（JS 版本的），項(xiàng)目內(nèi)容介紹，搭建 react 項(xiàng)目（TS 版本的）

  tsconfig.json（TS 語法的配置文件），TS 編譯器的工作流程，項(xiàng)目升級(jí)改造，創(chuàng)建基礎(chǔ)演示項(xiàng)目，react 知識(shí)點(diǎn)，文件類型介紹，JSX、TSX

• React 項(xiàng)目實(shí)戰(zhàn)核心重點(diǎn)知識(shí)梳理 (opens new window)👆

  css 樣式架構(gòu)、全局樣式，css 模組化，項(xiàng)目實(shí)操，基礎(chǔ)理論，異步請(qǐng)求相關(guān)，組件生命周期，項(xiàng)目開發(fā)注意事項(xiàng)，鉤子，常用鉤子函數(shù)，useState 鉤子函數(shù)細(xì)說，副作用，關(guān)于 useEffect()，項(xiàng)目中常用組件和方法，關(guān)于 HOC 和 Hook

React 生態(tài)，系統(tǒng)學(xué)習(xí)教程（圖文版）

待更新 ...

React 生態(tài)桶項(xiàng)目實(shí)戰(zhàn)開發(fā)

待更新 ...

React 深入系統(tǒng)學(xué)習(xí)教程（視頻版）

待更新 ...

React 高頻面試真題和答案解析

• 中小企業(yè)和一線大廠最近 3 個(gè)月 React 最新面試真題和答案解析 (opens new window)👆

據(jù)不完全統(tǒng)計(jì)目前國內(nèi)哪些大廠在使用 React

螞蟻、飛豬、阿里大于、蝦米音樂、口碑開放平臺(tái)

貓途鷹、喜馬拉雅 FM、斗魚、知乎、豆瓣、美團(tuán)、房多多、石墨文檔、墨刀、TalkingData、xiaopiu、Teambition、Uber、倍洽、同盾科技、心知天氣、拼多多、滴滴出行、Sentry、途牛、優(yōu)酷、京東服飾+生鮮+旅行、算力矩陣、鏈家 H5、阿里云管理后臺(tái)、Coding、CodePen、樹莓派

36 氪、Notion、GoDaddy、站酷、Plotly、麥客 CRM、特贊營銷日歷、鹿班、網(wǎng)易云閱讀 PC 端+網(wǎng)易云音樂 H5、獵聘網(wǎng)、看云文檔編輯頁、去哪兒 H5 多個(gè)模塊、藝龍 H5 個(gè)別模塊、租租車 H5、汽車之家車商城、Pocket、友盟、iH5 等

#團(tuán)隊(duì)協(xié)同、工程化，監(jiān)控運(yùn)維

TIP

• Git 版本管理，缺陷管理，單人、團(tuán)隊(duì)開發(fā)與跨團(tuán)隊(duì)開發(fā)

• RESTful API 接口管理，webpack / Gulp 自動(dòng)化構(gòu)建

• CICD 自動(dòng)化部署

• Linux 項(xiàng)目部署

• Nginx 反向代理、負(fù)載均衡

• 運(yùn)行日志與監(jiān)控

#大廠高薪面試真題

Interview questions

• HTML/HTML5、CSS/CSS3 面試真題 (opens new window)👆

• JavaScript + ES6 面試真題 (opens new window)👆

• 前端進(jìn)階 面試真題（瀏覽器、性能、安全） (opens new window)👆

• Vue、React 面試真題 (opens new window)👆

• 全棧面試真題 (opens new window)👆

• 面試方法論 (opens new window)👆

#后端開發(fā)

TIP

• NodeJS

• express

• koa

• egg

• 基本 API（如 http、fs 等）

• commonjs 模塊化

• 框架

• 調(diào)試

• SSR

• 服務(wù)端模板，如 ejs artTemplate 等

• nuxt.js （Vue SSR）

• next.js（React SSR）

• 常用

• redis

• MySQL

• mongodb

• nginx（反向代理、負(fù)載均衡）

• 數(shù)據(jù)庫

• Docker

• 日志分析

• serverless

• Deno

• 小程序開發(fā)

• PWA

• 跨端（如 RN Weex）

• 客戶端 electron

  企業(yè)項(xiàng)目技術(shù)解決方案

TIP

緊跟市場需求、漸進(jìn)式，多端跨平臺(tái)，系統(tǒng)性，企業(yè)級(jí)項(xiàng)目解決方案

參考閱讀：

最新 Web 前端開發(fā)學(xué)習(xí)路線，主要技術(shù)棧

三、想學(xué)web前端需要學(xué)什么知識(shí)

隨著互聯(lián)網(wǎng)的發(fā)展，各種小程序、APP以及很多的互聯(lián)網(wǎng)+創(chuàng)業(yè)公司的興起，對(duì)現(xiàn)在前端工程的要求也越來越高，如何適應(yīng)目前IT行業(yè)時(shí)代的發(fā)展趨勢，web前端工程師又需要掌握那些技能呢？

一、HTML5+CSS3

HTML是網(wǎng)頁的主要組成部分，網(wǎng)頁的本質(zhì)就是HTML，是用來制作超文本文檔的簡單標(biāo)記語言；CSS樣式是對(duì)HTML語言的有效補(bǔ)充，通過使用CSS樣式，便于頁面的修改以及頁面風(fēng)格的統(tǒng)一，還可以減少頁面的體積，通過HTML和CSS完成靜態(tài)頁面的布局。HTML5+CSS3是HTML+CSS的更新，增加了很多非常實(shí)用的功能。這部分主要是從PC端和移動(dòng)端兩方面掌握整體的頁面布局技術(shù)，并且配合項(xiàng)目實(shí)戰(zhàn)操練、學(xué)以致用。

二、JS交互設(shè)計(jì)

這一部分主要掌握J(rèn)S的基本語法、算法和高級(jí)語法，熟練使用面向?qū)ο蟮乃枷脒M(jìn)行DOM編程，通過JQuery經(jīng)典案例學(xué)習(xí)精通JQuery技術(shù)。

三、Node開發(fā)

這一部分主要ES6的基本語法、兼容性和核心語法，能使用ES6實(shí)現(xiàn)前端的模塊開發(fā)，學(xué)習(xí)Node開發(fā)，并能用Node.js操作MongoDB數(shù)據(jù)庫。

四、前端框架

這一部分主要學(xué)習(xí)Vue、React、Angular這些前端主流框架，在實(shí)際開發(fā)中做到熟練運(yùn)用，提高開發(fā)效率。

五、小程序與APP開發(fā)

掌握小程序和APP開發(fā)，學(xué)習(xí)第三方AI平臺(tái)的使用，并學(xué)習(xí)React Native混合開發(fā)框架，實(shí)現(xiàn)快速開發(fā)。

通過以上介紹，相信大家都了解了web前端開發(fā)需要學(xué)習(xí)的內(nèi)容了，現(xiàn)在隨著行業(yè)而發(fā)展，對(duì)前端的要求也越來越高，對(duì)高端人才的需求也越來越多，只有大家掌握的知識(shí)越多，掌握的技能越全面，越好，之后的選擇權(quán)才會(huì)更多，發(fā)展前景更好。

四、前端開發(fā)需要學(xué)什么?。?/strong>