共计 3488 个字符，预计需要花费 9 分钟才能阅读完成。
小肆前几天发了一篇 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)
}
)
这样我们在等待接口返回数据是就会看到下面这样子:
小结
好啦，今天就到这里吧，如果有什么疑问，可以下面留言，小肆会及时回复的。记得点好看呦!
前置阅读：
用 vue-cli3 从 0 到 1 做一个完整功能手机站（一）
从 0 到 1 开发实战手机站（二）：Git 提交规范配置
从 0 到 1 使用 VUE-CLI3 开发实战（三）: ES6 知识储备
从 0 到 1 使用 VUE-CLI3 开发实战（四）:Axios 封装
