Wie konfiguriere ich die mobile Anpassung mit vue-cli?

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung der Konfiguration der mobilen Bildschirmanpassung basierend auf vue-cli vor. Jetzt teile ich ihn mit Ihnen und gebe Ihnen eine Referenz.

Ich habe bereits einen Artikel über die mobile Bildschirmanpassung geschrieben: Mobil Um das Problem der Bildschirmanpassung des Terminals zu lösen, sprechen wir heute über das Problem der Bildschirmanpassung des mobilen Terminals basierend auf der Vue-CLI-Konfiguration.

Das Rezept ist immer noch dasselbe: lib-flexible + rem von Taobao

Flexibel konfigurieren

Lib-flexible installieren

Führen Sie die folgende Installation in der Befehlszeile aus:

npm i lib-flexible --save

Introduce lib-flexible

Introduce lib-flexible

in der Projekteintragsdatei main.js

// main.js
import 'lib-flexible'

Meta-Tag hinzufügen

Folgendes Meta in index.html im Projektstammverzeichnis hinzufügen

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

px to rem

In der tatsächlichen Entwicklung ist die Werteinheit, die wir durch den Designentwurf erhalten, px, daher müssen wir px in rem umwandeln und es dann in den Stil schreiben.

Px in rem konvertieren Wir werden das Tool px2rem verwenden, das den Webpack-Loader px2rem-loader hat.

Installieren Sie px2rem-loader

In Run the Folgende Installation in der Befehlszeile:

npm i px2rem-loade --save-dev

Konfigurieren Sie px2rem-loade

In der von vue-cli generierten Webpack-Konfiguration, Vue-Loader-Optionen und anderen Dateiladern im Stil Am Ende werden sie alle durch eine Methode in build/utils.js generiert.

Wir müssen nur einen px2remLoader nach cssLoader hinzufügen. Die remUnit-Option von px2rem-loader bedeutet 1rem = wie viele Pixel, wir setzen die options.remUnit von px2remLoader auf das Design 1 /10 der Entwurfsbreite Hier gehen wir davon aus, dass die Entwurfsbreite 750 Pixel beträgt.

// 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
 }
}
// ...

und in das Loader-Array einfügen

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

Nach dem Ändern der Konfiguration müssen wir die Einheit direkt in die Komponente schreiben und px schreiben wie der Designentwurf ist, was viel komfortabler ist.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie Watch, um Datenänderungen in Vue automatisch zu erkennen

So verpacken Sie mit Parcel

Ausführliche Erklärung, wie Vue Verpackungstools konfiguriert

Detaillierte Erklärung, welche Auswirkungen Änderungen in Vue auf Komponenten haben?

So implementieren Sie ein Lotteriesystem mit JavaScript

Das obige ist der detaillierte Inhalt vonWie konfiguriere ich die mobile Anpassung mit vue-cli?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!