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