3 模塊整合

一、vuex狀態管理

首先下載vuex模塊

npm install vuex -save

1、在store文件夾下新建5個子文件 每個文件夾的名字和內容如下所示

store.png

其中mutation-types.js中常量名用大寫英文+下劃線形式表示

2、配置vuex全局 vuex的全局配置與上一節中vue-router的配置相似,抽象上我們有一個store文件夾,store文件夾下內容是實現,main.js中調用實現的內容。 我們看到import store from 'store/index' 代表引用store的index實現,在第12行中將store的實現作爲參數賦值給Vue的全局配置進行使用,這樣所有的頁面都可以使用Vuex了。

vuex全局.png

二、axios 網絡訪問請求配置

config目錄下新建http.js,文件中設置訪問baseUrl,從config/env.js中讀取,可以區別運行環境和實際環境,方便發佈修改網絡訪問。 選用vue 2.0 推薦的的axios,擴充response攔截器和request攔截器

request攔截器

request攔截器判斷是否存在token,如果存在在頭信息的驗證屬性(Authorization)增加對應token值

image.png

response攔截器

response攔截器,設置出錯對應請求狀態嗎錯誤時,需要的判斷。基礎判斷爲401和404.

image.png

放置對axios的全局配置

在main.js中配置Axios的全局

image.png

三、moment 時間轉換組件

時間組件使用moment.js 官網:http://momentjs.cn/

項目整合方式: 1、控制檯輸入命令 npm install moment --save ,將moment包引入文件 2、進入src/main.js主目錄,編輯一下代碼,引用成功

moment.png

四、Fastclick整合

1、首先安裝fastclick依賴 2、輸入命令:yarn add fastclick 進入項目目錄src/main.js進行如下操作

fastclick.png

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章