vue-cli中实现响应式布局的方法

yarn add vuex

state: {
  screenWidth: document.documentElement.clientWidth,
  screenHeight: document.documentElement.clientHeight
 }

mutations: {
  setWidth (state, value) {
   state.screenWidth = value
  },
  setHeight (state, value) {
   state.screenHeight = value
  }
 }

import { mapState, mapMutations } from 'vuex'

mounted () {
  window.onresize = () => { 
   this.setWidth(document.documentElement.clientWidth) 
  }
}

<ul :class="computedPhone">//根据screenWidth提供不同的class名
   <router-link to='/file' tag="li" active-class="active">电影</router-link>
   <router-link to='/cinma' tag="li" active-class="active">影院</router-link>
   <router-link to='/center' tag="li" active-class="active">个人中心</router-link>
</ul>

computed: {
  ...mapState('stylesheet', ['screenWidth']),
  computedPhone () {
   if (this.screenWidth < 1024) {
    return 'mobile'
   } else {
    return 'computer'
   }
  }
 }