この記事では、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 を実装する方法
の変更点に対する詳細な回答Vue はコンポーネントに影響を与えますか?
以上がvue-cli を使用してモバイル アダプテーションを構成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。