快速入門Web前端開發

發表時(shí)間：2018-9-30

發布人(rén)：融晨科技

浏覽次數：49

入門标準

入門标準很簡單，就(jiù)一條：達到(dào)能參與 Web 前端實際項目的(de)開發水平。請注意，是(shì)實際項目，這(zhè)就(jiù)需要(yào / yāo)了(le／liǎo)解如今的(de)實際項目開發都用了(le／liǎo)哪些技術棧。HTML/CSS/JavaScript 這(zhè)三大(dà)基礎技術棧肯定是(shì)需要(yào / yāo)掌握的(de)，但要(yào / yāo)能參與實際項目開發，肯定還要(yào / yāo)掌握其他(tā)一些主流的(de)框架體系。

幾年前， jQuery + Bootstrap 可以(yǐ)說(shuō)是(shì)一統江湖，是(shì)前端領域的(de)絕對霸主。而(ér)這(zhè)幾年，随着 Angular、React、Vue 等框架的(de)興起，變成了(le／liǎo)百家争鳴的(de)局面。這(zhè)幾年，Web 前端的(de)技術發展真是(shì)太快了(le／liǎo)，相應地(dì / de)，技術棧也(yě)就(jiù)變得非常多，除了(le／liǎo)最基本的(de)HTML/CSS/JavaScript，以(yǐ)及 Vue/React/Angular 等這(zhè)些 JavaScript 框架和(hé / huò)各自的(de)生态體系，還有 CSS 預處理器 Sass/Less/Stylus，還有 TypeScript，還有 grunt/webpack/gulp 等各種打包構建工具，還有其他(tā)一大(dà)堆技術棧。

這(zhè)麽多技術棧，我們不(bù)可能全都掌握，就(jiù)算是(shì)資深的(de)前端工程師，也(yě)隻是(shì)精通其中一部分，比如，有些精通 Angular，有些掌握 React，有些則熟悉 Vue，很少有人(rén)對三種框架生态體系都非常了(le／liǎo)解。因此，我們入門也(yě)沒必要(yào / yāo)每種框架都學習，隻要(yào / yāo)挑選一種就(jiù)夠了(le／liǎo)。而(ér)且，作爲(wéi / wèi)全棧，我們學習一門技術更重要(yào / yāo)的(de)是(shì)要(yào / yāo)學習技術背後的(de)編程思想、設計思想、架構思想等。而(ér)不(bù)管是(shì) Angular、React 還是(shì) Vuew，其背後的(de)核心設計思想都是(shì)組件化的(de)設計，因此隻要(yào / yāo)掌握一種框架，我們也(yě)就(jiù)能學習到(dào)前端技術的(de)核心思想了(le／liǎo)。

那麽，我們應該學哪種框架體系呢？我的(de)建議是(shì)從 Vue 開始，因爲(wéi / wèi) Vue 的(de)學習成本是(shì)最低的(de)，入門簡單，而(ér)且這(zhè)兩年 Vue 可以(yǐ)說(shuō)是(shì)出(chū)現了(le／liǎo)爆發式的(de)增長，已經直逼 React。React 的(de)主要(yào / yāo)學習成本在(zài)于(yú)要(yào / yāo)掌握 JSX 語法，而(ér)且文檔還大(dà)多都是(shì)英文。Vue 因爲(wéi / wèi)是(shì)國(guó)人(rén)開發和(hé / huò)維護的(de)，自然對國(guó)内的(de)開發者更友好。Angular 則是(shì)個(gè)大(dà)而(ér)全的(de)框架，顯得太重，學習成本自然最高。至于(yú) jQuery + Bootstrap 這(zhè)套，已經過時(shí)了(le／liǎo)，建議沒必要(yào / yāo)去學習了(le／liǎo)，畢竟我們的(de)時(shí)間很寶貴，還有一大(dà)堆更有價值的(de)東西等着我們去學。

因此，我們要(yào / yāo)入門 Web 前端開發的(de)話，除了(le／liǎo)要(yào / yāo)學習 HTML/CSS/JavaScript 三大(dà)基礎技術棧，還要(yào / yāo)了(le／liǎo)解 Vue 體系。而(ér) Vue 體系，除了(le／liǎo) Vue 框架本身，還包括其他(tā)技術棧，這(zhè)個(gè)後面再說(shuō)。

