VueJs2.0建議學習路線

 

Vue基礎

1. 對於沒有接觸過es6和webpack的童鞋來說，不建議直接用官方的腳手架vue-cli構件項目。
2. 先按文檔順序最少學習完組件那一章。直接在html文件中引入vue.js開始學習,瞭解vue的基礎指令和語法。
3. vue的生命週期很重要，瞭解這點以後可以免去很多問題。
4. 學完這些可以做一些練手的小項目，比如萬年不變的todolist。。。
5. 現在可以開始學習使用vue-cli構件項目了，學習組件化之前，推薦先看一下es6關於模塊的介紹。阮一峯《ECMAScript6》 Module
6. 光會這些還是不夠的，還得會一些npm基礎，知道如何用git-bash來安裝依賴，會一些常用的命令。這方面的知識可以參閱npm入門文檔
7. 看完這些就可以試着將之前的寫的demo用搭建的vue-cli來實現。附上我寫的一個入門小demovue-demo-search
8. 多看看組件那裏，看看如何在vue-cli中怎麼實現組件化，說白了，vue玩的就是組件。
9. 到這裏vue基礎篇就結束了。你還可以有條件的參閱剩下的官方文檔裏面的進階篇，如果時間有限，就直接進入vue-router

 

 

Vue-router

1. 和之前一樣，推薦直接用html+js過一遍文檔
2. 對路由導航鉤子得好好看一看。
3. 看完文檔就可以上手vue-cli，一般新手在這幾天都會死活跑不出來。
4. 最直接的方法就是去github上搜一些關於vue-router2.0的demo，看如何構件路由，如何構件項目目錄。
5. 我這裏有一個傳送門
6. 如果能跑出來，就可以做一些小項目了，比如寫一個知乎日報啊，這些demo在github上很多。
7. 可以結合一些組件庫寫demo，這樣可以更加了解組件化。比如餓了麼團隊的Element、mint-ui

 

 

Vuex

什麼是vuex？

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

 

1. 在學習Vuex時，會有一些ES6特性，當遇到這些時，最好不要一帶而過，去好好看一看這些es6特性。
2. 比如在學習Action時可以看看ES6新增的Promise和參數解構。
3. 實踐的方法一樣是先看別人別人寫的代碼，比如官方的購物車實例的應用結構。
4. 把之前寫的demo優化一下，有些地方可以用用vuex。
5. vuex主要是用來對不同組件間進行通信，它構建了一個Vue實例的全局數據與方法，這些數據與方法可以在該Vue實例的所有組件中getter與setter。