經常有朋友會問：如何快速入門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 和 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。
另外，有一套系列書叫《You Don't Know JS》也要推薦給大家，也是開源教材，這套書會讓你對 JavaScript 知其然也知其所以然，也包含了 ES6 的內容，不過這套書面向初學者的，只適合用來進階。也出版了中文翻譯的書籍，叫《你不知道的JavaScript》，目前只有上卷和中卷兩本，據評價，上卷的翻譯還不錯，但中卷的翻譯則一般般，下卷不知道什么時候才出版。
那么，這么多學習資源，我們應該如何學習才高效呢？其實，我們主要還是為了了解各種核心概念，我們不可能在短期內熟悉所有知識點，因此，我還是和前面的文章一樣，也羅列出一些核心的知識點吧。
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 模仿餓了么的一個完整專案，重點推薦
對于開源實戰專案的操作上，我依然還是建議先給應用改皮膚開始，之后嘗試著自己做出一個類似的App。以上面的 vue 版餓了么專案為例，你先給它所有頁面先換個皮膚，包括背景、按鈕、文字等等，通通換掉一遍，然后嘗試自己做一個百度外賣或美團外賣，當你做完，應付一般的 vue 專案開發就應該沒有問題了。之后也根據需要可以再去學下 React 體系，這時候學起來絕對不會吃力。
總結
前端開發入門，要學的技術堆疊真的很多，除了最基礎的 HTML/CSS/JavaScript，還包括 HTML5、CSS3、ES6，還要學習目前流行的 JavaScript 框架，我的建議是從 Vue 開始，容易入門，要掌握的技術堆疊包括 vue + vue-router + vuex + vue-cli + axios + sass + webpack，另外，node.js 也要了解點基礎。最后，實戰專案我推薦了一個簡單的小專案和一個完整的 vue 版餓了么專案。
思考和實踐
前端開發的編程思想和移動開發有什么不同？如何將前端的架構思想應用到移動開發上？最后，還是要獨立完成一款 Web 應用。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/48108.html
標籤：非技術區