快速入門Web前端開發(fā)的正確姿勢

1、快速入門web前端開發(fā)的正確姿勢入門標(biāo)準(zhǔn)入門標(biāo)準(zhǔn)很容易，就一條：達(dá)到能參加 web 前端實(shí)際項(xiàng)目的開發(fā)水平。請注重，是實(shí)際項(xiàng)目，這就需要了解如今的實(shí)際項(xiàng)目開發(fā)都用了哪些技術(shù)棧。html/css/javascript 這三大基礎(chǔ)技術(shù)棧絕對是需要把握的，但要能參加實(shí)際項(xiàng)目開發(fā)，絕對還要把握其他一些主流的框架體系。幾年前， jquery + bootstrap 可以說是一統(tǒng)江湖，是前端領(lǐng)域的肯定霸主。而這幾年，隨著 angular、react、vue 等框架的興起，變成了百家爭鳴的局面。這幾年，web 前端的技術(shù)進(jìn)展真是太快了，相應(yīng)地，技術(shù)棧也就變得十分多，除了最基本的 html/css/javas

2、cript，以及 vue/react/angular 等這些 javascript 框架和各自的生態(tài)體系，還有 css 預(yù)處理器 sass/less/stylus，還有 typescript，還有 grunt/webpack/gulp 等各種打包構(gòu)建工具，還有其他一大堆技術(shù)棧。這么多技術(shù)棧，我們不行能一致把握，就算是資深的前端工程師，也只是精通其中一部分，比如，有些精通 angular，有些把握 react，有些則認(rèn)識 vue，很少有人對三種框架生態(tài)體系都十分了解。因此，我們?nèi)腴T也沒須要每種框架都學(xué)習(xí)，只要選擇一種就夠了。而且，作為全棧，我們學(xué)習(xí)一門技術(shù)更重要的是要學(xué)習(xí)技術(shù)背后的編程思想、設(shè)計(jì)

3、思想、架構(gòu)思想等。而不管是 angular、react 還是 vuew，其背后的核心設(shè)計(jì)思想都是組件化的設(shè)計(jì)，因此只要把握一種框架，我們也就能學(xué)習(xí)到前端技術(shù)的核心思想了。那么，我們應(yīng)當(dāng)學(xué)哪種框架體系呢？我的建議是從 vue 開頭，由于 vue 的學(xué)習(xí)成本是最低的，入門容易，而且這兩年 vue 可以說是浮現(xiàn)了爆發(fā)式的增長，已經(jīng)直逼 react。react 的主要學(xué)習(xí)成本在于要把握 jsx 語法，而且文檔還大多都是英文。vue 由于是國人開發(fā)和維護(hù)的，自然對國內(nèi)的開發(fā)者更友好。angular 則是個(gè)大而全的框架，顯得太重，學(xué)習(xí)成本自然最高。至于 jquery + bootstrap 這套，已經(jīng)過時(shí)

4、了，建議沒須要去學(xué)習(xí)了，究竟我們的時(shí)光很珍貴，還有一大堆更有價(jià)值的東西等著我們?nèi)W(xué)。因此，我們要入門 web 前端開發(fā)的話，除了要學(xué)習(xí) html/css/javascript 三大基礎(chǔ)技術(shù)棧，還要了解 vue 體系。而 vue 體系，除了 vue 框架本身，還包括其他技術(shù)棧，這個(gè)后面再說。html/css/javascripthtml、css、javascript 是前端的核心基礎(chǔ)，所以必需要把握。html 主要就是 html5，相比之前的版本，新增了無數(shù)新特性。css 則主要是 css3 了，相比以前的版本，主要就是作了模塊化的拆分。javascript 其實(shí)分為三部分：ecmascript

5、、dom 和 bom。ecmascript 簡稱 es，是 javascript 的核心，目前最新版本已經(jīng)是 es2017，是 es6 的第三個(gè)小版本。dom 是文檔對象模型，其實(shí)就是一套拜訪和操作 html 全部元素的 api。bom 則是掃瞄器對象模型，用于拜訪和操作掃瞄器的一些特性。html/css/javascript 的學(xué)習(xí)資源比較多，我推舉幾個(gè)。首先是 w3school 的系列教程：html：該教程也包括了 html5 新增的內(nèi)容，但講得沒下面特地講解 html5 的細(xì)，所以該教程我建議只看 html 基礎(chǔ)教程和表單部分即可html5：該教程講解了 html5 的新特性css：該教

6、程并不包括 css3 新增的特性，所以還需要學(xué)習(xí)下面的 css3 的教程css3：該教程內(nèi)容比較少，只包含 css3 新增的特性javascript：該教程只是講解了十分基礎(chǔ)的語法不過，我更推舉菜鳥的教程，內(nèi)容雖然也是來自 w3school，但部分內(nèi)容比 w3school 的更具體，以下是教程地址：html：css：javascript：html 和 css 只要按照以上教程學(xué)習(xí)就足夠了，但 javascript 則是不夠的，以上教程缺少了 es6 及更高版本的內(nèi)容，后面我再推舉其他學(xué)習(xí)資源舉行補(bǔ)充。書籍方面，html 和 css 基礎(chǔ)方面的，首推head first html與css，編排設(shè)

