小肆头几天发了一篇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封装