HTML/CSS/JavaScript

HTML、CSS、JavaScript 是(shì)前端的(de)核心基礎，所以(yǐ)必須要(yào / yāo)掌握。HTML 主要(yào / yāo)就(jiù)是(shì)HTML5，相比之(zhī)前的(de)版本，新增了(le／liǎo)很多新特性。CSS 則主要(yào / yāo)是(shì) CSS3 了(le／liǎo)，相比以(yǐ)前的(de)版本，主要(yào / yāo)就(jiù)是(shì)作了(le／liǎo)模塊化的(de)拆分。JavaScript 其實分爲(wéi / wèi)三部分：ECMAScript、DOM和(hé / huò) BOM。ECMAScript 簡稱 ES，是(shì) JavaScript 的(de)核心，目前最新版本已經是(shì)ES2017，是(shì) ES6 的(de)第三個(gè)小版本。DOM 是(shì)文檔對象模型，其實就(jiù)是(shì)一套訪問和(hé / huò)操作 HTML 所有元素的(de) API。BOM 則是(shì)浏覽器對象模型，用于(yú)訪問和(hé / huò)操作浏覽器的(de)一些特性。

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

HTML：該教程也(yě)包括了(le／liǎo) HTML5 新增的(de)内容，但講得沒下面專門講解 HTML5 的(de)細，所以(yǐ)該教程我建議隻看 HTML 基礎教程和(hé / huò)表單部分即可
HTML5：該教程講解了(le／liǎo) HTML5 的(de)新特性
CSS：該教程并不(bù)包括 CSS3 新增的(de)特性，所以(yǐ)還需要(yào / yāo)學習下面的(de) CSS3 的(de)教程
CSS3：該教程内容比較少，隻包含 CSS3 新增的(de)特性
JavaScript：該教程隻是(shì)講解了(le／liǎo)非常基礎的(de)語法

不(bù)過，我更推薦菜鳥的(de)教程，内容雖然也(yě)是(shì)來(lái)自 w3school，但部分内容比 w3school 的(de)更詳細，以(yǐ)下是(shì)教程地(dì / de)址：

HTML：http://www.runoob.com/html/html-tutorial.html
CSS：http://www.runoob.com/css/css-tutorial.html
JavaScript：http://www.runoob.com/js/js-tutorial.html

HTML 和(hé / huò) CSS 隻要(yào / yāo)根據以(yǐ)上(shàng)教程學習就(jiù)足夠了(le／liǎo)，但 JavaScript 則是(shì)不(bù)夠的(de)，以(yǐ)上(shàng)教程缺少了(le／liǎo) ES6 及更高版本的(de)内容，後面我再推薦其他(tā)學習資源進行補充。

視頻教程方面，慕課網、極客學院等都有基礎課程，但都是(shì)收費的(de)，而(ér)且價格不(bù)菲，性價比實在(zài)太低。比如慕課網的(de)《前端小白入門》+《前端進階：響應式開發與前端框架》兩套課程的(de)組合套餐就(jiù)要(yào / yāo) 988 元了(le／liǎo)，而(ér)内容還沒有上(shàng)面免費教程的(de)齊全。如果真要(yào / yāo)看視頻，那我會推薦網易雲課堂的(de)一些免費課程:

從零玩轉HTML5前端+跨平台開發
H5/web前端開發｜HTML5+CSS3
李炎恢JavaScript教程第一季

書籍方面，HTML 和(hé / huò) CSS 基礎方面的(de)，首推《Head First HTML與CSS》，編排設計通俗易懂，就(jiù)連完全零基礎的(de)非 IT 人(rén)員都适合學習。不(bù)過，Head First 這(zhè)本書沒有涉及到(dào) HTML5 和(hé / huò) CSS3 的(de)更新内容。不(bù)過，Head First 有另一本書講解了(le／liǎo) HTML5，叫《Head First HTML5 Programming》，不(bù)過，要(yào / yāo)熟悉 HTML5 的(de)用法，還是(shì)要(yào / yāo)先掌握一點 JavaScript 基礎。CSS3 方面 Head First 則沒有相應的(de)書籍，因此，我推薦另一本《CSS3實用指南》。

