In einem Artikel erfahren Sie, wie Sie ein Vue-Plugin schreiben

Was ist ein Plugin

Wenn wir im Vue-Framework einige Funktionen hinzufügen müssen, die wir zu Vue benötigen, hat Vue mir eine Plug-In-Methode hinterlassen. Wir können unser eigenes Plug-In schreiben, das Plug-In dann in Vue registrieren und es dann verwenden.

Durch Vue-Plug-Ins können wir einige Funktionen implementieren, die das Vue-Framework nicht hat, oder wir können von anderen geschriebene Plug-Ins verwenden, um einige Funktionen schneller zu implementieren.

An den Funktionsumfang des Plug-Ins werden keine strengen Anforderungen gestellt. Laut den offiziellen Beispielen gibt es im Allgemeinen folgende Typen:

1. Fügen Sie globale Methoden oder Attribute hinzu, wie z. B. vue-custom-element . Wir können einige globale Komponenten als Plug-Ins hinzufügen und sie dann auf jeder Seite oder in jeder Komponente verwenden. Auf diese Weise installieren auch die Komponentenbibliotheken von Element UI oder Ant Design Komponenten.

2. Fügen Sie globale Ressourcen hinzu: Anweisungen/Übergänge usw. Beispiel: vue-touch . Wir können auch Plug-Ins verwenden, um einige globale benutzerdefinierte Anweisungen zum Implementieren unserer Funktionen hinzuzufügen.

3. Fügen Sie einige Komponentenoptionen über das globale Mixin hinzu. (wie z. vue-router )

4. Fügen Sie globale Instanzmethoden hinzu, indem Sie sie zu config.globalProperties hinzufügen. Beispielsweise platzieren wir die $http-Anfrage häufig in der globalen Instanzmethode, sodass wir sie auf jeder Seite oder in jeder Komponente verwenden können, ohne sie explizit importieren zu müssen.

5. Eine Bibliothek, die eine eigene API bereitstellt und eine oder mehrere der oben genannten Funktionen bereitstellt. Wie z. B. vue-router , vuex usw.

Plugins schreiben

Das Schreiben eines Vue-Plug-Ins ist eigentlich sehr einfach. Ein Plug-In ist eigentlich ein Objekt oder eine Funktion. Wenn es ein Objekt ist, wird die Installationsmethode im Objekt aufgerufen, und wenn es eine Funktion ist, wird diese Funktion aufgerufen. Unabhängig davon, ob die Installationsmethode eines Objekts oder eine Funktion aufgerufen wird, erhalten sie zwei Parameter: 1 ist das von Vues createApp generierte App-Objekt und 2 sind die vom Benutzer übergebenen Parameter.

Beginnen wir mit der einfachsten i18n-Funktion.

Im Allgemeinen legen wir das Plug-In im plugins -Ordner ab, der einfach zu pflegen und zu verwalten ist.

Wir erstellen eine i18n.js Datei

Standard exportieren {
  installieren: (App, Optionen) => {
    // Plugin-Code schreiben}
}

Wenn wir beispielsweise eine globale Funktion zum Übersetzen des gesamten Programms benötigen, können wir die Methode an die Eigenschaft app.config.globalProperties anhängen, um sie verfügbar zu machen.

Die Funktion erhält eine Schlüsselzeichenfolge, die wir verwenden, um die konvertierte Zeichenfolge im vom Benutzer bereitgestellten Argumentobjekt nachzuschlagen.

// plugins/i18n.js
Standard exportieren {
  installieren: (App, Optionen) => {
    app.config.globalProperties.$translate = Schlüssel => {
      Rückgabewert key.split('.').reduce((o, i) => {
        wenn (o) return o[i]
      }, Optionen)
    }
  }
}

Es wird davon ausgegangen, dass der Benutzer bei Verwendung des Plugins ein Objekt übergibt, das die übersetzten Schlüssel im Optionsparameter enthält. Unsere $translate-Funktion verwendet eine Zeichenfolge wie „grüße.hello“, sodass der nachgeschlagene Wert „Bonjour!“ lautet.

Zum Beispiel:

Grüße:
  hallo: 'Bonjour!'
}

Wir können Inject auch verwenden, um Funktionen oder Eigenschaften bereitzustellen. Beispielsweise können wir der Anwendung Zugriff auf den Optionsparameter gewähren, um das bei der Installation des Plugins übergebene Parameterobjekt verwenden zu können.

// plugins/i18n.js
Standard exportieren {
  installieren: (App, Optionen) => {
    app.config.globalProperties.$translate = Schlüssel => {
      Rückgabewert key.split('.').reduce((o, i) => {
        wenn (o) return o[i]
      }, Optionen)
    }
    app.provide('i18n', Optionen)
  }
}

Jetzt können wir inject[i18n] verwenden, um es in einige Seiten oder Komponenten einzufügen und auf das Objekt zuzugreifen.

Da Vue mir das App-Objekt als erstes Argument des Plugins bereitstellt, stehen dem Plugin alle anderen Funktionen zur Verfügung, beispielsweise die Verwendung von Mixins und Anweisungen. Weitere Informationen zu createApp und Anwendungsinstanzen finden Sie in der Anwendungs-API-Dokumentation.

Unten registrieren wir beispielsweise eine neue benutzerdefinierte Direktive im Plugin sowie eine globale Mixin-Methode:

// plugins/i18n.js
Standard exportieren {
  installieren: (App, Optionen) => {
    app.config.globalProperties.$translate = (Schlüssel) => {
      Rückgabewert: key.split('.')
        .reduce((o, i) => { wenn (o) return o[i] }, Optionen)
    }
    app.provide('i18n', Optionen)
    app.direktive('meine-direktive', {
      gemountet (el, Bindung, vnode, alter vnode) {
        // etwas Logik ...
      }
      //...
    })
    app.mixin({
      erstellt() {
        // etwas Logik ...
      }
      //...
    })
  }
}

Verwendung von Plugins

Nachdem wir das Plug-In oben geschrieben haben, können wir das Plug-In verwenden. Auch die Verwendung von Plugins in Vue ist sehr einfach. Wir können unserer Anwendung Plugins hinzufügen, indem wir die Methode use() verwenden.

use() -Methode nimmt zwei Parameter an. Das erste ist das zu installierende Plugin.

Der zweite Parameter ist optional, wir können dem Plugin einige benutzerdefinierte Parameter übergeben.

// Haupt.js
importiere { createApp } von 'vue'
Root aus „./App.vue“ importieren
importiere i18nPlugin aus './plugins/i18n'
const app = erstelleApp(Root)
const i18nStrings = {
  Grüße:
    hi: „Hallo!“
  }
}
app.use(i18nPlugin, i18nStrings)
app.mount('#app')

Schließlich verwenden wir dieses Plugin auf der Seite:

<Vorlage>
  <h1>{{ $translate("grüße.hi") }}</h1>
  <div>Beispiel für ein i18n-Plugin</div>
</Vorlage>

Die abschließende Anzeige:

Zusammenfassen

Referenz: https://v3.cn.vuejs.org/guide/plugins.html

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!