10 Best Practices zum Erstellen und Warten großer Vue.js-Projekte

Dies ist eine bewährte Methode, die ich bei der Arbeit an Vue-Projekten mit großen Codebasen entwickelt habe. Diese Tipps helfen Ihnen dabei, effizienteren Code zu entwickeln, der einfacher zu verwalten und weiterzugeben ist.

Während meiner freiberuflichen Tätigkeit in diesem Jahr hatte ich die Gelegenheit, an einigen groß angelegten Vue-Anwendungen zu arbeiten. Die Projekte, von denen ich spreche, haben mehr als 12 Vuex-Stores, eine große Anzahl von Komponenten (manchmal Hunderte) und viele Ansichten (Seiten). Für mich war es tatsächlich eine sehr lohnende Erfahrung, da ich viele interessante Muster entdeckt habe, um den Code erweiterbar zu machen. Ich musste auch einige schlechte Praktiken beheben, die zum berühmten Spaghetticode-Problem führten

Deshalb werde ich Ihnen heute die 10 besten Vorgehensweisen verraten, die Sie meiner Meinung nach befolgen sollten, wenn Sie mit einer großen Codebasis arbeiten.

1. Nutzen Sie Slots, um Komponenten verständlicher und leistungsfähiger zu machen

Eines Tages musste ich einfach ein Popup erstellen. Auf den ersten Blick gibt es nichts wirklich Kompliziertes, nur einen Titel, eine Beschreibung und einige Schaltflächen. Ich werde also alles als Attribute behandeln. Schließlich habe ich drei Eigenschaften verwendet, um die Komponente so anzupassen, dass sie ein Ereignis ausgibt, wenn jemand auf die Schaltfläche klickt. So einfach geht das! :schwitzendes Lächeln:

Als das Projekt jedoch weiter wuchs, bat uns das Team, viele weitere neue Dinge darin anzuzeigen: Formularfelder, verschiedene Schaltflächen (je nachdem, auf welcher Seite sie angezeigt wurden), Karten, Fußzeilen und Listen. Ich habe festgestellt, dass es anscheinend funktionierte, wenn ich weiterhin Eigenschaften verwendete, um diese Komponente zu erweitern. Aber Gott, :weary: ich habe mich geirrt! Die Komponente wurde schnell zu komplex, um sie zu verstehen, da sie unzählige Unterkomponenten enthielt, zu viele Eigenschaften verwendete und eine große Anzahl von Ereignissen ausgab. :volcano: Ich habe diese schreckliche Situation erlebt: Wenn man irgendwo eine Änderung vornimmt, führt dies irgendwie dazu, dass auf einer anderen Seite etwas anderes kaputt geht. Ich habe ein Frankenstein-Monster statt einer wartbaren Komponente gebaut!

Wenn ich mich jedoch von Anfang an auf Spielautomaten verlassen hätte, wäre es möglicherweise besser gelaufen. Schließlich habe ich alles umgestaltet, um diese kleine Komponente bereitzustellen. Einfacher zu warten, schneller zu verstehen und viel skalierbarer!

<Vorlage>
  <div Klasse="c-base-popup">
    <div v-if="$slots.header" class="c-base-popup__header">
      <slot name="header">
    </div>
    <div v-if="$slots.subheader" class="c-base-popup__subheader">
      <slot name="Unterheader">
    </div>
    <div Klasse="c-base-popup__body">
      <h1>{{ Titel }}</h1>
      <p v-if="Beschreibung">{{ Beschreibung }}</p>
    </div>
    <div v-if="$slots.actions" class="c-base-popup__actions">
      <slot name="Aktionen">
    </div>
    <div v-if="$slots.footer" class="c-base-popup__footer">
      <slot name="Fußzeile">
    </div>
  </div>
</Vorlage>
<Skript> exportiere Standard {
  Requisiten: {
    Beschreibung:
      Typ: Zeichenfolge,
      Standard: null
    },
    Titel:
      Typ: Zeichenfolge,
      erforderlich: true
    }
  }
} </script> 

Mein Punkt ist, dass die Erfahrung zeigt, dass Projekte, die von Entwicklern erstellt werden, die wissen, wann Slots zu verwenden sind, einen großen Einfluss auf ihre zukünftige Wartbarkeit haben. Dadurch wird die Anzahl der ausgegebenen Ereignisse verringert, der Code wird leichter verständlich und es ist mehr Flexibilität bei der Anzeige der gewünschten Komponenten möglich.

Als Faustregel gilt: Wenn Sie die Eigenschaften einer untergeordneten Komponente in der übergeordneten Komponente duplizieren, sollten Sie von diesem Punkt an Slots verwenden.

2. Organisieren Sie Ihren Vuex-Store richtig

