Wie konfiguriere ich die mobile Anpassung mit vue-cli?
Jun 12, 2018 am 11:31 AMDieser 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:
1 |
|
Introduce lib-flexible
Introduce lib-flexible
in der Projekteintragsdatei main.js1 2 |
|
Meta-Tag hinzufügen
Folgendes Meta in index.html im Projektstammverzeichnis hinzufügen
1 |
|
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:
1 |
|
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
und in das Loader-Array einfügen
1 2 3 4 |
|
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
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!

Heißer Artikel

Hot-Tools-Tags

Heißer Artikel

Heiße Artikel -Tags

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

So verwenden Sie die Kartenfunktion in Vue

Der Unterschied zwischen Event und $event in Vue

Der Unterschied zwischen Export und Exportstandard in Vue
