How to implement responsive layout in vue-cli

When we are doing front-end development, we will inevitably encounter the adaptation of PC and mobile terminals. Faced with such a problem, some companies will prepare two pages, mobile is mobile, PC is PC, and the responsive layout is to display different pages according to the different models of users. Without further ado, just paste the code

First of all, this function is implemented with the help of vuex. If you haven't downloaded it yet, you can download it first.

yarn add vuex

Since it is a responsive layout, we need to prepare two sets of CSS, one is the CSS for the PC side, and the other is the CSS for the mobile side. For the time being, we will call the PC side style computer and the mobile side style mobile.

The first thing we need to do is the current screen width

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

This is the state of vuex. We will monitor the screen width in real time later, so we also need to provide a method to change screenWidth, so I wrote another mutation

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

In this way, our vuex file is written, and then it is APP.vue. We need to add a window.onresize event under this file to update the screenWidth value in vuex in real time. Here we use the auxiliary function

import { mapState, mapMutations } from 'vuex'

Add events to the mounted hook function

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

For example, for the navigation in our web page, we need it at the bottom on mobile and at the top on PC, so we can use watch or computed to monitor the value of screenWidth in the nav.vue component. Here we use computed

<ul :class="computedPhone">//Provide different class names according to screenWidth<router-link to='/file' tag="li" active-class="active">Movie</router-link>
   <router-link to='/cinma' tag="li" active-class="active">cinema</router-link>
   <router-link to='/center' tag="li" active-class="active">Personal Center</router-link>
</ul>

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

In this way, you can achieve responsive layout by writing two sets of css

This is the end of this article about how to implement responsive layout in vue-cli. For more relevant vue-cli responsive layout content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!