vue-cli快速搭建项目的几个文件（三）
==========有加载动画的app.vue===========
<template>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<van-loading type="spinner" v-show="LOADING" color="#1989fa" class='loading posiAbsol' />
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: 'App',
computed:{
...mapState([
'LOADING'
])
},
components: {
},
data(){
return{
netState:true
}
},
watch:{
LOADING(val){
console.log(val)
}
}
}
</script>
<style>
.loading{
left:50%;
margin-left:-15px;
top:40%;
z-index:999
}
#app{
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
body{
margin:0px auto;
padding:0px;
}
html, body{
height: 100%;
width: 100%;
background: #ececec;
}
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
fieldset, c{ border:none; }
img{border: none;}
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }
ul, ol ,li{ list-style:none; }
a { color:#666; text-decoration:none; }
em{
font-style: normal;
}
</style>
========有加载动画的store.js========
import Vue from 'vue'
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
LOADING: false,
},
mutations: {
showLoading(state){
state.LOADING = true
},
hideLoading (state) {
state.LOADING = false
}
}
})
export default store
