从0到1使用VUE-CLI3开发实战(五):模块化VUEX及使用vuetify

fuyi501 发布于2019-08-23 14:58 / 3006人阅读

摘要：小肆前几天发了一篇年精品开源项目库的汇总，今天小肆要使用的是在组件中排行第三的。记得点好看呦前置阅读用从到做一个完整功能手机站一从到开发实战手机站二提交规范配置从到使用开发实战三知识储备从到使用开发实战四封装

小肆前几天发了一篇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的安装及使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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