從0到1使用VUE-CLI3開發實戰(五):模塊化VUEX及使用vuetify

fuyi501 發布于2019-08-23 14:58 / 3191人閱讀

摘要：小肆前幾天發了一篇年精品開源項目庫的匯總，今天小肆要使用的是在組件中排行第三的。記得點好看呦前置閱讀用從到做一個完整功能手機站一從到開發實戰手機站二提交規范配置從到使用開發實戰三知識儲備從到使用開發實戰四封裝

小肆前幾天發了一篇2019年Vue精品開源項目庫的匯總，今天小肆要使用的是在UI組件中排行第三的Vuetify。

vuetify介紹

Vuetify是一個漸進式的框架，完全根據Material Design規范開發，一共擁有80多個組件，對移動端支持非常好。

支持SSR（服務端渲染）,SPA（單頁應用程序）,PWA（漸進式Web應用程序）和標準HTML頁面。

vuetify官方文檔給出了它具備的幾點優勢：

安裝

安裝算是比較簡單了，在項目目錄輸入以下命令就OK：

vue add vuetify

但這時有一個問題，如果我們使用默認的icon，index.html里面引入的是google的鏈接

我們需要替換成國內的

https://fonts.cat.net/

底部導航組件

今天我們先用vuetify的語法寫一個底部導航的組件，先放代碼：

這里主要用到的是v-bottom-nav這個API，下面這張圖顯示了它可用的全部屬性:

上述代碼的實際顯示效果:

模塊化vuex

為了使用方便，我們改造一下vuex，新建store目錄，目錄結構如下：

更改store.js

import Vue from "vue"
import Vuex from "vuex"
import app from "./store/modules/app"
import user from "./store/modules/user"
import getters from "./store/getters"

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    user
  },
  getters
})

export default store

全局loading

昨天我們配置了axios，今天我們來配置一下全局loading。

先寫一個組件RequestLoading.vue

這里我們用到了，vuetify中的v-progress-circular

接下來我們配置一下vuex

app.js

const app = {
  state: {
    requestLoading: 0
  },
  mutations: {
    SET_LOADING: (state, status) => {
      // error 的時候直接重置
      if (status === 0) {
        state.requestLoading = 0
        return
      }
      if (status) {
        ++state.requestLoading
      } else {
        --state.requestLoading
      }
    }
  },
  actions: {
    SetLoading({ commit }, status) {
      commit("SET_LOADING", status)
    }
  }
}

export default app

getter.js

const getters = {
  requestLoading: (state) => state.app.requestLoading,
  token: (state) => state.user.token,
  avatar: (state) => state.user.avatar,
  name: (state) => state.user.name
}

export default getters

最后我們修改一下axios.js

// 添加請求攔截器
service.interceptors.request.use(
  (config) => {
    if (config.method === "post" || config.method === "put") {
      // post、put 提交時，將對象轉換為string, 為處理Java后臺解析問題
      config.data = JSON.stringify(config.data)
    }
    // loading + 1
    store.dispatch("SetLoading", true)
    // 請求發送前進行處理
    return config
  },
  (error) => {
    // 請求錯誤處理
    // loading 清 0
    setTimeout(function() {
      store.dispatch("SetLoading", 0)
    }, 300)

    return Promise.reject(error)
  }
)

// 添加響應攔截器
service.interceptors.response.use(
  (response) => {
    let { data, headers } = response

    if (headers["x-auth-token"]) {
      data.token = headers["x-auth-token"]
    }
    // loading - 1
    store.dispatch("SetLoading", false)
    return data
  },
  (error) => {
    let info = {},
      { status, statusText, data } = error.response

    if (!error.response) {
      info = {
        code: 5000,
        msg: "Network Error"
      }
    } else {
      // 此處整理錯誤信息格式
      info = {
        code: status,
        data: data,
        msg: statusText
      }
    }
    // loading - 1
    store.dispatch("SetLoading", false)
    return Promise.reject(info)
  }
)

這樣我們在等待接口返回數據是就會看到下面這樣子:

小結

好啦，今天就到這里吧，如果有什么疑問，可以下面留言，小肆會及時回復的。記得點好看呦!

前置閱讀：

用vue-cli3從0到1做一個完整功能手機站（一）

從0到1開發實戰手機站（二）：Git提交規范配置

從0到1使用VUE-CLI3開發實戰（三）: ES6知識儲備

從0到1使用VUE-CLI3開發實戰（四）:Axios封裝

云服務器 GPU云服務器從0到1搭建視頻通話系統從0開始到1千萬用戶 1類2類3類模塊化機房 linux的安裝及使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/101442.html

前方來報，八月最新資訊--關于vue2&3的最佳文章推薦

摘要：哪吒別人的看法都是狗屁，你是誰只有你自己說了才算，這是爹教我的道理。哪吒去他個鳥命我命由我，不由天是魔是仙，我自己決定哪吒白白搭上一條人命，你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運，我不曉得。我只曉得，不認命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 評論0 收藏0
從0到1使用VUE-CLI3開發實戰(六)：這是一個有代碼潔癖的項目

摘要：從到使用開發實戰六這是一個有代碼潔癖的項目一個小故事一天我路過一座橋，碰巧看見一個人想跳河自殺。配置什么是是一個開源的代碼檢查工具，由于年月創建。使用編寫，這樣既可以有一個快速的運行環境的同時也便于安裝。從0到1使用VUE-CLI3開發實戰(六)：這是一個有代碼潔癖的項目一個小故事一天我路過一座橋，碰巧看見一個人想跳河自殺。我跑過去對他大喊道：別跳，別死啊。為什么不讓我跳？他說。...

genefy 2019-08-26 13:28 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0