JavaScript 方面，我首推《JavaScript高級程序設計》這(zhè)本書，書中内容由淺入深，也(yě)是(shì)寫得通俗易懂，适合入門。另外，有些人(rén)會推薦《JavaScript權威指南》，但這(zhè)本書主要(yào / yāo)還是(shì)一本字典書，略顯晦澀，其實不(bù)适合入門。不(bù)過《JavaScript高級程序設計》還是(shì)基于(yú) ES5 的(de)，爲(wéi / wèi)了(le／liǎo)補充 ES6 的(de)内容，推薦阮一峰的(de)《ES6标準入門》，目前是(shì)第3版，内容已經覆蓋了(le／liǎo)最新版本的(de) ES2017。另外，因爲(wéi / wèi)這(zhè)是(shì)一本開源教材，所以(yǐ)也(yě)可以(yǐ)直接去阮一峰的(de)官網免費閱讀，以(yǐ)下是(shì)鏈接地(dì / de)址：

ECMAScript 6 入門：http://es6.ruanyifeng.com/

另外，有一套系列書叫《You Don't Know JS》也(yě)要(yào / yāo)推薦給大(dà)家，也(yě)是(shì)開源教材，這(zhè)套書會讓你對 JavaScript 知其然也(yě)知其所以(yǐ)然，也(yě)包含了(le／liǎo) ES6 的(de)内容，不(bù)過這(zhè)套書面向初學者的(de)，隻适合用來(lái)進階。也(yě)出(chū)版了(le／liǎo)中文翻譯的(de)書籍，叫《你不(bù)知道(dào)的(de)JavaScript》，目前隻有上(shàng)卷和(hé / huò)中卷兩本，據評價，上(shàng)卷的(de)翻譯還不(bù)錯，但中卷的(de)翻譯則一般般，下卷不(bù)知道(dào)什麽時(shí)候才出(chū)版。以(yǐ)下是(shì)系列書的(de)github地(dì / de)址：

You Don't Know JS：https://github.com/getify/You-Dont-Know-JS

那麽，這(zhè)麽多學習資源，我們應該如何學習才高效呢？其實，和(hé / huò)前面學習 Android 和(hé / huò) iOS 時(shí)一樣，我們主要(yào / yāo)還是(shì)爲(wéi / wèi)了(le／liǎo)了(le／liǎo)解各種核心概念，我們不(bù)可能在(zài)短期内熟悉所有知識點，因此，我還是(shì)和(hé / huò)前面的(de)文章一樣，也(yě)羅列出(chū)一些核心的(de)知識點吧。

HTML基礎：以(yǐ) w3school 或菜鳥的(de) HTML 教程爲(wéi / wèi)主，熟悉各種常用标簽的(de)用法，尤其是(shì)标題、段落、鏈接、圖像、表格、列表、表單、區塊、布局、CSS、腳本等
CSS基礎：同樣以(yǐ) w3school 或菜鳥的(de) CSS 教程爲(wéi / wèi)主，熟悉 CSS 語法和(hé / huò)選擇器、樣式、框模型、定位等模塊的(de)内容
JavaScript基礎：首先作爲(wéi / wèi)一門編程語言，語言本身的(de)基礎肯定要(yào / yāo)熟悉，包括數據類型、變量、運算符、控制流、函數、對象等；另外，也(yě)要(yào / yāo)熟悉 DOM；BOM 簡單了(le／liǎo)解下就(jiù)可以(yǐ)了(le／liǎo)，使用場景不(bù)多
HTML5：HTML5 的(de)新特性肯定要(yào / yāo)了(le／liǎo)解，内容其實也(yě)不(bù)是(shì)很多，核心的(de)就(jiù)是(shì) canvas、svg、對多媒體的(de)支持、Web 存儲、應用緩存、WebSocket等
CSS3：CSS3 也(yě)是(shì)要(yào / yāo)熟悉那些新特性，最核心的(de)就(jiù)是(shì)彈性盒子(zǐ)
ES6：ES6 自然也(yě)是(shì)要(yào / yāo)熟悉的(de)，學好阮一峰的(de)《ECMAScript 6 入門》教程就(jiù)足夠了(le／liǎo)

