前提

前提條件：JS/HTML/CSS基礎(chǔ)扎實(shí)。凡事欲速則不達(dá)，要穩(wěn)扎穩(wěn)打，步步為營(yíng)。

起步

1.先擼一遍官方基礎(chǔ)教程，所有的例子都敲一遍，理解用法，學(xué)著舉一反三，結(jié)合自己的經(jīng)驗(yàn)試著寫一些例子，加深理解。不要直接用構(gòu)建工具vue-cli構(gòu)建項(xiàng)目。

2.再擼一遍進(jìn)階教程，到?自定義指令 (Custom Directive) 部分。著重理解Vue的響應(yīng)式機(jī)制和組件生命周期。遇到不太理解的可先跳過(guò)。

3.閱讀關(guān)于路由和狀態(tài)管理的章節(jié)，根據(jù)要學(xué)習(xí)vue-router和vuex。

進(jìn)階

1.node.js基礎(chǔ)、命令行的使用

2.了解如何使用/配置Babel來(lái)將ES2015編譯到ES5用于瀏覽器環(huán)境。

3.學(xué)習(xí)Webpack。Webpack 是一個(gè)極其強(qiáng)大同時(shí)也復(fù)雜的工具，作為起步，理解它的『一切皆模塊』的思想，并基本了解其常用配置選項(xiàng)和 loader 的概念/使用方法即可，比如如何搭配 Webpack 使用 Babel。學(xué)習(xí) Webpack 的一個(gè)挑戰(zhàn)在于其本身文檔的混亂，建議多搜索搜索，應(yīng)該還是有質(zhì)量不錯(cuò)的第三方教程的。英文好的建議閱讀Webpack 2.0 的文檔，比起 1.0 有極大的改善，但需要注意和 1.0 的不兼容之處。

Vue進(jìn)階

1. 有了 Node 和 Webpack 的基礎(chǔ)，可以通過(guò) vue-cli 來(lái)搭建基于 Webpack ，并且支持單文件組件的項(xiàng)目了。建議用 webpack-simple 這個(gè)模板開始，并閱讀官方教程進(jìn)階篇剩余的內(nèi)容以及vue-loader 的文檔，了解一些進(jìn)階配置。有興趣的可以自己親手從零開始搭一個(gè)項(xiàng)目加深理解。

2. 根據(jù)例子嘗試在 Webpack 模板基礎(chǔ)上整合 vue-router 和 vuex。

3. 深入理解 Virtual DOM 和『渲染函數(shù) (Render Functions)』這一章節(jié)（可選擇性使用 JSX)，理解模板和渲染函數(shù)之間的對(duì)應(yīng)關(guān)系，了解其使用方法和適用場(chǎng)景。

4. （可選）根據(jù)需求，了解服務(wù)端渲染的使用（需要配合 Node 服務(wù)器開發(fā)的知識(shí)）。其實(shí)更重要的是理解它所解決的問(wèn)題并搞清楚你是否需要它。

5. 閱讀開源的 Vue 應(yīng)用、組件、插件源碼，自己嘗試編寫開源的 Vue 組件、插件。

6. 參考貢獻(xiàn)指南閱讀 Vue 的源碼，理解內(nèi)部實(shí)現(xiàn)細(xì)節(jié)。（需要了解Flow）

參考：新手向：Vue 2.0 的建議學(xué)習(xí)順序