很多零基礎(chǔ)學(xué)Web前端的小伙伴都很迷茫不知道該如何入門，本文小編就分享下Web前端入門學(xué)習(xí)路徑，總共分為4步，下面一起來看看吧!
 

　　1.打好基礎(chǔ)不用說

　　HTML、CSS、JavaScript 三大件，完全掌握。不懂得就直接查 MDN。

　　HTML重點(diǎn)掌握語義化。區(qū)分塊級(jí)和內(nèi)聯(lián)標(biāo)簽。其他查文檔就好了。還有就是定義 head 里面一些meta 了解下。

　　CSS。重點(diǎn)看盒子模型，定位，層級(jí)，過渡，動(dòng)畫和 transform。知道原理和規(guī)則。大部分工作都是照著設(shè)計(jì)稿化。掌握上面幾個(gè) 99% 還原也不難。接下來重點(diǎn)學(xué)習(xí)幾種常見的布局。完了之后去搞flex。再搞下sass、less?；揪筒畈欢嗔?。每個(gè)知識(shí)點(diǎn)搞懂。ES6 基本沒啥問題。
 

　　2.框架方面

　　前期要會(huì)用，后期要懂原理。

　　新人先搞 Vue。Vue 算是上手容易的框架。照著官方文檔來問題不大。原理方面要提高自己認(rèn)識(shí)。學(xué)習(xí)怎么看源碼。github常去逛逛。

　　學(xué)習(xí)框架之前，我其實(shí)特別建議，新人先去了解

　　Babel 和 webpack 不僅僅是使用。一些原理方面的東西工作中也會(huì)用到。babel 里面會(huì)有教你如何編譯代碼。webpack

　　教你如和打包文件。自己手寫編譯器和打包工具也不是特別難。反正對(duì)之后看vue、react源碼幫助挺大。

　　搞完 Vue 全家桶，去了解下 React，React hooks 學(xué)習(xí)下新的理念。再回過頭來看Vue。你會(huì)發(fā)現(xiàn)他們是如此的相似去又不同。 多去實(shí)踐總結(jié)，對(duì)整體框架理解會(huì)越來越深刻。

　　3.學(xué)會(huì)看源碼

　　新人剛開始看源碼，會(huì)陷入兩個(gè)困境中。一是無從下手。二是看了之后感覺沒啥收獲。

　　這個(gè)也很正常。一般我們熟知的框架都有個(gè)幾千甚至上萬個(gè)PR。太大細(xì)節(jié)會(huì)干擾你。掌握整個(gè)節(jié)奏和流程。學(xué)習(xí)原理也比較吃力。就連找個(gè)入口都像大海撈針一樣。

　　建議從下面幾個(gè)方面入手：

　　挑簡(jiǎn)單的上手。別一開始就搞 vue、react、webpack。太難，會(huì)直接勸退新人。

　　不要為了面試而去讀。反而效果不好，面試稍微問深入一點(diǎn)就答不出來了。平時(shí)有興趣多琢磨琢磨。按照難易程度，函數(shù)庫 < 組件庫 < 框架 < 工程化 分別典型代表 lodash < vant < vue < webpack

　　手?jǐn)]簡(jiǎn)易模型。像vue, webpack, babel 都有簡(jiǎn)易項(xiàng)目給你擼。有的創(chuàng)始人(尤哥)還直播手?jǐn)]。國外的更多，youtube 一搜一大堆。就算不看源碼，照著寫出了簡(jiǎn)易 demo 對(duì)原理和理解提升都是很大的。

　　調(diào)試開源項(xiàng)目。先把項(xiàng)目拉下來。在vscode里面跑下，核心函數(shù)多打幾個(gè)斷點(diǎn)?？纯蠢锩孀兞渴窃趺磀iff的。 對(duì)理解更深刻了。

　　看了源碼是別人的，學(xué)到了是自己的。學(xué)習(xí)時(shí)候邊記筆記，邊思考原理，總結(jié)經(jīng)驗(yàn)。下面來談?wù)勄岸斯こ袒趺磁?br />  

　　4.前端工程化

　　現(xiàn)在流行的打包工具 webpack 用起來。當(dāng)然直接用 vue-cli2、vue-cli3、create-react 都是可以的。但是 webpack 相關(guān)還是得掌握。

　　首先重點(diǎn)搞下babel、webpack。

　　學(xué)習(xí)下編譯和打包的原理。

　　自己配置下 webpack。嘗試自己去寫下下 webpack 的 loader 和 plugin。

　　學(xué)習(xí)這些之前要懂一點(diǎn)node.js， node.js 不需要全部學(xué)習(xí)。一般就日常用到讀寫文件fs接口，path 路徑接口。這些 api 都不難寫幾個(gè) demo

　　就懂了?；旧蟱ebpack 里面配置文件也沒用到多少 node 的東西。自己學(xué)會(huì)配置 webpack 的配置文件。

　　如果想深想去優(yōu)化打包體積和速度，就需要去了解很多webpack插件。webpack 里面核心的就是插件了。
 

　　當(dāng)然前端工程化不僅僅是這些，CI/CD可持續(xù)集成, Umi 了解下。sh各種腳本自動(dòng)化命令、代碼生成技術(shù)了解下。