快速入門Web前端開發的正確姿式

入門標準

入門標準很簡單，就一條：達到能參與 Web 前端實際項目的開發水平。請注意，是實際項目，這就須要瞭解現在的實際項目開發都用了哪些技術棧。HTML/CSS/JavaScript 這三大基礎技術棧確定是須要掌握的，但要能參與實際項目開發，確定還要掌握其餘一些主流的框架體系。

幾年前， jQuery + Bootstrap 能夠說是一統江湖，是前端領域的絕對霸主。而這幾年，隨着 Angular、React、Vue 等框架的興起，變成了百家爭鳴的局面。這幾年，Web 前端的技術發展真是太快了，相應地，技術棧也就變得很是多，除了最基本的 HTML/CSS/JavaScript，以及 Vue/React/Angular 等這些 JavaScript 框架和各自的生態體系，還有 CSS 預處理器 Sass/Less/Stylus，還有 TypeScript，還有 grunt/webpack/gulp 等各類打包構建工具，還有其餘一大堆技術棧。

這麼多技術棧，咱們不可能全都掌握，就算是資深的前端工程師，也只是精通其中一部分，好比，有些精通 Angular，有些掌握 React，有些則熟悉 Vue，不多有人對三種框架生態體系都很是瞭解。所以，咱們入門也不必每種框架都學習，只要挑選一種就夠了。並且，做爲全棧，咱們學習一門技術更重要的是要學習技術背後的編程思想、設計思想、架構思想等。而無論是 Angular、React 仍是 Vuew，其背後的核心設計思想都是組件化的設計，所以只要掌握一種框架，咱們也就能學習到前端技術的核心思想了。

那麼，咱們應該學哪一種框架體系呢?個人建議是從 Vue 開始，由於 Vue 的學習成本是最低的，入門簡單，並且這兩年 Vue 能夠說是出現了爆發式的增加，已經直逼 React。React 的主要學習成本在於要掌握 JSX 語法，並且文檔還大多都是英文。Vue 由於是國人開發和維護的，天然對國內的開發者更友好。Angular 則是個大而全的框架，顯得過重，學習成本天然最高。至於 jQuery + Bootstrap 這套，已通過時了，建議不必去學習了，畢竟咱們的時間很寶貴，還有一大堆更有價值的東西等着咱們去學。

所以，咱們要入門 Web 前端開發的話，除了要學習 HTML/CSS/JavaScript 三大基礎技術棧，還要了解 Vue 體系。而 Vue 體系，除了 Vue 框架自己，還包括其餘技術棧，這個後面再說。

HTML/CSS/JavaScript

HTML、CSS、JavaScript 是前端的核心基礎，因此必需要掌握。HTML 主要就是 HTML5，相比以前的版本，新增了不少新特性。CSS 則主要是 CSS3 了，相比之前的版本，主要就是做了模塊化的拆分。JavaScript 其實分爲三部分：ECMAScript、DOM 和 BOM。ECMAScript 簡稱 ES，是 JavaScript 的核心，目前最新版本已是 ES2017，是 ES6 的第三個小版本。DOM 是文檔對象模型，其實就是一套訪問和操做 HTML 全部元素的 API。BOM 則是瀏覽器對象模型，用於訪問和操做瀏覽器的一些特性。

HTML/CSS/JavaScript 的學習資源比較多，我推薦幾個。首先是 w3school 的系列教程：

• HTML：該教程也包括了 HTML5 新增的內容，但講得沒下面專門講解 HTML5 的細，因此該教程我建議只看 HTML 基礎教程和表單部分便可

• HTML5：該教程講解了 HTML5 的新特性

• CSS：該教程並不包括 CSS3 新增的特性，因此還須要學習下面的 CSS3 的教程

• CSS3：該教程內容比較少，只包含 CSS3 新增的特性

• JavaScript：該教程只是講解了很是基礎的語法

不過，我更推薦菜鳥的教程，內容雖然也是來自 w3school，但部份內容比 w3school 的更詳細，如下是教程地址：

1. HTML：www.runoob.com/html/html-t…

2. CSS：www.runoob.com/css/css-tut…

3. JavaScript：www.runoob.com/js/js-tutor…

HTML 和 CSS 只要根據以上教程學習就足夠了，但 JavaScript 則是不夠的，以上教程缺乏了 ES6 及更高版本的內容，後面我再推薦其餘學習資源進行補充。

