vue入門教程

vue視頻教程(對vue有個概覽，要掌握vue-cli的用法，對vue-router，vuex有基本的概念)

https://www.imooc.com/learn/1091

1. vue-cli

vue-cli有多個版本，這裏使用的是vue2.x的版本，不要使用最新版本的，容易踩坑。
https://github.com/vuejs/vue-cli/tree/v2#vue-cli--，這個是老版本的，上面有安裝，模板介紹。

用vue-cli建立一個簡單的項目，就能夠來練習vue的基礎知識了，不要本身從頭開始配一個，不適合。

2. vue-router

對vue-router安裝文章中的示例進行操做，熟悉其用法和經常使用API，參數，必定要操做一遍。

文章以下：

https://www.cnblogs.com/yuyujuan/p/9839705.html
https://segmentfault.com/a/1190000011123089
https://blog.csdn.net/haochangdi123/article/details/80338550
https://segmentfault.com/a/1190000016662929
https://www.cnblogs.com/wisewrong/p/6277262.html
https://www.cnblogs.com/fozero/p/6185492.html

文章建立項目的方式各異，以vue-cli建立的項目爲準，不要被文章中亂引入js的方式誤導，通常vue-cli建立的項目，只須要import，不使用script標籤引入，特殊狀況下再考慮。

3. vuex

https://www.cnblogs.com/wisewrong/p/6344390.html
https://www.cnblogs.com/dreamsboy/p/6820299.html
https://www.jianshu.com/p/a804606ad8e9
http://www.imooc.com/article/257378?block_id=tuijian_wz
https://www.cnblogs.com/libin-1/p/6518902.html

理解基本概念

store 集中存儲state的地方，一個頁面只有一個store
mutations 同步修改state的方法
getters 從state中計算出的全局變量，能夠在不一樣模塊中使用，且在入參不變時候，計算不會從新執行
actions 異步修改state的方法，一般是調用一個或多個mutations來修改state，例如，一個異步請求，開始設置loading爲true，返回修改真正的state，設置loading爲false，會調用2或3個mutations
modules 用來劃分state的模塊，一個模塊一般包括若干相關度高的頁面，這些頁面的狀態能夠放在一個modules中，只是用來劃分，讓狀態管理更清晰，方便。寫法上，調用時候須要添加module名稱。

掌握基本方法

$store.dispatch 調用 Action
$store.commit 調用 mutation

其餘形式的dispatch和commit都是調用$store對象的，本身定義的不是。

狀態映射方法

mapActions 從store中映射Actions，相似於$store.module.actions
mapMutations 從store中映射mutations，相似$store.module.mutations
mapGetters 從store中映射getters，相似於$store.getters.xxxx
mapState 從store中映射state，相似於$store.module.state.xxx

這些方法本質上都是將store中的屬性映射到當前組件中，縮短調用路徑，方便使用而已，都是語法糖。

vuex就是不直接修改狀態，而是經過Actions和mutations來修改狀態，繞了一圈而已。