web前端入門知識(web前端開發入門攻略)

來源:Web前端快訊? ????|???? 發布時間:2022-11-11 16:42? ????| 作者:南京北大青鳥小編? ????| 閱讀:

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

  1.打好基礎不用說

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

  HTML重點掌握語義化。區分塊級和內聯標簽。其他查文檔就好了。還有就是定義 head 里面一些meta 了解下。

  CSS。重點看盒子模型,定位,層級,過渡,動畫和 transform。知道原理和規則。大部分工作都是照著設計稿化。掌握上面幾個 99% 還原也不難。接下來重點學習幾種常見的布局。完了之后去搞flex。再搞下sass、less?;揪筒畈欢嗔?。每個知識點搞懂。ES6 基本沒啥問題。
 

  2.框架方面

  前期要會用,后期要懂原理。

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

  學習框架之前,我其實特別建議,新人先去了解

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

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

  搞完 Vue 全家桶,去了解下 React,React hooks 學習下新的理念。再回過頭來看Vue。你會發現他們是如此的相似去又不同。 多去實踐總結,對整體框架理解會越來越深刻。


web前端入門知識
 

  3.學會看源碼

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

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

  建議從下面幾個方面入手:

  挑簡單的上手。別一開始就搞 vue、react、webpack。太難,會直接勸退新人。

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

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

  調試開源項目。先把項目拉下來。在vscode里面跑下,核心函數多打幾個斷點??纯蠢锩孀兞渴窃趺磀iff的。 對理解更深刻了。

  看了源碼是別人的,學到了是自己的。學習時候邊記筆記,邊思考原理,總結經驗。下面來談談前端工程化怎么弄。
 

  4.前端工程化

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

  首先重點搞下babel、webpack。

  學習下編譯和打包的原理。

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

  學習這些之前要懂一點node.js, node.js 不需要全部學習。一般就日常用到讀寫文件fs接口,path 路徑接口。這些 api 都不難寫幾個 demo

  就懂了?;旧蟱ebpack 里面配置文件也沒用到多少 node 的東西。自己學會配置 webpack 的配置文件。

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

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


分享到:
文章標題:web前端入門知識(web前端開發入門攻略)文章鏈接: http://www.666application.com/news/xyxw/947.html 本文內容、圖片由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至2353260942@qq.com 舉報,一經查實,本站將立刻刪除。(如需投稿聯系管理員開通!)