从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官方文档给出了它具备的几点优势:
安装
安装算是比较简单了,在项目目录输入以下命令就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,下面这张图显示了它可用的全部属性:
上述代码的实际显示效果:
模块化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
<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) } )
这样我们在等待接口返回数据是就会看到下面这样子:
小结
好啦 ,今天就到这里吧,如果有什么疑问,可以下面留言,小肆会及时回复的。记得点好看呦!
前置阅读:
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 如何使用Fedora模块化存储库
- 真棒:使用Java 11实现应用的模块化
- 使用Java 9的模块化来构建零依赖的原生应用
- 使用平行的属性网络模块化自动驾驶中的控制策略网络
- SpaceVim 0.7.0:像 IDE 一样使用 Vim, 将语言拓展模块化
- 使用模块化工具打包自己开发的JS库(webpack/rollup)对比总结
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。