Vue3.0 異なる解像度のコンピュータの適応操作

まず依存関係をインストールする必要があります

npm i lib-flexible-computer -S //ルートノードはページビューポートのフォントサイズに応じて変更されます npm i px2rem-loader -D //pxをremに自動的に変換します
npm i postcss-px2rem // コード内のpxを対応するremに自動的に変換するプラグイン

ここでお伝えしたいのは、npmによってインストールされたlib-flexible-computerの依存関係です。皆さんはPCに適応するために多くの方法を検索したと思います。そのほとんどは、次の依存関係をインストールしました。

npm i lib-flexible -S

この依存関係をインストールします。適応すると、540以下の画面でしか使用できません。PC側ではあまり役に立たないので、上に書いた依存関係に変更しました。さっそく本題に入りましょう。依存関係をインストールした後の使用方法

main.js にインポートする

「lib-flexible-computer」をインポートします。

次に、srcと同じレベルにvue.config.jsファイルを作成し、次のコードを追加します。

モジュール.エクスポート = {
 パブリックパス: "./",
 出力ディレクトリ: "dist",
 保存時にlint: true、
 css: {
  ローダーオプション: {
   css: {},
   ポストcss: {
    プラグイン: [
     必要("postcss-px2rem")({
      rem単位: 192///デザイン幅/10
     })
    ]
   }
  }
 }
};

このようにして、異なる解像度のコンピュータによって生成されたコードは自動的にremに変換されます。
注記：**

上記でデザインのサイズが設定されました。これらの操作が完了したら、デザインのサイズを自由に書き込むと、自動的に変換されます。

**

異なる解像度のコンピューターに適応する vue3.0 に関するこの記事はこれで終わりです。vue3.0 の適応解像度コンピューターに関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。