入門標準

入門標準很簡單，就一條：達到能參與 Web 前端實際項目的開發(fā)水平。請注意，是實際項目，這就需要了解如今的實際項目開發(fā)都用了哪些技術(shù)棧。HTML/CSS/JavaScript 這三大基礎(chǔ)技術(shù)?？隙ㄊ切枰莆盏模軈⑴c實際項目開發(fā)，肯定還要掌握其他一些主流的框架體系。

在這里我還是要推薦下我自己建的web前端開發(fā)學習群：731669587，群里都是學web前端開發(fā)的，如果你正在學習前端 ，小編歡迎你加入，今天分享的這個案例已經(jīng)上傳到群文件，大家都是軟件開發(fā)黨，不定期分享干貨（只有前端軟件開發(fā)相關(guān)的），包括我自己整理的一份2018最新的前端進階資料和高級開發(fā)教程，歡迎進階中和進想深入前端的小伙伴。

幾年前，?jQuery + Bootstrap可以說是一統(tǒng)江湖，是前端領(lǐng)域的絕對霸主。而這幾年，隨著Angular、React、Vue等框架的興起，變成了百家爭鳴的局面。這幾年，Web 前端的技術(shù)發(fā)展真是太快了，相應(yīng)地，技術(shù)棧也就變得非常多，除了最基本的HTML/CSS/JavaScript，以及Vue/React/Angular等這些 JavaScript 框架和各自的生態(tài)體系，還有 CSS 預(yù)處理器Sass/Less/Stylus，還有TypeScript，還有grunt/webpack/gulp等各種打包構(gòu)建工具，還有其他一大堆技術(shù)棧。

這么多技術(shù)棧，我們不可能全都掌握，就算是資深的前端工程師，也只是精通其中一部分，比如，有些精通 Angular，有些掌握 React，有些則熟悉 Vue，很少有人對三種框架生態(tài)體系都非常了解。因此，我們?nèi)腴T也沒必要每種框架都學習，只要挑選一種就夠了。而且，作為全棧，我們學習一門技術(shù)更重要的是要學習技術(shù)背后的編程思想、設(shè)計思想、架構(gòu)思想等。而不管是 Angular、React 還是 Vuew，其背后的核心設(shè)計思想都是組件化的設(shè)計，因此只要掌握一種框架，我們也就能學習到前端技術(shù)的核心思想了。

那么，我們應(yīng)該學哪種框架體系呢？我的建議是從 Vue 開始，因為 Vue 的學習成本是最低的，入門簡單，而且這兩年 Vue 可以說是出現(xiàn)了爆發(fā)式的增長，已經(jīng)直逼 React。React 的主要學習成本在于要掌握 JSX 語法，而且文檔還大多都是英文。Vue 因為是國人開發(fā)和維護的，自然對國內(nèi)的開發(fā)者更友好。Angular 則是個大而全的框架，顯得太重，學習成本自然最高。至于 jQuery + Bootstrap 這套，已經(jīng)過時了，建議沒必要去學習了，畢竟我們的時間很寶貴，還有一大堆更有價值的東西等著我們?nèi)W。

因此，我們要入門 Web 前端開發(fā)的話，除了要學習 HTML/CSS/JavaScript 三大基礎(chǔ)技術(shù)棧，還要了解 Vue 體系。而 Vue 體系，除了 Vue 框架本身，還包括其他技術(shù)棧，這個后面再說。

HTML/CSS/JavaScript

HTML、CSS、JavaScript 是前端的核心基礎(chǔ)，所以必須要掌握。HTML 主要就是HTML5，相比之前的版本，新增了很多新特性。CSS 則主要是?CSS3了，相比以前的版本，主要就是作了模塊化的拆分。JavaScript 其實分為三部分：ECMAScript、DOM和BOM。ECMAScript 簡稱ES，是 JavaScript 的核心，目前最新版本已經(jīng)是ES2017，是ES6的第三個小版本。DOM 是文檔對象模型，其實就是一套訪問和操作 HTML 所有元素的 API。BOM 則是瀏覽器對象模型，用于訪問和操作瀏覽器的一些特性。

視頻教程方面，慕課網(wǎng)、極客學院等都有基礎(chǔ)課程，但都是收費的，而且價格不菲，性價比實在太低。比如慕課網(wǎng)的《前端小白入門》+《前端進階：響應(yīng)式開發(fā)與前端框架》兩套課程的組合套餐就要 988 元了，而內(nèi)容還沒有上面免費教程的齊全。如果真要看視頻，那我會推薦網(wǎng)易云課堂的一些免費課程:

