注：2.0 已經(jīng)有社區(qū)翻譯的中文文檔 。如果對(duì)自己英文有信心穗慕，建議直接閱讀英文文檔饿敲。此指南僅供參考妻导，請(qǐng)根據(jù)自身實(shí)際情況靈活調(diào)整逛绵。
作者：尤雨溪 知乎專欄
來源：知乎著作權(quán)歸作者所有。
起步
- 扎實(shí)的 JavaScript / HTML / CSS 基本功倔韭。這是前置條件术浪。
- 通讀官方教程 (guide) 的基礎(chǔ)篇。不要用任何構(gòu)建工具寿酌，就只用最簡單的 <script>胰苏，把教程里的例子模仿一遍，理解用法醇疼。不推薦上來就直接用 vue-cli 構(gòu)建項(xiàng)目硕并，尤其是如果沒有 Node/Webpack 基礎(chǔ)。
- 照著官網(wǎng)上的示例秧荆，自己想一些類似的例子倔毙，模仿著實(shí)現(xiàn)來練手，加深理解乙濒。
- 閱讀官方教程進(jìn)階篇的前半部分陕赃，到『自定義指令 (Custom Directive) 』為止。著重理解 Vue 的響應(yīng)式機(jī)制和組件生命周期颁股∶纯猓『渲染函數(shù)（Render Function)』如果理解吃力可以先跳過。
- 閱讀教程里關(guān)于路由和狀態(tài)管理的章節(jié)甘有，然后根據(jù)需要學(xué)習(xí) vue-router 和 vuex诉儒。同樣的，先不要管構(gòu)建工具亏掀，以跟著文檔里的例子理解用法為主忱反。
- 走完基礎(chǔ)文檔后，如果你對(duì)于基于 Node 的前端工程化不熟悉幌氮，就需要補(bǔ)課了缭受。下面這些嚴(yán)格來說并不是 Vue 本身的內(nèi)容，也不涵蓋所有的前端工程化知識(shí)该互，但對(duì)于大型的 Vue 工程是前置條件米者，也是合格的『前端工程師』應(yīng)當(dāng)具備的知識(shí)。
前端生態(tài)/工程化
- 了解 JavaScript 背后的規(guī)范，ECMAScript 的歷史和目前的規(guī)范制定方式蔓搞。學(xué)習(xí) ES2015/16 的新特性胰丁，理解 ES2015 modules，適當(dāng)關(guān)注還未成為標(biāo)準(zhǔn)的提案**喂分。
- 學(xué)習(xí)命令行的使用锦庸。建議用 Mac。
- 學(xué)習(xí) Node.js 基礎(chǔ)蒲祈。建議使用 nvm** 這樣的工具來管理機(jī)器上的 Node 版本甘萧，并且將 npm 的 registry 注冊(cè)表配置為淘寶的鏡像源**。至少要了解 npm 的常用命令梆掸，npm scripts 如何使用扬卷，語義化版本號(hào)規(guī)則，CommonJS 模塊規(guī)范（了解它和 ES2015 Modules 的異同）酸钦，Node 包的解析規(guī)則怪得，以及 Node 的常用 API。應(yīng)當(dāng)做到可以自己寫一些基本的命令行程序卑硫。注意最新版本的 Node (6+) 已經(jīng)支持絕大部分 ES2015 的特性徒恋，可以借此鞏固 ES2015。
- 了解如何使用 / 配置 Babel 來將 ES2015 編譯到 ES5 用于瀏覽器環(huán)境欢伏。
- 學(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)階
- 有了 Node 和 Webpack 的基礎(chǔ)酿雪，可以通過 vue-cli 來搭建基于 Webpack ，并且支持單文件組件的項(xiàng)目了侄刽。建議用 webpack-simple 這個(gè)模板開始指黎，并閱讀官方教程進(jìn)階篇剩余的內(nèi)容以及 vue-loader 的文檔**，了解一些進(jìn)階配置州丹。有興趣的可以自己親手從零開始搭一個(gè)項(xiàng)目加深理解醋安。
- 根據(jù) 例子** 嘗試在 Webpack 模板基礎(chǔ)上整合 vue-router 和 vuex
- 深入理解 Virtual DOM 和『渲染函數(shù) (Render Functions)』這一章節(jié)（可選擇性使用 JSX)杂彭，理解模板和渲染函數(shù)之間的對(duì)應(yīng)關(guān)系，了解其使用方法和適用場景吓揪。
- （可選）根據(jù)需求亲怠，了解服務(wù)端渲染的使用（需要配合 Node 服務(wù)器開發(fā)的知識(shí)）。其實(shí)更重要的是理解它所解決的問題并搞清楚你是否需要它柠辞。
- 閱讀開源的 Vue 應(yīng)用团秽、組件、插件源碼叭首，自己嘗試編寫開源的 Vue 組件习勤、插件。
- 參考 貢獻(xiàn)指南* 閱讀 Vue 的源碼放棒，理解內(nèi)部實(shí)現(xiàn)細(xì)節(jié)姻报。（需要了解 Flow**）
- 參與 Vue GitHub issue 的定位 -> 貢獻(xiàn) PR -> 加入核心團(tuán)隊(duì) -> 升任 CTO -> 迎娶白富美...
