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!