7、計(jì)通俗易懂，就連徹低零基礎(chǔ)的非 it 人員都適合學(xué)習(xí)。不過，head first 這本書沒有涉及到 html5 和 css3 的更新內(nèi)容。不過，head first 有另一本書講解了 html5，叫head first html5 programming，不過，要認(rèn)識 html5 的使用，還是要先把握一點(diǎn) javascript 基礎(chǔ)。css3 方面 head first 則沒有相應(yīng)的書籍，因此，我推舉另一本css3有用指南。javascript 方面，我首推javascript高級程序設(shè)計(jì)這本書，書中內(nèi)容由淺入深，也是寫得通俗易懂，適合入門。另外，有些人會(huì)推舉javascript權(quán)威指南，但這

8、本書主要還是一本字典書，略顯晦澀，其實(shí)不適合入門。不過javascript高級程序設(shè)計(jì)還是基于 es5 的，為了補(bǔ)充 es6 的內(nèi)容，推舉阮一峰的es6標(biāo)準(zhǔn)入門，目前是第3版，內(nèi)容已經(jīng)籠罩了最新版本的 es2017。另外，由于這是一本開源教材，所以也可以挺直去阮一峰的官網(wǎng)免費(fèi)閱讀，以下是鏈接地址：ecmascript 6 入門：另外，有一套系列書叫you don&39;t know js也要推舉給大家，也是開源教材，這套書會(huì)讓你對 javascript 知其然也知其所以然，也包含了 es6 的內(nèi)容，不過這套書面對初學(xué)者的，只適合用來進(jìn)階。也出版了中文翻譯的書籍，叫你不知道的javasc

9、ript，目前惟獨(dú)上卷和中卷兩本，據(jù)評價(jià)，上卷的翻譯還不錯(cuò)，但中卷的翻譯則普通般，下卷不知道什么時(shí)候才出版。以下是系列書的github地址：you don&39;t know js：那么，這么多學(xué)習(xí)資源，我們應(yīng)當(dāng)如何學(xué)習(xí)才高效呢？其實(shí)，我們主要還是為了了解各種核心概念，我們不行能在短期內(nèi)認(rèn)識全部學(xué)問點(diǎn)，因此，我還是和前面的文章一樣，也排列出一些核心的學(xué)問點(diǎn)吧。html基礎(chǔ)：以 w3school 或菜鳥的 html 教程為主，認(rèn)識各種常用標(biāo)簽的使用，尤其是標(biāo)題、段落、鏈接、圖像、表格、列表、表單、區(qū)塊、布局、css、腳本等css基礎(chǔ)：同樣以 w3school 或菜鳥的 css 教程為主，

10、認(rèn)識 css 語法和挑選器、樣式、框模型、定位等模塊的內(nèi)容javascript基礎(chǔ)：首先作為一門編程語言，語言本身的基礎(chǔ)絕對要認(rèn)識，包括數(shù)據(jù)類型、變量、運(yùn)算符、控制流、函數(shù)、對象等；另外，也要認(rèn)識 dom；bom 容易了解下就可以了，用法場景不多html5：html5 的新特性絕對要了解，內(nèi)容其實(shí)也不是無數(shù)，核心的就是 canvas、svg、對多媒體的支持、web 存儲(chǔ)、應(yīng)用緩存、websocket等css3：css3 也是要認(rèn)識那些新特性，最核心的就是彈性盒子es6：es6 自然也是要認(rèn)識的，學(xué)好阮一峰的ecmascript 6 入門教程就足夠了vue 體系在開頭正式學(xué)習(xí) vue 之前，我們

11、先來了解幾個(gè)概念，這樣才干更好理解 vue 的一些設(shè)計(jì)理念。第一個(gè)概念是單頁應(yīng)用程序，就是惟獨(dú)一個(gè) web 頁面的應(yīng)用，是只加載單個(gè) html 頁面并在用戶與應(yīng)用程序交互式動(dòng)態(tài)更新該頁面的 web 應(yīng)用程序。其次個(gè)概念是virtual dom，即虛擬 dom，容易說就是一個(gè)模擬 dom 樹的 javascript 對象，是為了避開大面積操作真切 dom 而導(dǎo)致的性能問題。第三個(gè)概念是響應(yīng)式系統(tǒng)，通過數(shù)據(jù)模型和 view 的數(shù)據(jù)綁定，系統(tǒng)可以對數(shù)據(jù)模型的修改自動(dòng)響應(yīng)到視圖上。第四個(gè)概念則是組件化，vue 和 react 都是通過組合各種組件組成應(yīng)用程序的。理解了這些概念，你才干更好的理解 vue

