最近知乎收到一些問題，問前端學(xué)起來吃力，連續(xù)更新幾次回答的比較全了。現(xiàn)在整理下分享給掘金的小伙伴們。

原知乎問題:

前言
前端工作兩年多。大部分前端原理、框架都能完全運用。工作中幾乎遇不到解決不了的問題（除了那些惡心無法實現(xiàn)的需求）現(xiàn)在經(jīng)常被安排去面試新人（被安排去面試，主要是工作能力比較突出的原因，公司還有很多3年以上的員工）。
下面說說我的學(xué)習(xí)方法或許對你有用！一、打好基礎(chǔ)不用說
HTML、CSS、JavaScript 三大件，完全掌握。不懂得就直接查 MDN。HTML重點掌握語義化。區(qū)分塊級和內(nèi)聯(lián)標(biāo)簽。其他查文檔就好了。還有就是定義 head 里面一些meta 了解下。CSS。重點看盒子模型，定位，層級，過渡，動畫和 transform。知道原理和規(guī)則。大部分工作都是照著設(shè)計稿化。掌握上面幾個 99% 還原也不難。接下來重點學(xué)習(xí)幾種常見的布局。完了之后去搞flex。最后搞下sass、less。基本就差不多了。JavaScript。重點來了，紅寶書看一遍掌握基礎(chǔ)，進階去看《你不知道的 JavaScript》。就這兩套足夠了，別搞那么多。
每個知識點搞懂。ES6 基本沒啥問題。下面幾個問題優(yōu)先搞懂，優(yōu)先級如下：
this 用法，相關(guān)原理
原型/原型鏈
閉包
面向?qū)ο笙嚓P(guān)
同步異步/回調(diào)/promise/async、await
模塊化 CommonJS, AMD
先搞這懂這些比較難的概念，對你JS理解更加深入。接下來在開始看框架方面：二、框架方面
前期要會用，后期要懂原理。
新人先搞 Vue。Vue 算是上手容易的框架。照著官方文檔來問題不大。原理方面要提高自己認識。學(xué)習(xí)怎么看源碼。github常去逛逛。
學(xué)習(xí)框架之前，我其實特別建議，新人先去了解 Babel 和 webpack 不僅僅是使用。一些原理方面的東西工作中也會用到。babel 里面會有教你如何編譯代碼。webpack 教你如和打包文件。自己手寫編譯器和打包工具也不是特別難。反正對之后看vue、react源碼幫助挺大。
搞完 Vue 全家桶，去了解下 React，React hooks 學(xué)習(xí)下新的理念。再回過頭來看Vue。你會發(fā)現(xiàn)他們是如此的相似去又不同。
多去實踐總結(jié)，對整體框架理解會越來越深刻。三、如何看源碼新人剛開始看源碼，會陷入兩個困境中。一是無從下手。二是看了之后感覺沒啥收獲。
這個也很正常。一般我們熟知的框架都有個幾千甚至上萬個PR。太大細節(jié)會干擾你。掌握整個節(jié)奏和流程。學(xué)習(xí)原理也比較吃力。就連找個入口都像大海撈針一樣。
建議從下面幾個方面入手：
挑簡單的上手。別一開始就搞 vue、react、webpack。太難，會直接勸退新人。
不要為了面試而去讀。反而效果不好，面試稍微問深入一點就答不出來了。平時有興趣多琢磨琢磨。按照難易程度，函數(shù)庫 < 組件庫 < 框架 < 工程化 分別典型代表 lodash < vant < vue < webpack
手擼簡易模型。像vue, webpack, babel 都有簡易項目給你擼。有的創(chuàng)始人（尤哥）還直播手擼。國外的更多，youtube 一搜一大堆。就算不看源碼，照著寫出了簡易 demo 對原理和理解提升都是很大的。
調(diào)試開源項目。先把項目拉下來。在vscode里面跑下，核心函數(shù)多打幾個斷點。看看里面變量是怎么diff的。 對理解更深刻了。
看了源碼是別人的，學(xué)到了是自己的。學(xué)習(xí)時候邊記筆記，邊思考原理，總結(jié)經(jīng)驗。下面來談?wù)勄岸斯こ袒趺磁Ｋ摹⑶岸斯こ袒?br />現(xiàn)在最流行的打包工具 webpack 用起來。當(dāng)然直接用 vue-cli2、vue-cli3、create-react 都是可以的。但是 webpack 相關(guān)還是得掌握。
首先重點搞下babel、webpack。
學(xué)習(xí)下編譯和打包的原理。
自己配置下 webpack。嘗試自己去寫下下 webpack 的 loader 和 plugin。
學(xué)習(xí)這些之前要懂一點 node.js， node.js 不需要全部學(xué)習(xí)。一般就日常用到讀寫文件fs接口，path 路徑接口。這些 api 都不難寫幾個 demo 就懂了。基本上webpack 里面配置文件也沒用到多少 node 的東西。最后自己學(xué)會配置 webpack 的配置文件。
如果想深想去優(yōu)化打包體積和速度，就需要去了解很多webpack插件。webpack 里面最核心的就是插件了。
當(dāng)然前端工程化不僅僅是這些，CI/CD可持續(xù)集成, Umi 了解下。sh各種腳本自動化命令、代碼生成技術(shù)了解下。
作者：程序員的青春
鏈接：前端學(xué)起來特別吃力,新人入前端怎么學(xué)？
來源：簡書

總結(jié)

以上是生活随笔為你收集整理的vue怎么插入接口demo_前端学起来特别吃力，新人入前端怎么学？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。