從零玩轉(zhuǎn)HTML5前端+跨平臺開發(fā)

H5/web前端開發(fā)｜HTML5+CSS3

李炎恢JavaScript教程 第一季

書籍方面，HTML 和 CSS 基礎(chǔ)方面的，首推《Head First HTML與CSS》，編排設(shè)計通俗易懂，就連完全零基礎(chǔ)的非 IT 人員都適合學習。不過，Head First 這本書沒有涉及到 HTML5 和 CSS3 的更新內(nèi)容。不過，Head First 有另一本書講解了 HTML5，叫《Head First HTML5 Programming》，不過，要熟悉 HTML5 的用法，還是要先掌握一點 JavaScript 基礎(chǔ)。CSS3 方面 Head First 則沒有相應(yīng)的書籍，因此，我推薦另一本《CSS3實用指南》。

JavaScript 方面，我首推《JavaScript高級程序設(shè)計》這本書，書中內(nèi)容由淺入深，也是寫得通俗易懂，適合入門。另外，有些人會推薦《JavaScript權(quán)威指南》，但這本書主要還是一本字典書，略顯晦澀，其實不適合入門。不過《JavaScript高級程序設(shè)計》還是基于?ES5的，為了補充ES6的內(nèi)容，推薦阮一峰的《ES6標準入門》，目前是第3版，內(nèi)容已經(jīng)覆蓋了最新版本的ES2017。

對于剛接觸當代前端的人員來說，存在太多陌生的概念需要了解，一時可能難以消化，Vue 的作者尤雨溪寫過一篇《新手向：Vue 2.0 的建議學習順序》，可以按照他的建議去學習。

學習資源方面，最好的應(yīng)該就是官方文檔了。另外，《Vue.js實戰(zhàn)》這本書有尤雨溪作推薦序，也可以買來看看，可以作為官網(wǎng)的補充資源。對于一些概念如果還不是很理解，也可以暫時先放一放，后面在做項目開發(fā)的過程中可能你就會理解了。

實戰(zhàn)入門

最關(guān)鍵的還是要通過項目實戰(zhàn)才能真正入門，這也是我一貫推崇的。也是和 Android、iOS 實戰(zhàn)一樣的建議，如果條件允許，你可以向上司申請參與自己公司的前端項目開發(fā)，然后開始去熟悉代碼和實現(xiàn)一些簡單的工作任務(wù)，建議先從完成一些簡單的UI界面開始。同樣，開源項目自然也是少不了，Vue 這塊的開源項目我推薦兩個：

vue2-happyfri：很簡單的一個小項目，很適合入門練習

vue2-elm：用 vue 模仿餓了么的一個完整項目，重點推薦

另外，也附上一個匯總了眾多 vue 開源項目的 github 地址：https://github.com/opendigg/awesome-github-vue。

對于開源實戰(zhàn)項目的操作上，我依然還是建議先給應(yīng)用改皮膚開始，之后嘗試著自己做出一個類似的App。以上面的 vue 版餓了么項目為例，你先給它所有頁面先換個皮膚，包括背景、按鈕、文字等等，通通換掉一遍，然后嘗試自己做一個百度外賣或美團外賣，當你做完，應(yīng)付一般的 vue 項目開發(fā)就應(yīng)該沒有問題了。之后也根據(jù)需要可以再去學下 React 體系，這時候?qū)W起來絕對不會吃力。

總結(jié)

前端開發(fā)入門，要學的技術(shù)棧真的很多，除了最基礎(chǔ)的 HTML/CSS/JavaScript，還包括 HTML5、CSS3、ES6，還要學習目前流行的 JavaScript 框架，我的建議是從 Vue 開始，容易入門，要掌握的技術(shù)棧包括 vue + vue-router + vuex + vue-cli + axios + sass + webpack，另外，node.js 也要了解點基礎(chǔ)。最后，實戰(zhàn)項目我推薦了一個簡單的小項目和一個完整的 vue 版餓了么項目。

思考和實踐

前端開發(fā)的編程思想和移動開發(fā)有什么不同？如何將前端的架構(gòu)思想應(yīng)用到移動開發(fā)上？最后，還是要獨立完成一款 Web 應(yīng)用。