Vue 體系

在(zài)開始正式學習 Vue 之(zhī)前，我們先來(lái)了(le／liǎo)解幾個(gè)概念，這(zhè)樣才能更好理解 Vue 的(de)一些設計理念。第一個(gè)概念是(shì)「單頁應用程序」，就(jiù)是(shì)隻有一個(gè) Web 頁面的(de)應用，是(shì)隻加載單個(gè) HTML 頁面并在(zài)用戶與應用程序交互式動态更新該頁面的(de) Web 應用程序。第二個(gè)概念是(shì)「Virtual DOM」，即虛拟 DOM，簡單說(shuō)就(jiù)是(shì)一個(gè)模拟 DOM 樹的(de) JavaScript 對象，是(shì)爲(wéi / wèi)了(le／liǎo)避免大(dà)面積操作真實 DOM 而(ér)導緻的(de)性能問題。第三個(gè)概念是(shì)「響應式系統」，通過數據模型和(hé / huò) View 的(de)數據綁定，系統可以(yǐ)對數據模型的(de)修改自動響應到(dào)視圖上(shàng)。第四個(gè)概念則是(shì)「組件化」，Vue 和(hé / huò) React 都是(shì)通過組合各種組件組成應用程序的(de)。理解了(le／liǎo)這(zhè)些概念，你才能更好的(de)理解 Vue/React 這(zhè)些前端框架體系。

還有，開發工具方面，我推薦 Visual Studio Code，一款免費開源的(de)輕量級代碼編輯器，macOS、Windows、Linux 都支持，有人(rén)評價說(shuō)比sublime開源，比atom更快，比webstorm更輕，所以(yǐ)說(shuō)，你值得擁有。

Vue 體系包含了(le／liǎo)很多技術棧，一套完整的(de) Vue 項目一般包括 vue + vue-router + vuex + vue-cli + axios + sass + webpack，其中，vue + vue-router + vuex 又稱爲(wéi / wèi) Vue 全家桶，因爲(wéi / wèi)這(zhè)三套技術棧都是(shì) Vue 官方推出(chū)的(de)，其他(tā)框架和(hé / huò)工具則是(shì)第三方的(de)。那麽，就(jiù)讓我們來(lái)一個(gè)個(gè)了(le／liǎo)解這(zhè)些技術棧吧。

vue：vue 即是(shì) Vue.js 框架本身，是(shì)一套采用了(le／liǎo) MVVM 模式的(de) JavaScript 框架，它和(hé / huò) React 一樣使用了(le／liǎo) Virtual DOM，也(yě)提供了(le／liǎo)響應式和(hé / huò)組件化的(de)視圖組件。不(bù)過與 React 不(bù)同的(de)是(shì)，Vue 更推薦使用基于(yú) HTML 的(de)模闆，這(zhè)也(yě)是(shì)它相比 React 等其他(tā)框架更容易入門的(de)原因。
vue-router：因爲(wéi / wèi)現在(zài)大(dà)多數 Web 應用都是(shì)單頁應用，那要(yào / yāo)實現單個(gè)頁面裏的(de)不(bù)同視圖的(de)跳轉，就(jiù)要(yào / yāo)用到(dào)路由，vue-router 庫就(jiù)是(shì)用來(lái)實現單頁應用的(de)路由功能。
vuex：vuex 是(shì)一個(gè)類 Flux 的(de)狀态管理庫，它采用集中式存儲管理應用的(de)所有組件的(de)狀态。關于(yú)什麽是(shì) Flux，可以(yǐ)參考阮一峰寫的(de)一篇文章《Flux 架構入門教程》。
vue-cli：vue-cli 是(shì)官方提供的(de)命令行工具，用它可以(yǐ)快速創建 vue 項目。
axios：axios 是(shì) vue 官方推薦的(de)一個(gè)第三方 HTTP 庫，它是(shì)基于(yú) promise 的(de)，promise 是(shì) ES6 的(de)新增特性。
sass：CSS 的(de)一款預處理器，簡單入門可以(yǐ)看看阮一峰的(de)一篇文章《SASS用法指南》。預處理器另外還有 less 和(hé / huò) stylus，不(bù)過不(bù)少大(dà)牛最推薦的(de)還是(shì) sass。
webpack：webpack 是(shì)打包構建工具，可以(yǐ)類比爲(wéi / wèi) Java 的(de) Gradle。不(bù)過 webpack 是(shì)基于(yú) node.js 的(de)，所以(yǐ)要(yào / yāo)用熟 webpack，還要(yào / yāo)學點 node.js 的(de)基礎知識，至少要(yào / yāo)懂得配置 node.js 的(de)運行環境以(yǐ)及了(le／liǎo)解 node.js 的(de)包管理工具 npm 的(de)常用命令。

