Vue有多優(yōu)秀搭配全家桶做項(xiàng)目有多好之類的咱就不談了，直奔主題。

一、Vue

　　系列一已經(jīng)用vue-cli搭建了Vue項(xiàng)目，此處就不贅述了。

二、Vue-router

　　Vue的路由，先獻(xiàn)上文檔（）。

　　路由在全家桶里面定位是什么呢，創(chuàng)建單頁(yè)應(yīng)用！簡(jiǎn)單！我們知道Vuejs是一系列的組件組成應(yīng)用，既然是組件那么就需要組合起來(lái)，將組件(components)映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們！

　　我們一般在APP.VUE文件里面使用router-view來(lái)告訴router在哪里渲染組件，如下圖（keep-alive被我注釋了后續(xù)系列繼續(xù)講）：

　　組件的配置：（此處有多個(gè)文件夾是便于管理大的項(xiàng)目，模塊化。對(duì)于小項(xiàng)目可以只要router下面的index.js就行）。

　　至于路由配置中的resolve和require還有export default可以參考這篇文章（和Vue按需加載提升用戶體驗(yàn)）　

　　路由按照上面的寫(xiě)法就配置好了各個(gè)路由，那么在頁(yè)面之間需要路由跳轉(zhuǎn)怎么做呢$router.push()和$router.replace()就能做到了。

　　路由嵌套：在子組件里面再增加一個(gè)router-view，然后配置成【路由嵌套在動(dòng)畫(huà)的時(shí)候會(huì)有坑，后續(xù)更新】

　　至此項(xiàng)目中用到的路由基本能搞定了。

三、vuex狀態(tài)管理

　　還是先獻(xiàn)上文檔（）

　　Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。什么是狀態(tài)管理？可以簡(jiǎn)單理解為管理數(shù)據(jù)流，多頁(yè)面共享一個(gè)data庫(kù)（全局）。

　　什么時(shí)候用我就借用文檔語(yǔ)言了：

　　說(shuō)到vuex就肯定會(huì)有State、Actions、Mutations、Getters、Moudles

　　(1)State

　　Vuex 使用 單一狀態(tài)樹(shù) —— State，用一個(gè)對(duì)象就包含了全部的應(yīng)用層級(jí)狀態(tài)。就是放頁(yè)面共享數(shù)據(jù)的地方。（私有數(shù)據(jù)還是放自己.vue文件更好）

　　（2）Actions　　

　　Action 類似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接變更狀態(tài)。

• Action 可以包含任意異步操作。

　　就是說(shuō)異步方法放入Actions，如ajax請(qǐng)求，求情獲取到數(shù)據(jù)之后顯示提交mutation里面的方法來(lái)改變state。

　　（3）Mutations

　　更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。一條重要的原則就是要記住 mutation 必須是同步函數(shù)。組件中使用 this.$store.commit('xxx') 提交，在action里面使用commit('xxx') 提交。

　　（4）Getters

　　有時(shí)候我們需要從 store 中的 state 中派生出一些狀態(tài)，Vuex 允許我們?cè)?store 中定義『getters』（可以認(rèn)為是 store 的計(jì)算屬性）。Getters 接受 state 作為其第一個(gè)參數(shù)：

　　Getters 會(huì)暴露為 store.getters 對(duì)象供調(diào)用。

　　（5）Modules

　　簡(jiǎn)單點(diǎn)說(shuō)就是為了方便操作和管理，模塊化。

　　由于使用單一狀態(tài)樹(shù)，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)，store 對(duì)象就有可能變得相當(dāng)臃腫。

　　為了解決以上問(wèn)題，Vuex 允許我們將 store 分割成模塊（module）。每個(gè)模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割。

　　最后上幾張圖方便查看具體寫(xiě)法：　

四、axios

　　就是封裝的ajax,可以根據(jù)自己的項(xiàng)目情況再進(jìn)行封裝，然后action中調(diào)用。具體可以參考

　　結(jié)語(yǔ)：再接再厲！