第四階段

1. vue2.0語法
2. vue2.0+webpack搭建開發環境
3. 官方腳手架vue-cli

    Vue的作者尤雨溪大神寫了一篇《新手向：Vue 2.0 的建議學習順序》來介紹Vue及相關知識點的學習路線，主要列出了知識點概要，如果你覺得略空洞，可參考我之前介紹的學習資料，vue的相關資料我會在後面介紹。

    新手向：Vue 2.0 的建議學習順序尤雨溪

注：2.0 已經有社群翻譯的中文文件 。如果對自己英文有信心，建議直接閱讀英文文件。
此指南僅供參考，請根據自身實際情況靈活調整。

起步
1. 紮實的 JavaScript / HTML / CSS 基本功。這是前置條件。
2. 通讀官方教程 (guide) 的基礎篇。不要用任何構建工具，就只用最簡單的<Script> ，把教程裡的例子模仿一遍，理解用法。不推薦上來就直接用 vue-cli 構建專案，尤其是如果沒有 Node/Webpack 基礎。
3. 照著官網上的示例，自己想一些類似的例子，模仿著實現來練手，加深理解。
4. 閱讀官方教程進階篇的前半部分，到『自定義指令 (Custom Directive) 』為止。著重理解 Vue 的響應式機制和元件生命週期。『渲染函式（Render Function)』如果理解吃力可以先跳過。
5. 閱讀教程裡關於路由和狀態管理的章節，然後根據需要學習 vue-router 和 vuex。同樣的，先不要管構建工具，以跟著文件裡的例子理解用法為主。
6. 走完基礎文件後，如果你對於基於 Node 的前端工程化不熟悉，就需要補課了。下面這些嚴格來說並不是 Vue 本身的內容，也不涵蓋所有的前端工程化知識，但對於大型的 Vue 工程是前置條件，也是合格的『前端工程師』應當具備的知識。

前端生態/工程化
1. 瞭解 JavaScript 背後的規範，ECMAScript 的歷史和目前的規範制定方式。學習 ES2015/16 的新特性，理解 ES2015 modules，適當關注還未成為標準的提案。
2. 學習命令列的使用。建議用 Mac。
3. 學習 Node.js 基礎。建議使用 nvm 這樣的工具來管理機器上的 Node 版本，並且將 npm 的 registry 登錄檔配置為淘寶的映象源。至少要了解 npm 的常用命令，npm scripts 如何使用，語義化版本號規則，CommonJS 模組規範（瞭解它和 ES2015 Modules 的異同），Node 包的解析規則，以及 Node 的常用 API。應當做到可以自己寫一些基本的命令列程式。注意最新版本的 Node (6+) 已經支援絕大部分 ES2015 的特性，可以藉此鞏固 ES2015。
4. 瞭解如何使用 / 配置 Babel 來將 ES2015 編譯到 ES5 用於瀏覽器環境。
5. 學習 Webpack。Webpack 是一個極其強大同時也複雜的工具，作為起步，理解它的『一切皆模組』的思想，並基本瞭解其常用配置選項和 loader 的概念/使用方法即可，比如如何搭配 Webpack 使用 Babel。學習 Webpack 的一個挑戰在於其本身文件的混亂，建議多搜尋搜尋，應該還是有質量不錯的第三方教程的。英文好的建議閱讀

Webpack 2.0 的文件，比起 1.0 有極大的改善，但需要注意和 1.0 的不相容之處。

Vue 進階
1. 有了 Node 和 Webpack 的基礎，可以通過 vue-cli 來搭建基於 Webpack ，並且支援單檔案元件的專案了。建議用 webpack-simple 這個模板開始，並閱讀官方教程進階篇剩餘的內容以及 vue-loader 的文件，瞭解一些進階配置。有興趣的可以自己親手從零開始搭一個專案加深理解。
2. 根據 例子 嘗試在 Webpack 模板基礎上整合 vue-router 和 vuex
3. 深入理解 Virtual DOM 和『渲染函式 (Render Functions)』這一章節（可選擇性使用 JSX)，理解模板和渲染函式之間的對應關係，瞭解其使用方法和適用場景。
4. （可選）根據需求，瞭解服務端渲染的使用（需要配合 Node 伺服器開發的知識）。其實更重要的是理解它所解決的問題並搞清楚你是否需要它。
5. 閱讀開源的 Vue 應用、元件、外掛原始碼，自己嘗試編寫開源的 Vue 元件、外掛。
6. 參考

貢獻指南 閱讀 Vue 的原始碼，理解內部實現細節。（需要了解 Flow）
7. 參與 Vue GitHub issue 的定位 -> 貢獻 PR -> 加入核心團隊 -> 升任 CTO -> 迎娶白富美…

    看完了尤雨溪大神的學習路線介紹，我來說下我的學習順序：

vue語法

    擼官方API，進這個網頁https://vuefe.cn/，從“起步”開始，將【基礎】、【進階】篇完全擼一遍，認為太有難度的可暫時略過（不要略太多哦）。不要在乎任何和vue1.x相關的內容，單純看2.0不會影響你的學習效果。

vue2.0+webpack搭建開發環境

官方腳手架vue-cli

    之前我們是自己搭建開發環境，其實尤雨溪大神已經為我們準備好了一個通用的腳手架，預設情況下，我們不需要那麼麻煩的配置webpack（配置項的原理你要大體明白）。使用npm直接安裝腳手架，在此基礎上來開發你的專案。這裡給出vue-cli的一個開發教程，這裡要十分感謝作者，我在學習vue-cli的時候只找到了這一篇系統的教程，就是在此基礎上迅速的掌握了vue-cli的整體設計。
    
    教程的第一篇講解了vue-cli的初始安裝，後面兩個教程結合vue元件和第三方外掛來實現了一個書架專案。
    
    Vue.js2.0從入門到放棄—入門例項（一） 主要講解vue-cli腳手架的初始化安裝
    Vue.js 2.0從入門到放棄—入門例項（二） 結合例項講解：vue元件、vue-router路由的實現
    Vue.js2.0從入門到放棄—入門例項（三） 結合例項講解：vue-resource