Zwei Möglichkeiten zum Konfigurieren globaler Vue-Methoden

1. Einleitung

Bei der Entwicklung von Vue-Projekten wird es definitiv ein Szenario geben, in dem auf verschiedenen Komponentenseiten dieselbe Methode verwendet wird, z. B. Formatierungszeit, Dateidownload, tiefes Kopieren von Objekten, Zurückgeben von Datentypen, Kopieren von Text usw. Zu diesem Zeitpunkt müssen wir die häufig verwendeten Funktionen extrahieren und für die globale Verwendung bereitstellen. Wie können wir also eine Tool-Funktionsklasse definieren, die wir in der globalen Umgebung verwenden können? Bitte sehen Sie sich die Aufschlüsselung unten an.

PS: Dieser Artikel verwendet vue 2.6.12

2. Die erste Methode

Direkt zum Vue-Instanzprototyp hinzufügen

Öffnen Sie zuerst main.js, importieren Sie die durch Import definierte allgemeine Methode utils.js und fügen Sie sie dann mit Vue.prototype.$utils = utils zur Vue-Instanz hinzu

Vue von „vue“ importieren
App aus „./App.vue“ importieren
Router aus „./router“ importieren
Store aus „./store“ importieren
importiere Dienstprogramme aus „./utils/Utils“

Vue.prototype.$utils = Dienstprogramme

neuer Vue({
 Router,
 speichern,
 rendern: h => h(App)
}).$mount('#app')

Wenn Sie es anschließend auf der Komponentenseite verwenden müssen, verwenden Sie einfach this.$utils.xxx

Methoden: {
 fn() {
  lass Zeit = this.$utils.formatTime(neues Datum())
 }
}

Mangel:

• Zu viele Bindungen machen die Vue-Instanz zu groß
• Fügen Sie dies bei jeder Verwendung hinzu
  

Vorteil:

• Einfache Definition

Amtliche Dokumentation

3. Die zweite Methode

Verwenden Sie webpack.ProvidePlugin zum globalen Importieren

Geben Sie zunächst webpack und path in vue.config ein, definieren Sie dann Plugins im configureWebpack-Objekt von module.exports und geben Sie die benötigten js-Dateien ein

Die vollständige vue.config.js-Konfiguration sieht wie folgt aus:

const baseURL = process.env.VUE_APP_BASE_URL
const webpack = erfordern('webpack')
const path = require("Pfad")

modul.exporte = {
 öffentlicher Pfad: './',
 Ausgabeverzeichnis: process.env.VUE_APP_BASE_OUTPUTDIR,
 assetDir: "Vermögenswerte",
 lintOnSave: wahr,
 productionSourceMap: false,
 konfigurierenWebpack: {
  devServer: {
   offen: falsch,
   Überlagerung:
    Warnung: wahr,
    Fehler: wahr,
   },
   Host: "localhost",
   Port: '9000',
   hotOnly: falsch,
   Proxy: {
    '/api': {
     Ziel: Basis-URL,
     sicher: falsch,
     changeOrigin: true, //Proxypfad öffnenRewrite: {
      '^/api': '/',
     },
    },
   }
  },
  Plugins: [
   neues webpack.ProvidePlugin({
          UTILS: [path.resolve(__dirname, './src/utils/Utils.js'), 'default'], // Definierte globale Funktionsklasse TOAST: [path.resolve(__dirname, './src/utils/Toast.js'), 'default'], // Definierte globale Toast-Popup-Box-Methode LOADING: [path.resolve(__dirname, './src/utils/Loading.js'), 'default'] // Definierte globale Lademethode })
  ]
 }
}

Wenn Sie ESlint in Ihrem Projekt haben, müssen Sie nach dieser Definition auch ein globales Objekt zur Datei .eslintrc.js im Stammverzeichnis hinzufügen, um den Eigenschaftsnamen der definierten globalen Funktionsklasse zu aktivieren. Andernfalls wird ein Fehler gemeldet, dass die Eigenschaft nicht gefunden werden kann.

modul.exporte = {
  Wurzel: wahr,
  Parseroptionen: {
    Parser: „babel-eslint“,
    Quelltyp: „Modul“
  },
  Umgebung: {
    Browser: wahr,
    Knoten: wahr,
    es6: wahr,
  },
  "Globale": {
    "UTILS": wahr,
    "TOAST": wahr,
    "LOADING": wahr
  }
  // …N Zeilen der ESlint-Konfiguration weglassen}

Starten Sie das Projekt nach der Definition neu und verwenden Sie es wie folgt:

berechnet: {
 Spielanzahl() {
  return (Zahl) => {
   // UTILS ist eine definierte globale Funktionsklasse const count = UTILS.tranNumber(num, 0)
   Anzahl der Rückgaben
  }
 }
}

Mangel:

• Noch nicht gefunden...
  

Vorteil:

• Spaß bei der Teamentwicklung
  

Amtliche Dokumentation

Zusammenfassen

Damit ist dieser Artikel über zwei Möglichkeiten zum Konfigurieren globaler Vue-Methoden abgeschlossen. Weitere Informationen zum Konfigurieren globaler Vue-Methoden 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!