書籍方面，HTML 和 CSS 基礎方面的，首推《Head First HTML與CSS》，編排設計通俗易懂，就連徹底零基礎的非 IT 人員都適合學習。不過，Head First 這本書沒有涉及到 HTML5 和 CSS3 的更新內容。不過，Head First 有另外一本書講解了 HTML5，叫《Head First HTML5 Programming》，不過，要熟悉 HTML5 的用法，仍是要先掌握一點 JavaScript 基礎。CSS3 方面 Head First 則沒有相應的書籍，所以，我推薦另外一本《CSS3實用指南》。

JavaScript 方面，我首推《JavaScript高級程序設計》這本書，書中內容由淺入深，也是寫得通俗易懂，適合入門。另外，有些人會推薦《JavaScript權威指南》，但這本書主要仍是一本字典書，略顯晦澀，其實不適合入門。不過《JavaScript高級程序設計》仍是基於 ES5 的，爲了補充 ES6 的內容，推薦阮一峯的《ES6標準入門》，目前是第3版，內容已經覆蓋了最新版本的 ES2017。另外，由於這是一本開源教材，因此也能夠直接去阮一峯的官網免費閱讀，如下是連接地址：

ECMAScript 6 入門：es6.ruanyifeng.com/

另外，有一套系列書叫《You Don't Know JS》也要推薦給你們，也是開源教材，這套書會讓你對 JavaScript 知其然也知其因此然，也包含了 ES6 的內容，不過這套書面向初學者的，只適合用來進階。也出版了中文翻譯的書籍，叫《你不知道的JavaScript》，目前只有上卷和中卷兩本，據評價，上卷的翻譯還不錯，但中卷的翻譯則通常般，下卷不知道何時纔出版。如下是系列書的github地址：

You Don't Know JS：github.com/getify/You-…

那麼，這麼多學習資源，咱們應該如何學習才高效呢?其實，咱們主要仍是爲了瞭解各類核心概念，咱們不可能在短時間內熟悉全部知識點，所以，我仍是和前面的文章同樣，也羅列出一些核心的知識點吧。

• HTML基礎：以 w3school 或菜鳥的 HTML 教程爲主，熟悉各類經常使用標籤的用法，尤爲是標題、段落、連接、圖像、表格、列表、表單、區塊、佈局、CSS、腳本等

• CSS基礎：一樣以 w3school 或菜鳥的 CSS 教程爲主，熟悉 CSS 語法和選擇器、樣式、框模型、定位等模塊的內容

• JavaScript基礎：首先做爲一門編程語言，語言自己的基礎確定要熟悉，包括數據類型、變量、運算符、控制流、函數、對象等;另外，也要熟悉 DOM;BOM 簡單瞭解下就能夠了，使用場景很少

• HTML5：HTML5 的新特性確定要了解，內容其實也不是不少，核心的就是 canvas、svg、對多媒體的支持、Web 存儲、應用緩存、WebSocket等

• CSS3：CSS3 也是要熟悉那些新特性，最核心的就是彈性盒子

• ES6：ES6 天然也是要熟悉的，學好阮一峯的《ECMAScript 6 入門》教程就足夠了

Vue 體系

在開始正式學習 Vue 以前，咱們先來了解幾個概念，這樣才能更好理解 Vue 的一些設計理念。第一個概念是「單頁應用程序」，就是隻有一個 Web 頁面的應用，是隻加載單個 HTML 頁面並在用戶與應用程序交互式動態更新該頁面的 Web 應用程序。第二個概念是「Virtual DOM」，即虛擬 DOM，簡單說就是一個模擬 DOM 樹的 JavaScript 對象，是爲了不大面積操做真實 DOM 而致使的性能問題。第三個概念是「響應式系統」，經過數據模型和 View 的數據綁定，系統能夠對數據模型的修改自動響應到視圖上。第四個概念則是「組件化」，Vue 和 React 都是經過組合各類組件組成應用程序的。理解了這些概念，你才能更好的理解 Vue/React 這些前端框架體系。

還有，開發工具方面，我推薦 Visual Studio Code，一款免費開源的輕量級代碼編輯器，macOS、Windows、Linux 都支持，有人評價說比sublime開源，比atom更快，比webstorm更輕，因此說，你值得擁有。

