So implementieren Sie ein responsives Layout in Vue-CLI

Wenn wir Frontend-Entwicklung betreiben, werden wir unweigerlich auf die Anpassung von PCs und mobilen Endgeräten stoßen. Angesichts eines solchen Problems bereiten einige Unternehmen zwei Seiten vor, mobil ist mobil, PC ist PC, und das responsive Layout besteht darin, unterschiedliche Seiten entsprechend den unterschiedlichen Benutzermodellen anzuzeigen. Fügen Sie ohne weiteres einfach den Code ein

Zunächst wird diese Funktion mithilfe von vuex implementiert. Wenn Sie es noch nicht heruntergeladen haben, können Sie es zuerst herunterladen.

Garn hinzufügen Vuex

Da es sich um ein responsives Layout handelt, müssen wir zwei CSS-Sätze vorbereiten, einen für die PC-Seite und einen für die mobile Seite. Vorerst nennen wir den Stil der PC-Seite „Computer“ und den Stil der mobilen Seite „Mobile“.

Als erstes müssen wir die aktuelle Bildschirmbreite

Zustand: {
  Bildschirmbreite: Dokument.Dokumentelement.Clientbreite,
  Bildschirmhöhe: Dokument.Dokumentelement.Clienthöhe
 }

Dies ist der Status von vuex. Wir werden die Bildschirmbreite später in Echtzeit überwachen, daher müssen wir auch eine Methode zum Ändern der Bildschirmbreite bereitstellen, also habe ich eine weitere Mutation geschrieben

Mutationen:
  setWidth(Zustand, Wert) {
   state.screenWidth = Wert
  },
  setHeight (Status, Wert) {
   state.screenHeight = Wert
  }
 }

Auf diese Weise wird unsere Vuex-Datei geschrieben und ist dann APP.vue. Wir müssen unter dieser Datei ein window.onresize-Ereignis hinzufügen, um den screenWidth-Wert in Vuex in Echtzeit zu aktualisieren. Hier verwenden wir die Hilfsfunktion

importiere { mapState, mapMutations } von 'vuex'

Fügen Sie der bereitgestellten Hook-Funktion Ereignisse hinzu

montiert () {
  fenster.onresize = () => { 
   this.setWidth(Dokument.Dokumentelement.ClientWidth) 
  }
}

Für die Navigation auf unserer Webseite benötigen wir sie beispielsweise auf Mobilgeräten unten und auf PCs oben. Daher können wir watch oder computed verwenden, um den Wert von screenWidth in der Komponente nav.vue zu überwachen. Hier verwenden wir computed

<ul :class="computedPhone">//Geben Sie je nach Bildschirmbreite unterschiedliche Klassennamen an<router-link to='/file' tag="li" active-class="active">Movie</router-link>
   <router-link to='/cinma' tag="li" active-class="active">Kino</router-link>
   <router-link to='/center' tag="li" active-class="active">Persönliches Center</router-link>
</ul>

berechnet: {
  ...mapState('stylesheet', ['screenWidth']),
  berechnetesTelefon() {
   wenn (diese.Bildschirmbreite < 1024) {
    Rückgabe 'mobile'
   } anders {
    returniere 'Computer'
   }
  }
 }

Auf diese Weise können Sie ein responsives Layout erreichen, indem Sie zwei CSS-Sätze schreiben

Dies ist das Ende dieses Artikels zur Implementierung von responsivem Layout in Vue-CLI. Weitere relevante Inhalte zu responsivem Layout in Vue-CLI finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!