vue-cli を使用してモバイル アダプテーションを構成するにはどうすればよいですか?

この記事では、vue-cli に基づいてモバイル画面適応を設定する詳細な説明を主に紹介しますので、参考として共有します。

モバイル画面適応については、以前に記事を書きました: モバイル画面適応の解決策 、今日は、vue-cli 設定に基づいたモバイル画面の適応の問題について話しましょう。

レシピは同じです: 淘宝網の lib-flexible + rem

flexible を設定します

lib-flexible をインストールします

コマンドラインで次のインストールを実行します:

npm i lib-flexible --save

lib-flexible を導入する

プロジェクトエントリーファイルmain.jsにlib-flexible

// main.js
import 'lib-flexible'

を導入し、メタタグを追加します

プロジェクトルートディレクトリのindex.htmlに以下のmeta

<meta name="viewport" content="width=device-width, initial-scale=1.0">

pxをrem

Inに追加します実際の開発ではデザインを渡します。 ドラフトで得られた値の単位はpxなので、pxをremに変換してスタイルに記述する必要があります。

px を rem に変換する webpack のローダーを持つ px2rem ツールを使用します: px2rem-loader

px2rem-loader をインストールします

コマンドラインで次のインストールを実行します:

npm i px2rem-loade --save-dev

px2rem-loade を設定します

vue-cli によって生成された webpack 設定では、vue-loader およびその他のスタイル ファイル ローダーのオプションは、最終的に build/utils.js 内のメソッドによって生成されます。

cssLoader の後に px2remLoader を追加するだけです。px2rem-loader の remUnit オプションは、1rem = ピクセル数を意味し、lib-flexible ソリューションと組み合わせて、px2remLoader の options.remUnit をデザインの幅の 1 に設定します。ドラフト. /10、ここではデザインドラフトの幅が 750px であると仮定します。

// utils.js
var cssLoader = {
 loader: 'css-loader',
 options: {
  minimize: process.env.NODE_ENV === 'production',
  sourceMap: options.sourceMap
 }
}
var px2remLoader = {
 loader: 'px2rem-loader',
 options: {
  remUnit: 75
 }
}
// ...

そしてそれをローダー配列に入れてください

// utils.js
function generateLoaders(loader, loaderOptions) {
 var loaders = [cssLoader, px2remLoader]
 // ...

設定を変更したら、ユニットを直接コンポーネントに書き込み、px を書き込むことができます。より快適に。

上記は私があなたのためにまとめたものです。

関連記事:

Vue でデータの変更を自動的に検出するための watch を実装する方法

Parcel を使用してパッケージ化する方法

Vue がパッケージ化ツールを構成する方法の詳細な説明

の変更点に対する詳細な回答Vue はコンポーネントに影響を与えますか?

JavaScriptを使用して宝くじシステムを実装する方法

以上がvue-cli を使用してモバイル アダプテーションを構成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。