Vue學習路線

前言：學習Vue已經兩個月了，目前前端的框架用得比較多的就是Bootstrap和Vue，而Bootstrap是開發人員用得較多，由於較爲簡單，上手也快。Vue是目前很火的數據驅動框，17年的時候就開始火了。

以前我用Bootstrap框架，轉學習Vue的時候仍是花了一點學習成本的。

既然你們會看這篇文章，那麼確定是vue的學習者了，或是遇到的瓶頸，或者剛剛開始學，不知道如何快速起步，本篇文章將帶領你們在最短的時間內構件一個學習Vue的學習路線。

1、Vue基礎

1. 對於沒有接觸過es6和webpack的童鞋來講，不建議直接用官方的腳手架vue-cli構件項目。

2. 先按文檔順序最少學習完組件那一章。直接在html文件中引入vue.js開始學習,瞭解vue的基礎指令和語法。

3. vue的生命週期很重要，瞭解這點之後能夠免去不少問題。

4. 學完這些能夠作一些練手的小項目。

5. 如今能夠開始學習使用vue-cli構件項目了，學習組件化以前，推薦先看一下es6關於模塊的介紹。阮一峯《ECMAScript6》 Module

6. 光會這些仍是不夠的，還得會一些npm基礎，知道如何用git-bash來安裝依賴，會一些經常使用的命令。這方面的知識能夠參閱npm入門文檔

7. 看完這些就能夠試着將以前的寫的demo用搭建的vue-cli來實現。

8. 多看看組件那裏，看看如何在vue-cli中怎麼實現組件化，說白了，vue玩的就是組件。

9. 到這裏vue基礎篇就結束了。你還能夠有條件的參閱剩下的官方文檔裏面的進階篇，若是時間有限，就直接進入vue-router

2、Vue-router

1. 和以前同樣，推薦直接用html+js過一遍文檔

2. 對路由導航鉤子得好好看一看。

3. 看完文檔就能夠上手vue-cli，通常新手在這幾天都會死活跑不出來。

4. 最直接的方法就是去github上搜一些關於vue-router2.0的demo，看如何構件路由，如何構件項目目錄。

５. 若是能跑出來，就能夠作一些小項目了，好比寫一個知乎日報啊

，這些demo在github上不少。

7. 能夠結合一些組件庫寫demo，這樣能夠更加了解組件化。好比餓了麼團隊的Element、mint-ui

3、Vuex

什麼是vuex？

Vuex 是一個專門爲 Vue.js 應用設計的 狀態管理模型 + 庫。它爲應用內的全部組件提供集中式存儲服務，其中的規則確保狀態只能按預期方式變動。說白了就是控制應用的一些全局狀態。狀態改變了，對應的視圖也會改變。

1. 在學習Vuex時，會有一些ES6特性，當遇到這些時，最好不要一帶而過，去好好看一看這些es6特性。

2. 好比在學習Action時能夠看看ES6新增的Promise和參數解構。

3. 實踐的方法同樣是先看別人別人寫的代碼，好比官方的購物車實例的應用結構。

4. 把以前寫的demo優化一下，有些地方能夠用用vuex。

5. vuex主要是用來對不一樣組件間進行通訊，它構建了一個Vue實例的全局數據與方法，這些數據與方法能夠在該Vue實例的全部組件中getter與setter。

到此，恭喜你已經成功入門Vue了。還學會了一點ES6,，附帶一點Webpack。

若是你剛接觸Vue，這篇文章可能對你幫助不大，接下來我會寫一些具體使用的文章。