對于(yú)剛接觸當代前端的(de)人(rén)員來(lái)說(shuō)，存在(zài)太多陌生的(de)概念需要(yào / yāo)了(le／liǎo)解，一時(shí)可能難以(yǐ)消化，Vue 的(de)作者尤雨溪寫過一篇《新手向：Vue 2.0 的(de)建議學習順序》，可以(yǐ)按照他(tā)的(de)建議去學習。

學習資源方面，最好的(de)應該就(jiù)是(shì)官方文檔了(le／liǎo)。另外，《Vue.js實戰》這(zhè)本書有尤雨溪作推薦序，也(yě)可以(yǐ)買來(lái)看看，可以(yǐ)作爲(wéi / wèi)官網的(de)補充資源。對于(yú)一些概念如果還不(bù)是(shì)很理解，也(yě)可以(yǐ)暫時(shí)先放一放，後面在(zài)做項目開發的(de)過程中可能你就(jiù)會理解了(le／liǎo)。

實戰入門

最關鍵的(de)還是(shì)要(yào / yāo)通過項目實戰才能真正入門，這(zhè)也(yě)是(shì)我一貫推崇的(de)。也(yě)是(shì)和(hé / huò) Android、iOS 實戰一樣的(de)建議，如果條件允許，你可以(yǐ)向上(shàng)司申請參與自己公司的(de)前端項目開發，然後開始去熟悉代碼和(hé / huò)實現一些簡單的(de)工作任務，建議先從完成一些簡單的(de)UI界面開始。同樣，開源項目自然也(yě)是(shì)少不(bù)了(le／liǎo)，Vue 這(zhè)塊的(de)開源項目我推薦兩個(gè)：

vue2-happyfri：很簡單的(de)一個(gè)小項目，很适合入門練習
vue2-elm：用 vue 模仿餓了(le／liǎo)麽的(de)一個(gè)完整項目，重點推薦

另外，也(yě)附上(shàng)一個(gè)彙總了(le／liǎo)衆多 vue 開源項目的(de) github 地(dì / de)址：https://github.com/opendigg/awesome-github-vue。

對于(yú)開源實戰項目的(de)操作上(shàng)，我依然還是(shì)建議先給應用改皮膚開始，之(zhī)後嘗試着自己做出(chū)一個(gè)類似的(de)App。以(yǐ)上(shàng)面的(de) vue 版餓了(le／liǎo)麽項目爲(wéi / wèi)例，你先給它所有頁面先換個(gè)皮膚，包括背景、按鈕、文字等等，通通換掉一遍，然後嘗試自己做一個(gè)百度外賣或美團外賣，當你做完，應付一般的(de) vue 項目開發就(jiù)應該沒有問題了(le／liǎo)。之(zhī)後也(yě)根據需要(yào / yāo)可以(yǐ)再去學下 React 體系，這(zhè)時(shí)候學起來(lái)絕對不(bù)會吃力。

總結

前端開發入門，要(yào / yāo)學的(de)技術棧真的(de)很多，除了(le／liǎo)最基礎的(de) HTML/CSS/JavaScript，還包括 HTML5、CSS3、ES6，還要(yào / yāo)學習目前流行的(de) JavaScript 框架，我的(de)建議是(shì)從 Vue 開始，容易入門，要(yào / yāo)掌握的(de)技術棧包括 vue + vue-router + vuex + vue-cli + axios + sass + webpack，另外，node.js 也(yě)要(yào / yāo)了(le／liǎo)解點基礎。最後，實戰項目我推薦了(le／liǎo)一個(gè)簡單的(de)小項目和(hé / huò)一個(gè)完整的(de) vue 版餓了(le／liǎo)麽項目。