自學(xué)web前端應(yīng)該怎么學(xué)？回看近年的前端發(fā)展，不管是之前的散裝前端時(shí)代，還是后來插件化、模塊化的演進(jìn)，亦或是現(xiàn)如今如火如荼的前端工程化迭代，發(fā)展速度實(shí)在是太快了，各種框架層出不窮，這些難免會(huì)讓我們這些學(xué)習(xí)者眼花繚亂，滿腹疑團(tuán)，那么不想?yún)⒓?a target="_blank">web前端培訓(xùn)班，先來看看這份自學(xué)前端開發(fā)學(xué)習(xí)路線圖。

　　而且每個(gè)公司所用的東西也各不相同，所以想給出一張學(xué)習(xí)前端路徑是非常困難的。但最近兩年，前端技術(shù)和三大框架地位趨于穩(wěn)定，作為前端培訓(xùn)屆的扛把子，我們整理了這份前端開發(fā)學(xué)習(xí)路徑。這里講解的是面向新手的學(xué)習(xí)路徑，如果你有基礎(chǔ)，可以利用這個(gè)路徑圖查缺補(bǔ)漏。廢話不多說，直接開始。

　　第一階段

　　想成為一名前端開發(fā)人員，第一步就是網(wǎng)頁布局和效果實(shí)現(xiàn)。也就是我們常說的切圖仔，這時(shí)候你需要學(xué)習(xí)HTML+CSS。此部分的學(xué)習(xí)目的是把UI設(shè)計(jì)師給你的設(shè)計(jì)稿用HTML+CSS還原成網(wǎng)頁。這部分的難點(diǎn)是有大量的標(biāo)簽需要你記憶。但是不要緊，剛開始你只要了解這種標(biāo)簽的形式，以后在工作中用的多了就熟練了。做個(gè)比喻就是你只要記住心法，以后實(shí)戰(zhàn)多了，招式自然精通了。

　　再簡(jiǎn)單點(diǎn)，就是你不需要記住所有的標(biāo)簽，你只要知道都能實(shí)現(xiàn)什么，然后不會(huì)就去百度或者查文檔。HTML+CSS學(xué)完后，你就可以做出任何漂亮的網(wǎng)頁了，只是可能交互效果還實(shí)現(xiàn)不了。這時(shí)候你就要學(xué)習(xí)JavaScript了。這是比較難的一部分，因?yàn)檫@部分學(xué)的好與壞，直接關(guān)系到你后邊的學(xué)習(xí)進(jìn)度。但是如果你是初學(xué)者，學(xué)這部分也不要太執(zhí)著，非要達(dá)到精通的程度，才往下學(xué)習(xí)。你可以先大體過一遍所有語法，然后直接進(jìn)入下一個(gè)階段學(xué)習(xí)。因?yàn)橐院髮W(xué)習(xí)階段，還會(huì)不斷的使用這些JS語法。

　　第二階段

　　學(xué)習(xí)Vue框架，因?yàn)榍斑呥@些內(nèi)容雖然可以做出任何WEB界面了，但還不能讓你找到一份心儀的工作。所以你需要學(xué)一個(gè)流行框架。這里首推的就是Vue.js，因?yàn)樵趪?guó)內(nèi)，這是使用最多的框架，而且上手要比React容易一些，所以建議先學(xué)習(xí)Vue.js。學(xué)完這個(gè)后，你會(huì)知道什么是數(shù)據(jù)驅(qū)動(dòng)開發(fā)，什么是SPA應(yīng)用，也能輕松的實(shí)現(xiàn)前后端分離和服務(wù)端渲染。

　　第三階段

　　當(dāng)你掌握以上兩個(gè)階段，你會(huì)發(fā)現(xiàn)你還要學(xué)習(xí)很多相關(guān)的前端技能，比如Node.js、TypeScript、Webpack、小程序開發(fā)、React.js、ReactNative、Flutter框架、Liunx運(yùn)維、自動(dòng)化測(cè)試。如何學(xué)和重要的知識(shí)點(diǎn)，在路徑圖中都有詳細(xì)的介紹，我這里就不過多廢話了。

　　如果你要走完學(xué)習(xí)路線圖的8個(gè)階段，那學(xué)習(xí)時(shí)間會(huì)拉的很長(zhǎng)，所以建議你在學(xué)習(xí)的過程中邊學(xué)邊練，即使參加了工作之后，也要根據(jù)情況繼續(xù)精進(jìn)。