Häufig beginnen neue Vue.js -Entwickler mit dem Erlernen Vuex , weil sie über die folgenden zwei Probleme stolpern:

• Sie müssen entweder auf Daten einer bestimmten Komponente von einer anderen Komponente zugreifen, die in der Baumstruktur physisch zu weit entfernt ist, oder
• Sie benötigen Daten, um die Zerstörung von Komponenten zu überstehen.

Dann erstellen sie ihren ersten Vuex -Store, lernen Module kennen und beginnen, diese in ihrer Anwendung zu organisieren.

Das Problem besteht darin, dass es beim Erstellen von Modulen kein einheitliches Muster gibt. Ich empfehle Ihnen jedoch dringend, darüber nachzudenken, wie Sie sie organisieren möchten. So wie ich es verstehe, ziehen es die meisten Entwickler vor, sie nach Funktionalität zu organisieren. Zum Beispiel:

• Bestätigungscode
• Blog
• Posteingang
• aufstellen

Ich für meinen Teil finde sie leichter verständlich, wenn sie entsprechend dem Datenmodell organisiert sind, das sie aus der API extrahieren. Zum Beispiel:

• Anzahl der Benutzer
• Team
• Nachrichteninhalt
• Widgets
• Artikel

Für welche Sie sich entscheiden, bleibt Ihnen überlassen. Das Einzige, was Sie bedenken müssen, ist, dass ein gut organisierter Vuex -Store Ihr Team auf lange Sicht produktiver macht. Dadurch fällt es auch Neulingen leichter, sich mit Ihrer Codebasis vertraut zu machen, sobald sie Ihrem Team beitreten.

3. Verwenden Sie Vuex Actions, um API-Aufrufe zu tätigen und Daten zu übermitteln

Die meisten, wenn nicht alle meiner API-Aufrufe werden in meinen Vuex vuex actions durchgeführt. Sie fragen sich vielleicht: Warum ist dieser Anruf besser?

Einfach, weil die meisten von ihnen Daten extrahieren, die ich im Speicher ( vuex store ) übermitteln muss. Darüber hinaus bieten sie Kapselung und Wiederverwendbarkeit, was mir sehr gefällt. Ich tue dies aus einigen anderen Gründen:

• Wenn ich die Titelseite eines Artikels an zwei verschiedenen Stellen benötigen (z. B. in einem Blog und auf der Titelseite), kann ich den entsprechenden Dispatcher mit den richtigen Parametern aufrufen. Die Daten werden abgerufen, übermittelt und zurückgegeben, ohne dass außer den Scheduler-Aufrufen eine Code-Duplizierung erfolgt.
• Wenn ich eine Logik erstellen muss, um zu vermeiden, dass sie abgerufen wird, wenn die erste Seite abgerufen wird, kann ich dies an einer Stelle tun. Abgesehen davon, dass es die Belastung meines Servers reduziert, bin ich zuversichtlich, dass es überall funktionieren wird.
• Ich kann die meisten meiner Mixpanel-Ereignisse in diesen Aktionen (Vuex-Aktionen) verfolgen, wodurch die Analyse-Codebasis wirklich einfach zu pflegen ist. Ich habe einige Anwendungen, bei denen alle Mixpanel-Aufrufe einzeln in Aktionen erfolgen. :joy: Wie viel Freude es mir macht, auf diese Weise zu arbeiten, wenn ich nicht im Auge behalten muss, was ich verfolgen soll und was nicht und wann ich es senden soll.

Übersetzungshinweis: Mixpanel ist ein Datenverfolgungs- und -analyseunternehmen, das Entwicklern die Verfolgung verschiedener Benutzerverhalten ermöglicht, z. B. die Anzahl der von Benutzern aufgerufenen Seiten, iPhone App-Analysen, Facebook App-Interaktionen und E-Mail-Analysen. Ein Point-of-Use-Analysetool ähnlich wie Firebase .

4. Verwenden Sie mapState, mapGetters, mapMutations und mapAction, um die Codebasis zu vereinfachen

Normalerweise ist es nicht erforderlich, mehrere berechnete Eigenschaften oder Methoden zu erstellen, wenn Sie nur auf state/getter zugreifen oder action/mutation innerhalb einer Komponente aufrufen müssen. Die Verwendung von mapState , mapGetters , mapMutations und mapActions kann Ihnen dabei helfen, Ihren Code zu verkürzen, ihn durch Gruppierung zu vereinfachen und sich an einem Ort einen Überblick über Ihr Speichermodul zu verschaffen.