Vue 體系包含了不少技術棧，一套完整的 Vue 項目通常包括 vue + vue-router + vuex + vue-cli + axios + sass + webpack，其中，vue + vue-router + vuex 又稱爲 Vue 全家桶，由於這三套技術棧都是 Vue 官方推出的，其餘框架和工具則是第三方的。那麼，就讓咱們來一個個瞭解這些技術棧吧。

• vue：vue 便是 Vue.js 框架自己，是一套採用了 MVVM 模式的 JavaScript 框架，它和 React 同樣使用了 Virtual DOM，也提供了響應式和組件化的視圖組件。不過與 React 不一樣的是，Vue 更推薦使用基於 HTML 的模板，這也是它相比 React 等其餘框架更容易入門的緣由。

• vue-router：由於如今大多數 Web 應用都是單頁應用，那要實現單個頁面裏的不一樣視圖的跳轉，就要用到路由，vue-router 庫就是用來實現單頁應用的路由功能。

• vuex：vuex 是一個類 Flux 的狀態管理庫，它採用集中式存儲管理應用的全部組件的狀態。關於什麼是 Flux，能夠參考阮一峯寫的一篇文章《Flux 架構入門教程》。

• vue-cli：vue-cli 是官方提供的命令行工具，用它能夠快速建立 vue 項目。

• axios：axios 是 vue 官方推薦的一個第三方 HTTP 庫，它是基於 promise 的，promise 是 ES6 的新增特性。

• sass：CSS 的一款預處理器，簡單入門能夠看看阮一峯的一篇文章《SASS用法指南》。預處理器另外還有 less 和 stylus，不過很多大牛最推薦的仍是 sass。

• webpack：webpack 是打包構建工具，能夠類比爲 Java 的 Gradle。不過 webpack 是基於 node.js 的，因此要用熟 webpack，還要學點 node.js 的基礎知識，至少要懂得配置 node.js 的運行環境以及瞭解 node.js 的包管理工具 npm 的經常使用命令。

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

學習資源方面，最好的應該就是官方文檔了。另外，《Vue.js實戰》這本書有尤雨溪做推薦序，也能夠買來看看，能夠做爲官網的補充資源。對於一些概念若是還不是很理解，也能夠暫時先放一放，後面在作項目開發的過程當中可能你就會理解了。

實戰入門

最關鍵的仍是要經過項目實戰才能真正入門，這也是我一向推崇的。也是和 Android、iOS 實戰同樣的建議，若是條件容許，你能夠向上司申請參與本身公司的前端項目開發，而後開始去熟悉代碼和實現一些簡單的工做任務，建議先從完成一些簡單的UI界面開始。一樣，開源項目天然也是少不了，Vue 這塊的開源項目我推薦兩個：

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

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

另外，也附上一個彙總了衆多 vue 開源項目的 github 地址：github.com/opendigg/aw…。

對於開源實戰項目的操做上，我依然仍是建議先給應用改皮膚開始，以後嘗試着本身作出一個相似的App。以上面的 vue 版餓了麼項目爲例，你先給它全部頁面先換個皮膚，包括背景、按鈕、文字等等，統統換掉一遍，而後嘗試本身作一個百度外賣或美團外賣，當你作完，應付通常的 vue 項目開發就應該沒有問題了。以後也根據須要能夠再去學下 React 體系，這時候學起來絕對不會吃力。

總結

前端開發入門，要學的技術棧真的不少，除了最基礎的 HTML/CSS/JavaScript，還包括 HTML五、CSS三、ES6，還要學習目前流行的 JavaScript 框架，個人建議是從 Vue 開始，容易入門，要掌握的技術棧包括 vue + vue-router + vuex + vue-cli + axios + sass + webpack，另外，node.js 也要了解點基礎。最後，實戰項目我推薦了一個簡單的小項目和一個完整的 vue 版餓了麼項目。

思考和實踐

前端開發的編程思想和移動開發有什麼不一樣?如何將前端的架構思想應用到移動開發上?最後，仍是要獨立完成一款 Web 應用。

【編輯推薦】

1. 基於網絡欺騙與瀏覽器指紋的WEB***溯源

2. 提高低端設備的Web性能

3. Web3.0，區塊鏈後花園的奼紫嫣紅

4. 一個用Java實現的超輕量級RESTful Web服務示例

5. 因 BGP 配置錯誤，美國網絡大癱瘓：全球 web 流量降低 3.5%

【責任編輯：未麗燕 TEL：（010）68476606】