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

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

尤雨溪

 

1 年前

注：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 -> 迎娶白富美...（誤