// NPM
importiere { mapState, mapGetters, mapActions, mapMutations } von „vuex“;
Standard exportieren {
  berechnet: {
    // Auf Root-Eigenschaften zugreifen
    ...mapState("mein_Modul", ["Eigenschaft"]),
    // Auf Getter zugreifen
    ...mapGetters("mein_Modul", ["Eigenschaft"]),
    // Auf Nicht-Root-Eigenschaften zugreifen
    ...mapState("mein_Modul", {
      Eigenschaft: Status => Status.Objekt.verschachtelte.Eigenschaft
    })
  },
  Methoden: {
    // Auf Aktionen zugreifen
    ...mapActions("mein_Modul", ["meineAktion"]),
    // Zugriff auf Mutationen
    …mapMutations("mein_Modul", ["meineMutation"])
  }
}; 

Alle nötigen Informationen zu diesen praktischen Helfern finden Sie in der offiziellen Vuex Dokumentation.

5. API Factory verwenden

Normalerweise erstelle ich gerne einen this.$api Helfer, der von überall aufgerufen werden kann, um den API-Endpunkt zu erhalten. Im Stammverzeichnis des Projekts habe ich einen API-Ordner, der alle Klassen enthält (siehe eine davon unten).

API
├── auth.js
├── Benachrichtigungen.js
└── teams.js 

Jeder Knoten gruppiert alle Endpunkte seiner Kategorie. So initialisiere ich dieses Muster in einer Nuxt App mithilfe eines Plug-Ins (dies ist dem Vorgang in einer Standard-Vue-App sehr ähnlich).

// PROJEKT: API
Auth von "@/api/auth" importieren;
importiere Teams aus "@/api/teams";
Benachrichtigungen von „@/api/notifications“ importieren;
exportiere Standard (Kontext, einfügen) => {
  wenn (Prozess.Client) {
    const token = localStorage.getItem("token");
    // Token setzen, wenn definiert
    wenn (Token) {
      Kontext.$axios.setToken(token, "Träger");
    }
  }
  // API-Repositorys initialisieren
  const-Repositorys = {
    auth: Auth(Kontext.$axios),
    Teams: Teams(Kontext.$axios),
    Benachrichtigungen: Benachrichtigungen (Kontext.$axios)
  };
  injizieren("API", Repositories);
}; 

exportiere Standard $axios => ({
  Passwort vergessen (E-Mail) {
    return $axios.$post("/auth/password/forgot", { email });
  },
  login(email, passwort) {
    return $axios.$post("/auth/login", { E-Mail, Passwort });
  },
  abmelden() {
    $axios.$get("/auth/logout");
  },
  registrieren(Nutzlast) {
    gibt $axios.$post("/auth/register", Nutzlast) zurück;
  }
}); 

Jetzt kann ich sie einfach in meinen Komponenten oder Vuex-Aktionen wie folgt aufrufen:

Standard exportieren {
  Methoden: {
    beim Absenden() {
      versuchen {
        dies.$api.auth.login(diese.E-Mail, dieses.Passwort);
      } Fehler abfangen {
        konsole.fehler(fehler);
      }
    }
  }
}; 

6. Verwenden Sie $config, um auf Ihre Umgebungsvariablen zuzugreifen (besonders nützlich in Vorlagen).

Ihr Projekt hat wahrscheinlich einige globale Konfigurationsvariablen, die in einer Datei definiert sind:

Konfiguration
├── entwicklung.json
└── Produktion.json 

Ich greife gerne schnell über this.$config Helfer darauf zu, insbesondere wenn ich mich in einer Vorlage befinde. Wie immer ist die Erweiterung des Vue-Objekts sehr einfach:

// NPM
importiere Vue von „vue“;
// PROJEKT: COMMONS
importiere Entwicklung aus "@/config/development.json";
importiere Produktion aus "@/config/production.json";
wenn (Prozess.env.NODE_ENV === "Produktion") {
  Vue.prototype.$config = Objekt.freeze(Produktion);
} anders {
  Vue.prototype.$config = Objekt.freeze(Entwicklung);
} 

7. Befolgen Sie eine Konvention zum Schreiben von Commit-Kommentaren

Wenn Ihr Projekt wächst, möchten Sie regelmäßig den Commit-Verlauf Ihrer Komponenten durchsuchen. Wenn Ihr Team beim Schreiben seiner Commit-Nachrichten nicht dieselben Konventionen befolgt, ist es schwierig zu verstehen, was die einzelnen Teammitglieder tun.

Ich verwende und empfehle immer Angular commit -Nachrichten. Ich halte mich bei jedem Projekt, an dem ich arbeite, daran und in vielen Fällen stellen auch andere Teammitglieder schnell fest, dass es besser ist, sich ebenfalls daran zu halten.