12、/react 這些前端框架體系。還有，開發(fā)工具方面，我推舉 visual studio code，一款免費(fèi)開源的輕量級代碼編輯器，macos、windows、linux 都支持，有人評價(jià)說比sublime開源，比atom更快，比webstorm更輕，所以說，你值得擁有。vue 體系包含了無數(shù)技術(shù)棧，一套完整的 vue 項(xiàng)目普通包括 vue + vue-router + vuex + vue-cli + axios + sass + webpack，其中，vue + vue-router + vuex 又稱為 vue 全家桶，由于這三套技術(shù)棧都是 vue 官方推出的，其他框架和工具則是第三方的。

13、那么，就讓我們來一個(gè)個(gè)了解這些技術(shù)棧吧。vue：vue 即是 vue.js 框架本身，是一套采納了 mvvm 模式的 javascript 框架，它和 react 一樣用法了 virtual dom，也提供了響應(yīng)式和組件化的視圖組件。不過與 react 不同的是，vue 更推舉用法基于 html 的模板，這也是它相比 react 等其他框架更簡單入門的緣由。vue-router：由于現(xiàn)在大多數(shù) web 應(yīng)用都是單頁應(yīng)用，那要實(shí)現(xiàn)單個(gè)頁面里的不同視圖的跳轉(zhuǎn)，就要用到路由，vue-router 庫就是用來實(shí)現(xiàn)單頁應(yīng)用的路由功能。vuex：vuex 是一個(gè)類 flux 的狀態(tài)管理庫，它采納集中式存儲(chǔ)

14、管理應(yīng)用的全部組件的狀態(tài)。關(guān)于什么是 flux，可以參考阮一峰寫的一篇文章flux 架構(gòu)入門教程。vue-cli：vue-cli 是官方提供的指令行工具，用它可以迅速創(chuàng)建 vue 項(xiàng)目。axios：axios 是 vue 官方推舉的一個(gè)第三方 http 庫，它是基于 promise 的，promise 是 es6 的新增特性。sass：css 的一款預(yù)處理器，容易入門可以看看阮一峰的一篇文章sass使用指南。預(yù)處理器另外還有 less 和 stylus，不過不少大牛最推舉的還是 sass。webpack：webpack 是打包構(gòu)建工具，可以類比為 java 的 gradle。不過 webpac

15、k 是基于 node.js 的，所以要用熟 webpack，還要學(xué)點(diǎn) node.js 的基礎(chǔ)學(xué)問，起碼要懂得配置 node.js 的運(yùn)行環(huán)境以及了解 node.js 的包管理工具 npm 的常用指令。對于剛接觸當(dāng)代前端的人員來說，存在太多生疏的概念需要了解，一時(shí)可能難以消化，vue 的作者尤雨溪寫過一篇新手向：vue 2.0 的建議學(xué)習(xí)挨次，可以根據(jù)他的建議去學(xué)習(xí)。學(xué)習(xí)資源方面，最好的應(yīng)當(dāng)就是官方文檔了。另外，vue.js實(shí)戰(zhàn)這本書有尤雨溪作推舉序，也可以買來看看，可以作為官網(wǎng)的補(bǔ)充資源。對于一些概念假如還不是很理解，也可以臨時(shí)先放一放，后面在做項(xiàng)目開發(fā)的過程中可能你就會(huì)理解了。實(shí)戰(zhàn)入門最關(guān)鍵

16、的還是要通過項(xiàng)目實(shí)戰(zhàn)才干真正入門，這也是我一貫推崇的。也是和 android、ios 實(shí)戰(zhàn)一樣的建議，假如條件允許，你可以向上司申請參加自己公司的前端項(xiàng)目開發(fā)，然后開頭去認(rèn)識代碼和實(shí)現(xiàn)一些容易的工作任務(wù)，建議先從完成一些容易的ui界面開頭。同樣，開源項(xiàng)目自然也是少不了，vue 這塊的開源項(xiàng)目我推舉兩個(gè)：vue2-happyfri：很容易的一個(gè)小項(xiàng)目，很適合入門練習(xí)vue2-elm：用 vue 仿照餓了么的一個(gè)完整項(xiàng)目，重點(diǎn)推舉另外，也附上一個(gè)匯總了眾多 vue 開源項(xiàng)目的 github 地址：對于開源實(shí)戰(zhàn)項(xiàng)目的操作上，我依舊還是建議先給應(yīng)用改皮膚開頭，之后嘗試著自己做出一個(gè)類似的app。以上面的 vue 版餓了么項(xiàng)目為例，你先給它全部頁面先換個(gè)皮膚，包括背景、按鈕、文字等等，通通換掉一遍，然后嘗試自己做一個(gè)百度外賣或美團(tuán)外賣，當(dāng)你做完，對付普通的 vue 項(xiàng)目開發(fā)就應(yīng)當(dāng)沒有問題了。之后也按照需要可以再去學(xué)下 react 體系，這時(shí)候?qū)W起來肯定不會(huì)吃力?？偨Y(jié)前端開發(fā)入門，要學(xué)的技術(shù)棧真的無數(shù)，除了最基礎(chǔ)的 html/css/javascript，還