Einige Tipps zur Verwendung von Less in Vue-Projekten

Einige Tipps zur Verwendung von Less in Vue-Projekten

Vorwort

Die schönen Webseiten, die wir sehen, wurden alle sorgfältig von UI entworfen und von Front-End-Ingenieuren erstellt. Wenn Sie möchten, dass eine Webseite einen coolen Stil hat, müssen Sie CSS verwenden, um sie zu verarbeiten, was zwangsläufig zu viel wiederholtem und redundantem Code führt. Zu diesem Zeitpunkt erscheinen Stilpräprozessoren wie Less, Sass und Scss, die den CSS-Code erheblich vereinfachen und die Entwicklungseffizienz verbessern. Lassen Sie uns heute diesen Artikel lesen, um zu erfahren, wie Sie mit weniger Syntax in Vue-Projekten Effekte und Mixins durchdringen können.

1. Stildurchdringung

Die Struktur des Vue-Projekts besteht aus drei Teilen: Vorlage, Skript und Stil. Das Attribut „lang“ im Stil bestimmt die Syntax des Stils. Durch Festlegen des Attributs „scoped“ können Sie verhindern, dass der Stil der aktuellen Seite andere Seiten verunreinigt.

1. Was ist Musterpenetration?

Der von Ihnen festgelegte Stil überschreibt den ursprünglichen Stil

2. Wie verwenden?

Wenn wir eine gepackte öffentliche Komponente verwenden, sind wir mit dem ursprünglichen Stil der Komponente nicht zufrieden und möchten den Stil anpassen. Wir können die Stile in öffentlichen Komponenten nicht ändern, daher müssen wir zur Lösung dieses Problems auf Stilpenetration zurückgreifen.

Schreiben in vue2

Der Code lautet wie folgt (Beispiel):

<style lang="less" scoped>
	/tief/ ein {
            Textdekoration: keine;
	}
</Stil>
<style lang="less" scoped>
	::v-tief ein {
            Textdekoration: keine;
	}
</Stil>

Schreiben in Vue3

<style lang="less" scoped>
	:tief(a) {
            Textdekoration: keine;
	}
</Stil>

2. Mischen

1. Was ist ein Mixin?

Ähnlich der Funktion in js extrahiert es den wiederholten Code im Stil und kann bei Verwendung mehrfach eingeführt werden.

2. Wie verwenden?

Definition

Der Code lautet wie folgt (Beispiel):

<style lang="less" scoped>
    .abc() {
        Farbe: himmelblau
        }
</Stil>

verwenden

<style lang="less" scoped>
    P {
        Schriftgröße: 20px;
        .ABC();
      }
</Stil>

3. Weniger automatischer Import

1. Vorteile des automatisierten Imports

Sie können häufig vorkommende Stildateien extrahieren und in einer Less-Datei einfügen.

Dann können Sie es direkt dort verwenden, wo Sie es benötigen, ohne die Datei manuell importieren zu müssen

2. Wie erreicht man das?

  • Verwenden Sie das Style-Resoures-Loader-Plugin von Vue-CLI, um es automatisch in das Style-Tag jeder Vue-Komponente einzufügen.

Führen Sie vue add style-resources-loader im Terminal im Stammverzeichnis des Projekts aus, um ein Vue-CLI-Plugin hinzuzufügen.

Hinweis: Im Terminalfenster wird eine Abfrage angezeigt. Geben Sie y ein und wählen Sie „less“ aus.

  • Nach Abschluss der Installation wird die Datei vue.config.js automatisch generiert. Fügen Sie einfach die Adresse der Less-Datei hinzu, die automatisch in die Konfiguration importiert werden soll.

Der Code lautet wie folgt (Beispiel):

const Pfad = require('Pfad')

modul.exporte = {
  Plugin-Optionen: {
    'Stil-Ressourcen-Loader': {
      Vorprozessor: "weniger",
      Muster:
        // Konfigurieren Sie, welche Dateien automatisch importiert werden müssen path.join(__dirname, './src/xx/xx.less')
      ]
    }
  }
}

Zusammenfassen

Dies ist das Ende dieses Artikels mit einigen Tipps zur Verwendung von Less in Vue-Projekten. Weitere Informationen zur Verwendung von Less in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • 22 Vue-Optimierungstipps (Projektpraxis)
  • Vue.js Leistungsoptimierung N Tipps (es lohnt sich, sie zu sammeln)
  • Zusammenfassung praktischer Fähigkeiten, die häufig in Vue-Projekten verwendet werden
  • Zusammenfassung von 10 erweiterten Tipps für Vue Router
  • 8 Tipps für Vue, die Sie nach dem Lesen lernen werden
  • Tipps zur Verwendung von Vue-Elementen und Nuxt
  • Zusammenfassung gängiger Routinen und Techniken in der Vue-Entwicklung
  • Eine kurze Diskussion über die Verwendung von Vue-Funktionskomponenten
  • 6 Tipps zum Schreiben besserer v-for-Schleifen in Vue.js
  • 25 Vue-Tipps, die Sie kennen müssen

<<:  Analyse der HTTP-Dienstschritte auf einer virtuellen VMware-Maschine

>>:  So beenden Sie den MySQL-Prozess ordnungsgemäß und sicher

Artikel empfehlen

Lösung zum automatischen Stoppen des MySQL-Dienstes

Dieser Artikel stellt hauptsächlich die Lösung fü...

Implementierungscode für den MySQL-Protokolltrigger

SQL-Anweisung DROP-TRIGGER WENN EXISTIERT sys_men...

3 Möglichkeiten zum Erstellen von JavaScript-Objekten

Inhaltsverzeichnis 1. Objektliterale 2. Das neue ...

Anwendung zur Verarbeitung von HTML-Tag-Überläufen

Verwenden Sie CSS, um Bildlaufleisten zu ändern 1...

JS implementiert ein zufälliges Namensaufrufsystem

Verwenden Sie JS, um ein zufälliges Namensaufrufs...

Auszeichnungssprache - CSS-Layout

Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...

Das Front-End muss wissen, wie Bilder verzögert geladen werden (drei Methoden)

Inhaltsverzeichnis 1. Was ist Lazy Loading? 2. Im...

Detaillierte Einführung in den DOCTYPE-Typ

<br />Wir deklarieren DOCTYPE in HTML normal...

Detaillierte Erklärung zur Verwendung von Standard in MySQL

NULL- und NOT NULL-Modifikatoren, DEFAULT-Modifik...

Detaillierte Erklärung der grundlegenden Verwendung des SSH-Befehls ssh-keygen

Die SSH-Public-Key-Authentifizierung ist eine der...