本章概述

本章對(duì)項(xiàng)目目錄進(jìn)行更深一步的解釋，并對(duì)目錄內(nèi)的基本文件進(jìn)行一些簡(jiǎn)單的編輯。
包括axios，router，Vuex的初步講解。

可結(jié)合gitee項(xiàng)目源碼來(lái)理解

底層文件編輯

首先我們把上一章最后的目錄圖貼上，如圖2-1。

圖2-1.項(xiàng)目目錄

然后我們應(yīng)該編輯下App.vue，main.js，index.html。

? ? ? ? 本次App.vue中如圖2-2先留一個(gè)router-view即可，有很多項(xiàng)目會(huì)在App.vue中添加頁(yè)面刷新函數(shù)，頁(yè)面loading蒙版等，但是我更喜歡盡量簡(jiǎn)化App.vue與index.html，只把這兩個(gè)文件作為簡(jiǎn)單的容器使用 。在style標(biāo)簽內(nèi)通過(guò)圖中的形式可導(dǎo)入初始化樣式（初始化樣式旨在清除瀏覽器默認(rèn)樣式，提高網(wǎng)站兼容性，如果還沒(méi)形成自己的習(xí)慣樣式，并且也沒(méi)有企業(yè)規(guī)定樣式，那么可以百度挑選一個(gè)合適初始化樣式導(dǎo)入），具體怎么寫(xiě)初始化樣式不解釋了。在script標(biāo)簽中可以寫(xiě)全局函數(shù)。有的項(xiàng)目會(huì)定義路由刷新函數(shù)就是在這里，本次我沒(méi)有使用。

圖2-2.App.vue

????????main.js中如圖2-3，主要通過(guò)import導(dǎo)入包，通過(guò)Vue.prototype定義全局可調(diào)用變量。這里我們導(dǎo)入了路由管理（router），新定義請(qǐng)求（axios），全局狀態(tài)管理（store）以及全局工具js（common.js）并且可以使用router的鉤子函數(shù)在每個(gè)路由跳轉(zhuǎn)前驗(yàn)證登錄是否登錄。驗(yàn)證登錄這部分我們可以先不寫(xiě)，或者注釋掉，因?yàn)楝F(xiàn)在還沒(méi)與做登錄信息，我們會(huì)被這個(gè)方法強(qiáng)制跳轉(zhuǎn)到login的路由下。

圖2-3.main.js

靜態(tài)config.js的引入與使用

????????項(xiàng)目發(fā)布需要npm打包然后上傳到服務(wù)器上，如果沒(méi)有一個(gè)靜態(tài)的單配置文件，那么我們每次修改一些屬性都必須重新打包上傳，這樣對(duì)資源和時(shí)間都是一種浪費(fèi)。因此我們需要一個(gè)單獨(dú)的不打包的文件，控制一些簡(jiǎn)單的屬性。這樣我們只更新這個(gè)文件就可以完成一些預(yù)設(shè)的操作。比如系統(tǒng)維護(hù)狀態(tài)，下面以此舉例。

index.html如圖2-4，定義meta，title并導(dǎo)入靜態(tài)配置文件config.js

圖2-4.index.html

config.js如圖2-5-1，寫(xiě)一些系統(tǒng)配置，我寫(xiě)了是否維護(hù)中maintenance，與維護(hù)提示信息maintenanceTips兩個(gè)屬性

圖2-5-1.congif.js

現(xiàn)在我們就可以在Vue文件中直接使用這些配置屬性了，如圖2-5-2

圖2-5-2.config配置數(shù)據(jù)使用

????????在頁(yè)面加載后先判斷config中的maintenance屬性的真假，如果為真那么就是維護(hù)狀態(tài)，我們可以通過(guò)賦值控制蒙版顯示的屬性為真，來(lái)使提示維護(hù)信息的蒙版顯示，否則隱藏。提示信息的內(nèi)容根據(jù)另一個(gè)屬性maintenanceTips傳遞進(jìn)來(lái)，提示文本顯示該屬性的值。

axios定向工具化

? ? ? ? 由于vue-resource已經(jīng)停止維護(hù)了，現(xiàn)在一般使用axios向后臺(tái)發(fā)送請(qǐng)求并接收后臺(tái)數(shù)據(jù)。axios.js 內(nèi)容如圖2-6,2-7,2-8，內(nèi)容過(guò)多，我會(huì)在Axios的使用與分化-3中詳細(xì)解釋，完整版代碼可以在之后到gitee中查看，連載到到git篇時(shí)我會(huì)放出模板項(xiàng)目的鏈接。重新定義后的axios應(yīng)該盡可能包含多中情況，減少公共文件外的代碼量。本項(xiàng)目目前包含提交JSON字符串?dāng)?shù)據(jù)，提交formdata數(shù)據(jù)，返回blob的處理等情況。

圖2-6為初始化兩種axios，分別為提交JSON型字符串的形式，與提交formdata的形式。

圖2-6.初始化兩種axios

圖2-7為提交JSON字符串請(qǐng)求數(shù)據(jù)的一種具體方法，方法內(nèi)處理了未登錄時(shí)跳轉(zhuǎn)登錄也，登錄后跳回，以及系統(tǒng)異常時(shí)錯(cuò)誤提示。

圖2-7.一種方法舉例

圖2-8為公共化，使其他模塊可以調(diào)用。

圖2-8.export

router路由控制

????????./router/index.js如圖2-9，通過(guò)import導(dǎo)入Vue文件，然后通過(guò)下圖的方式注冊(cè)路由，然后我們通過(guò)http://localhost:8080/#/xxxxxxxxxxxxxxxx（這里是我們定義的路由path）就可以訪問(wèn)對(duì)應(yīng)的頁(yè)面了。在后面的章節(jié)（預(yù)計(jì)第四章）我準(zhǔn)備介紹另第二種路由編輯方式，并且也將以第二種為主。

圖2-9.index.js

全局狀態(tài)Vuex

? ? ? ? Vuex是一個(gè)全局狀態(tài)管理工具，也可以幫助我們完成組件之間的數(shù)據(jù)傳輸。本項(xiàng)目中Vuex的store將主要做全局狀態(tài)讀寫(xiě)，基本不參與組件之間數(shù)據(jù)傳遞，組件之間的數(shù)據(jù)傳遞更推薦大家按照Vue說(shuō)明文檔的方式來(lái)編輯。 ./store/store.js如圖2-10，state中為初始化的數(shù)據(jù)鍵值對(duì)，mutations中含有全局?jǐn)?shù)據(jù)賦值方法。

圖2-10.store.js

我們可以使用圖2-11-1的方式來(lái)取出Vuex的全局?jǐn)?shù)據(jù)，Vue文件可以直接通過(guò)this.userInfo使用該數(shù)據(jù)，通過(guò)2-11-2的方式來(lái)存儲(chǔ)更新全局?jǐn)?shù)據(jù)。之后的章節(jié)有準(zhǔn)備做更詳細(xì)的全局?jǐn)?shù)據(jù)與js工具的詳解。

圖2-11-1.取出全局?jǐn)?shù)據(jù)

圖2-11-2.存儲(chǔ)更新全局?jǐn)?shù)據(jù)

gitee源碼←在這里