vue-cli でレスポンシブ レイアウトを実装する方法

フロントエンド開発を行うと、PCとモバイル端末の適応に必然的に直面することになります。このような問題に直面して、一部の企業はモバイルはモバイル、PCはPCの2つのページを用意し、レスポンシブレイアウトはユーザーの異なるモデルに応じて異なるページを表示します。これ以上面倒なことはせずに、コードを貼り付けるだけです。

まず、この機能は vuex を利用して実装されています。まだダウンロードしていない場合は、まずダウンロードしてください。

糸を追加するvuex

レスポンシブレイアウトなので、PC側用のCSSとモバイル側用のCSSの2セットを用意する必要があります。 とりあえず、PC側をコンピュータスタイル、モバイル側をモバイルスタイルと呼ぶことにします。

まず最初にやるべきことは、現在の画面の幅です

州： {
  画面幅: document.documentElement.clientWidth、
  画面の高さ: document.documentElement.clientHeight
 }

これはvuexの状態です。後で画面の幅をリアルタイムで監視するため、screenWidthを変更するメソッドも用意する必要があるため、別のミューテーションを書きました。

突然変異:
  setWidth(状態, 値) {
   state.screenWidth = 値
  },
  setHeight (状態、値) {
   state.screenHeight = 値
  }
 }

このようにして、vuexファイルが書き込まれ、APP.vueになります。このファイルの下にwindow.onresizeイベントを追加して、vuexのscreenWidth値をリアルタイムで更新する必要があります。ここでは、補助関数を使用します。

'vuex' から { mapState, mapMutations } をインポートします。

マウントされたフック関数にイベントを追加する

マウントされた（）{
  ウィンドウのサイズ変更 = () => { 
   this.setWidth(document.documentElement.clientWidth) 
  }
}

例えば、ウェブページのナビゲーションはモバイルでは下部、PCでは上部に表示する必要があるので、watchまたはcomputedを使用してnav.vueコンポーネントのscreenWidthの値を監視することができます。ここではcomputedを使用します。

<ul :class="computedPhone">//screenWidth に応じて異なるクラス名を指定します<router-link to='/file' tag="li" active-class="active">Movie</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>

計算: {
  ...mapState('スタイルシート', ['画面幅']),
  計算された電話() {
   （this.screenWidth < 1024）の場合{
    'モバイル'を返す
   } それ以外 {
    'コンピュータ'を返す
   }
  }
 }

このように、2セットのCSSを記述することでレスポンシブレイアウトを実現できます。

これで、vue-cli でレスポンシブ レイアウトを実装する方法に関するこの記事は終了です。vue-cli レスポンシブ レイアウトに関する関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。