Das Befolgen dieser Richtlinien führt zu besser lesbaren Nachrichten und erleichtert die Nachverfolgung von Commits beim Überprüfen des Projektverlaufs. Kurz gesagt, so funktioniert es:

git commit -am "<Typ>(<Umfang>): <Betreff>"
# Hier sind einige Beispiele
git commit -am "docs(changelog): Änderungsprotokoll auf Beta.5 aktualisieren"
git commit -am "fix(release): muss von den neuesten rxjs und zone.js abhängig sein" 

Werfen Sie einen Blick auf die README Datei, um mehr über die Konventionen zu erfahren.

8. Frieren Sie die Version des Pakets immer ein, wenn Sie das Projekt erstellen

Ich weiß ... alle Pakete sollten den Regeln der semantischen Versionierung folgen. Die Realität sieht jedoch so aus, dass dies bei einigen von ihnen nicht der Fall ist. :schwitzendes Lächeln:

Damit Sie nicht mitten in der Nacht aufwachen, weil eine Ihrer Abhängigkeiten Ihr gesamtes Projekt beschädigt hat, können Sie Ihre Morgen mit dem Sperren der Versionen aller Ihrer Pakete weniger stressig gestalten. :unschuldig:

Die Bedeutung ist einfach: Vermeiden Sie die Verwendung der Version, die mit ^ beginnt:

{
  "Name": "mein Projekt",
  "version": "1.0.0",
  "privat": wahr,
  "Abhängigkeiten": {
    "axios": "0,19,0",
    "imagemin-mozjpeg": "8.0.0",
    "imagemin-pngquant": "8.0.0",
    "imagemin-svgo": "7.0.0",
    "nuxt": "2.8.1",
  },
  "devAbhängigkeiten": {
    "autoprefixer": "9.6.1",
    "babel-eslint": "10.0.2",
    "eslint": "6.1.0",
    "eslint-friendly-formatter": "4.0.1",
    "eslint-loader": "2.2.1",
    "eslint-plugin-vue": "5.2.3"
  }
} 

9. Verwenden Sie die virtuelle Bildlaufleiste von Vue, wenn Sie große Datenmengen anzeigen

Wenn Sie auf einer bestimmten Seite viele Zeilen anzeigen oder eine große Datenmenge durchlaufen müssen, haben Sie möglicherweise bemerkt, dass die Seite sehr schnell gerendert wird. Um dieses Problem zu beheben, können Sie vue-virtual-scoller verwenden.

npm installiere vue-virtual-scroller 

Es werden nur die sichtbaren Elemente in der Liste gerendert und Komponenten und DOM-Elemente werden wiederverwendet, um es so effizient wie möglich zu machen. Es ist wirklich einfach zu verwenden und gleitet sehr sanft

<Vorlage>
  <RecycleScroller
    Klasse="Scroller"
    :items="Liste"
    :Artikelgröße="32"
    Schlüsselfeld="id"
    v-slot="{ Element }"
  >
    <div Klasse="Benutzer">
      {{ Artikelname }}
    </div>
  </RecycleScroller>
</Vorlage> 

10. Verfolgen Sie die Größe von Drittanbieterpaketen

Wenn viele Leute an einem Projekt arbeiten, kann die Anzahl der installierten Pakete schnell eine unglaubliche Menge erreichen, wenn niemand ein Auge darauf hat. Um eine Verlangsamung Ihrer App zu vermeiden (insbesondere bei langsamen Mobilfunknetzen), verwende ich das Paket „import-expense“ in Visual Studio Code . Auf diese Weise kann ich direkt vom Editor aus sehen, wie groß meine importierte Modulbibliothek ist, und kann erkennen, was schief gelaufen ist, als meine importierte Modulbibliothek zu groß wurde.

Beispielsweise habe ich in einem aktuellen Projekt die gesamte Lodash-Bibliothek importiert (um ca. 24 KB minimiert). Das Problem besteht darin, dass im Projekt nur eine Methode, cloneDeep verwendet wird. Nachdem wir dieses Problem im Importausgabenpaket festgestellt hatten, haben wir es folgendermaßen gelöst:

npm entfernt lodash
npm installiere lodash.clonedeep 

Anschließend können Sie die Funktion clonedeep bei Bedarf importieren:

importiere cloneDeep aus „lodash.clonedeep“; 
JavaScript

Zur weiteren Optimierung können Sie auch das Webpack Bundle Analyzer Paket verwenden, um die Größe der Webpack Ausgabedateien durch eine interaktive, zoombare Treemap zu visualisieren.

Damit ist dieser Artikel über 10 Best Practices zum Erstellen und Warten großer Vue.js-Projekte abgeschlossen. Weitere praktische Inhalte zum Erstellen und Warten von Vue.js-Projekten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!