學習Vue2.0的建議順序

Toby發表於2017-02-15

學習Vue2.0的建議順序

注:本文是看過其他關於vue文章之後的想法,歡迎轉載,請註明出處。

 

Vue官方文件:Vue2.0官方文件,官方文件永遠是學習資料的第一步

起步

紮實的 JavaScript / HTML / CSS 基本功。這是前置條件。

  1. 通讀官方教程 (guide) 的基礎篇。不要用任何構建工具,就只用最簡單的 <script>,把教程裡的例子模仿一遍,理解用法。不推薦上來就直接用 vue-cli 構建專案,尤其是如果沒有 Node/Webpack 基礎。

  2. 照著官網上的示例,自己想一些類似的例子,模仿著實現來練手,加深理解。

  3. 閱讀官方教程進階篇的前半部分,到『自定義指令 (Custom Directive) 』為止。著重理解 Vue 的響應式機制和元件生命週期。『渲染函式(Render Function)』如果理解吃力可以先跳過。

  4. 閱讀教程裡關於路由和狀態管理的章節,然後根據需要學習 vue-router 和 vuex。同樣的,先不要管構建工具,以跟著文件裡的例子理解用法為主。

  5. 走完基礎文件後,如果你對於基於 Node 的前端工程化不熟悉,就需要補課了。下面這些嚴格來說並不是 Vue 本身的內容,也不涵蓋所有的前端工程化知識,但對於大型的 Vue 工程是前置條件,也是合格的『前端工程師』應當具備的知識。

前端生態/工程化

  1. 瞭解 JavaScript 背後的規範,ECMAScript 的歷史和目前的規範制定方式。學習 ES2015/16 的新特性,理解 ES2015 modules,建議可以看看阮一峰ES6的教程

  2. 學習 Node.js 基礎。node.js的學習曲線會比較長,需要了解到npm的常用命令,以及CMD和AMD的模組規範,node.js的API也很多,其實更多的是屬於一項後端語言。node.js官方文件

  3. 瞭解如何使用 / 配置 Babel 來將 ES2015 編譯到 ES5 用於瀏覽器環境。

  4. 學習 Webpack。建議可以先看看webpack的中文文件。Webpack 是一個極其強大同時也複雜的工具。也是當下最流行的前端工程化的工具

Vue 進階

  1. 有了 Node 和 Webpack 的基礎,可以通過 vue-cli 來搭建基於 Webpack ,並且支援單檔案元件的專案了。建議用 webpack-simple 這個模板開始,並閱讀官方教程進階篇剩餘的內容以及 vue-loader 的文件,瞭解一些進階配置。有興趣的可以自己親手從零開始搭一個專案加深理解。

  2. 根據 例子 嘗試在 Webpack 模板基礎上整合 vue-router 和 vuex,可以在git上下載vue-cli專案看看

  3. 深入理解 Virtual DOM 和『渲染函式 (Render Functions)』這一章節(可選擇性使用 JSX),理解模板和渲染函式之間的對應關係,瞭解其使用方法和適用場景。

  4. (可選)根據需求,瞭解服務端渲染的使用(需要配合 Node 伺服器開發的知識)。其實更重要的是理解它所解決的問題並搞清楚你是否需要它。

  5. 閱讀開源的 Vue 應用、元件、外掛原始碼,自己嘗試編寫開源的 Vue 元件、外掛。

參考連結:https://zhuanlan.zhihu.com/p/…

相關文章