成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

從0到1使用VUE-CLI3開(kāi)發(fā)實(shí)戰(zhàn)(五):模塊化VUEX及使用vuetify

fuyi501 / 3219人閱讀

摘要：小肆前幾天發(fā)了一篇年精品開(kāi)源項(xiàng)目庫(kù)的匯總，今天小肆要使用的是在組件中排行第三的。記得點(diǎn)好看呦前置閱讀用從到做一個(gè)完整功能手機(jī)站一從到開(kāi)發(fā)實(shí)戰(zhàn)手機(jī)站二提交規(guī)范配置從到使用開(kāi)發(fā)實(shí)戰(zhàn)三知識(shí)儲(chǔ)備從到使用開(kāi)發(fā)實(shí)戰(zhàn)四封裝

小肆前幾天發(fā)了一篇2019年Vue精品開(kāi)源項(xiàng)目庫(kù)的匯總，今天小肆要使用的是在UI組件中排行第三的Vuetify。
vuetify介紹

Vuetify是一個(gè)漸進(jìn)式的框架，完全根據(jù)Material Design規(guī)范開(kāi)發(fā)，一共擁有80多個(gè)組件，對(duì)移動(dòng)端支持非常好。

支持SSR（服務(wù)端渲染）,SPA（單頁(yè)應(yīng)用程序）,PWA（漸進(jìn)式Web應(yīng)用程序）和標(biāo)準(zhǔn)HTML頁(yè)面。

vuetify官方文檔給出了它具備的幾點(diǎn)優(yōu)勢(shì)：

安裝

安裝算是比較簡(jiǎn)單了，在項(xiàng)目目錄輸入以下命令就OK：

vue add vuetify

但這時(shí)有一個(gè)問(wèn)題，如果我們使用默認(rèn)的icon，index.html里面引入的是google的鏈接

我們需要替換成國(guó)內(nèi)的

https://fonts.cat.net/
底部導(dǎo)航組件

今天我們先用vuetify的語(yǔ)法寫(xiě)一個(gè)底部導(dǎo)航的組件，先放代碼：

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

上述代碼的實(shí)際顯示效果:

模塊化vuex

為了使用方便，我們改造一下vuex，新建store目錄，目錄結(jié)構(gòu)如下：

更改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，今天我們來(lái)配置一下全局loading。

先寫(xiě)一個(gè)組件RequestLoading.vue

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

接下來(lái)我們配置一下vuex

app.js
const app = {
  state: {
    requestLoading: 0
  },
  mutations: {
    SET_LOADING: (state, status) => {
      // error 的時(shí)候直接重置
      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
// 添加請(qǐng)求攔截器
service.interceptors.request.use(
  (config) => {
    if (config.method === "post" || config.method === "put") {
      // post、put 提交時(shí)，將對(duì)象轉(zhuǎn)換為string, 為處理Java后臺(tái)解析問(wèn)題
      config.data = JSON.stringify(config.data)
    }
    // loading + 1
    store.dispatch("SetLoading", true)
    // 請(qǐng)求發(fā)送前進(jìn)行處理
    return config
  },
  (error) => {
    // 請(qǐng)求錯(cuò)誤處理
    // loading 清 0
    setTimeout(function() {
      store.dispatch("SetLoading", 0)
    }, 300)

    return Promise.reject(error)
  }
)

// 添加響應(yīng)攔截器
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 {
      // 此處整理錯(cuò)誤信息格式
      info = {
        code: status,
        data: data,
        msg: statusText
      }
    }
    // loading - 1
    store.dispatch("SetLoading", false)
    return Promise.reject(info)
  }
)

這樣我們?cè)诘却涌诜祷財(cái)?shù)據(jù)是就會(huì)看到下面這樣子:

小結(jié)

好啦 ，今天就到這里吧，如果有什么疑問(wèn)，可以下面留言，小肆?xí)皶r(shí)回復(fù)的。記得點(diǎn)好看呦!

前置閱讀：

用vue-cli3從0到1做一個(gè)完整功能手機(jī)站（一）

從0到1開(kāi)發(fā)實(shí)戰(zhàn)手機(jī)站（二）：Git提交規(guī)范配置

從0到1使用VUE-CLI3開(kāi)發(fā)實(shí)戰(zhàn)（三）: ES6知識(shí)儲(chǔ)備

從0到1使用VUE-CLI3開(kāi)發(fā)實(shí)戰(zhàn)（四）:Axios封裝

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101442.html

相關(guān)文章

  • 前方來(lái)報(bào)，八月最新資訊--關(guān)于vue2&3的最佳文章推薦

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

    izhuhaodev 評(píng)論0 收藏0

  • 從0到1使用VUE-CLI3開(kāi)發(fā)實(shí)戰(zhàn)(六)：這是一個(gè)有代碼潔癖的項(xiàng)目

    摘要：從到使用開(kāi)發(fā)實(shí)戰(zhàn)六這是一個(gè)有代碼潔癖的項(xiàng)目一個(gè)小故事一天我路過(guò)一座橋，碰巧看見(jiàn)一個(gè)人想跳河自殺。配置什么是是一個(gè)開(kāi)源的代碼檢查工具，由于年月創(chuàng)建。使用編寫(xiě)，這樣既可以有一個(gè)快速的運(yùn)行環(huán)境的同時(shí)也便于安裝。 從0到1使用VUE-CLI3開(kāi)發(fā)實(shí)戰(zhàn)(六)：這是一個(gè)有代碼潔癖的項(xiàng)目 一個(gè)小故事 一天我路過(guò)一座橋，碰巧看見(jiàn)一個(gè)人想跳河自殺。我跑過(guò)去對(duì)他大喊道：別跳，別死啊。為什么不讓我跳？他說(shuō)。...

    genefy 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

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

    sutaking 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

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

    khs1994 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<