新手入門指導:Vue 2.0 的建議學習順序

起步前端

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

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

3. 照着官網上的示例,本身想一些相似的例子,模仿着實現來練手,加深理解。git

4. 閱讀官方教程進階篇的前半部分,到『自定義指令 (Custom Directive) 』爲止。着重理解 Vue 的響應式機制和組件生命週期。『渲染函數(Render Function)』若是理解吃力能夠先跳過。github

5. 閱讀教程裏關於路由和狀態管理的章節,而後根據須要學習 vue-router  vuex。一樣的,先不要管構建工具,以跟着文檔裏的例子理解用法爲主。
6. 走完基礎文檔後,若是你對於基於 Node 的前端工程化不熟悉,就須要補課了。下面這些嚴格來講並非 Vue 自己的內容,也不涵蓋全部的前端工程化知識,但對於大型的 Vue 工程是前置條件,也是合格的『前端工程師』應當具有的知識。web

前端生態/工程化vue-router

1. 瞭解 JavaScript 背後的規範,ECMAScript 的歷史和目前的規範制定方式。學習 ES2015/16 的新特性,理解 ES2015 modules,適當關注還未成爲標準的提案vuex

2. 學習命令行的使用。建議用 Macvue-cli

3. 學習 Node.js 基礎。建議使用 nvm 這樣的工具來管理機器上的 Node 版本,而且將 npm  registry 註冊表配置爲淘寶的鏡像源至少要了解 npm 的經常使用命令,npm scripts 如何使用,語義化版本號規則,CommonJS 模塊規範(瞭解它和 ES2015 Modules的異同),Node 包的解析規則,以及 Node 的經常使用 API。應當作到能夠本身寫一些基本的命令行程序。注意最新版本的 Node (6+) 已經支持絕大部分 ES2015 的特性,能夠藉此鞏固 ES2015npm

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

5. 學習 WebpackWebpack 是一個極其強大同時也複雜的工具,做爲起步,理解它的『一切皆模塊』的思想,並基本瞭解其經常使用配置選項和 loader 的概念/使用方法便可,好比如何搭配 Webpack 使用 Babel。學習 Webpack 的一個挑戰在於其自己文檔的混亂,建議多搜索搜索,應該仍是有質量不錯的第三方教程的。英文好的建議閱讀 Webpack 2.0 的文檔,比起 1.0 有極大的改善,但須要注意 1.0 的不兼容之處

 

新手入門指導:Vue 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 的不兼容之處

 更多資料分享加羣      1056016000

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 組件、插件。

相關文章
相關標籤/搜索