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

栏目: JavaScript · 发布时间: 5年前

内容简介:小肆前几天发了一篇2019年Vue精品开源项目库的汇总,今天小肆要使用的是在UI组件中排行第三的Vuetify。Vuetify是一个渐进式的框架,完全根据Material Design规范开发,一共拥有80多个组件,对移动端支持非常好。支持SSR(服务端渲染),SPA(单页应用程序),PWA(渐进式Web应用程序)和标准HTML页面。

小肆前几天发了一篇2019年Vue精品开源项目库的汇总,今天小肆要使用的是在UI组件中排行第三的Vuetify。

vuetify介绍

Vuetify是一个渐进式的框架,完全根据Material Design规范开发,一共拥有80多个组件,对移动端支持非常好。

支持SSR(服务端渲染),SPA(单页应用程序),PWA(渐进式Web应用程序)和标准HTML页面。

vuetify官方文档给出了它具备的几点优势:

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

安装

安装算是比较简单了,在项目目录输入以下命令就OK:

vue add vuetify

但这时有一个问题,如果我们使用默认的icon, index.html 里面引入的是google的链接

<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">

我们需要替换成国内的

https://fonts.cat.net/

底部导航组件

今天我们先用vuetify的语法写一个底部导航的组件,先放代码:

<template>
  <v-card flat>
    <v-bottom-nav :value="true" fixed color="transparent">
      <v-btn color="teal" :to="{path:'/'}" flat>
        <span>首页</span>
        <v-icon>home</v-icon>
      </v-btn>

      <v-btn color="teal" :to="{path:'/lottery'}" flat>
        <span>足彩</span>
        <v-icon>favorite</v-icon>
      </v-btn>

      <v-btn color="teal" :to="{path:'/competition'}" flat>
        <span>赛事</span>
        <v-icon>place</v-icon>
      </v-btn>

      <v-btn color="teal" :to="{path:'/course'}" flat>
        <span>课程</span>
        <v-icon>music_video</v-icon>
      </v-btn>
    </v-bottom-nav>
  </v-card>
</template>

这里主要用到的是 v-bottom-nav 这个API,下面这张图显示了它可用的全部属性:

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

上述代码的实际显示效果:

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

模块化vuex

为了使用方便,我们改造一下vuex,新建store目录,目录结构如下:

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

更改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

<template>
  <transition name="fade-transform" mode="out-in">
    <div class="request-loading-component" v-if="requestLoading">
      <v-progress-circular :size="50" color="primary" indeterminate></v-progress-circular>
    </div>
  </transition>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'RequestLoading',
  computed: {
    ...mapGetters(['requestLoading'])
  }
}
</script>

<style lang="stylus" scoped>
.request-loading-component {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(48, 65, 86, 0.5);
  font-size: 150px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  z-index: 999999;
}
</style>

这里我们用到了,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)
  }
)

这样我们在等待接口返回数据是就会看到下面这样子:

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

小结

好啦 ,今天就到这里吧,如果有什么疑问,可以下面留言,小肆会及时回复的。记得点好看呦!

前置阅读:


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

疯狂Java讲义

疯狂Java讲义

李刚 / 电子工业出版社 / 2012-1-1 / 109.00元

《疯狂Java讲义(附光盘第2版)》是《疯狂Java讲义》的第2版,第2版保持了第1版系统、全面、讲解浅显、细致的特性,全面介绍了新增的Java 7的新特性。 《疯狂Java讲义(附光盘第2版)》深入介绍了Java编程的相关方面,全书内容覆盖了Java的基本语法结构、Java的面向对象特征、Java集合框架体系、Java泛型、异常处理、Java GUI编程、JDBC数据库编程、Java注释、......一起来看看 《疯狂Java讲义》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具