Lasst uns einen benutzerdefinierten Vue Router bauen

Es gibt unzählige Tutorials, die hervorragend erklären, wie die offizielle Routing-Bibliothek von Vue, vue-router, in eine bestehende Vue-Anwendung integriert werden kann. vue-router leistet hervorragende Arbeit, indem es uns die notwendigen Elemente zur Verfügung stellt, um die Komponenten einer Anwendung verschiedenen Browser-URL-Routen zuzuordnen.

Aber einfache Anwendungen benötigen oft keine vollwertige Routing-Bibliothek wie vue-router. In diesem Artikel bauen wir einen einfachen benutzerdefinierten Client-Side-Router mit Vue. Dadurch gewinnen wir ein Verständnis dafür, was für die Erstellung von Client-Side-Routing zu behandeln ist und wo potenzielle Mängel bestehen können.

Obwohl dieser Artikel grundlegende Kenntnisse in Vue.js voraussetzt, werden wir die Dinge gründlich erklären, während wir mit dem Schreiben des Codes beginnen!

Routing

Zuerst und vor allem: Definieren wir Routing für diejenigen, die mit dem Konzept vielleicht noch nicht vertraut sind.

In der Webentwicklung bezieht sich Routing oft auf die Aufteilung der UI einer Anwendung basierend auf Regeln, die sich aus der Browser-URL ableiten. Stellen Sie sich vor, Sie klicken auf einen Link und die URL ändert sich von https://website.com zu https://website.com/article/. Das ist Routing.

Routing wird oft in zwei Hauptkategorien eingeteilt

• Server-Side-Routing: Der Client (d.h. der Browser) sendet bei *jeder URL-Änderung* eine Anfrage an den Server.
• Client-Side-Routing: Der Client sendet *nur* bei der initialen Seitenladung eine Anfrage an den Server. Alle Änderungen an der UI der Anwendung basierend auf URL-Routen werden dann auf dem Client behandelt.

Client-Side-Routing ist, wo der Begriff Single-Page Application (oder kurz SPA) ins Spiel kommt. SPAs sind Web-Apps, die *nur einmal* geladen werden und sich bei Benutzerinteraktion *dynamisch* aktualisieren, ohne dass nachfolgende Anfragen an den Server erforderlich sind. Beim Routing in SPAs ist *JavaScript die treibende Kraft*, die verschiedene UIs dynamisch rendert.

Nachdem wir nun ein kurzes Verständnis von Client-Side-Routing und SPAs haben, geben wir uns einen Überblick über das, was wir tun werden!

Fallstudie: Pokémon

Die Anwendung, die wir erstellen möchten, ist eine einfache Pokémon-App, die Details zu einem bestimmten Pokémon basierend auf der URL-Route anzeigt.

Die Anwendung wird drei eindeutige URL-Routen haben: /charizard, /blastoise und /venusaur. Je nach eingegebener URL-Route wird ein anderes Pokémon angezeigt

Zusätzlich gibt es am unteren Rand der Anwendung Footer-Links, die den Benutzer bei Klick zu jeder jeweiligen Route leiten

Brauchen wir das überhaupt zum Routen?

Für einfache Anwendungen wie diese benötigen wir nicht unbedingt einen Client-Side-Router, um unsere App funktionsfähig zu machen. Diese spezielle App könnte aus einer einfachen Hierarchie von Eltern-Kind-Komponenten bestehen, die Vue Props verwendet, um die anzuzeigenden Informationen zu diktieren. Hier ist ein Pen, der genau das zeigt

Siehe den Pen Vue Pokemon von Hassan Dj (@itslit) auf CodePen.

Obwohl die App funktional funktionieren würde, fehlt ihr ein wesentliches Merkmal, das von den meisten Webanwendungen erwartet wird – *das Reagieren auf Browser-Navigationsereignisse*. Wir möchten, dass unsere Pokémon-App zugänglich ist und verschiedene Details für verschiedene Pfadnamen anzeigt: /charizard, /blastoise und /venusaur. Dies würde es den Benutzern ermöglichen, verschiedene Seiten zu aktualisieren und ihren Standort in der App beizubehalten, die URLs zu bookmarken, um später darauf zurückzukommen, und die URL möglicherweise mit anderen zu teilen. Dies sind einige der Hauptvorteile der Erstellung von Routen innerhalb einer Anwendung.

Nachdem wir nun eine Vorstellung davon haben, was wir tun werden, fangen wir an zu bauen!

Vorbereitung der App

Der einfachste Weg, Schritt für Schritt zu folgen (wenn Sie möchten), ist das Klonen des GitHub-Repos, das ich eingerichtet habe.

Auf GitHub herunterladen

Nach dem Klonen installieren Sie die Projekt-Abhängigkeiten mit

npm install

Werfen wir einen kurzen Blick in das Projektverzeichnis.

$ ls
README.md
index.html
node_modules/
package.json
public/
src/
static/
webpack.config.js

Es gibt auch die versteckten Dateien .babelrc und .gitignore im Projektgerüst.

Dieses Projekt ist eine einfache webpack-konfigurierte Anwendung, die mit vue-cli, dem Kommandozeilen-Interface von Vue, eingerichtet wurde.

index.html ist, wo wir das DOM-Element – #app – deklarieren, mit dem wir unsere Vue-Anwendung montieren werden

    <script src="/dist/build.js"></script>
  

Im -Tag der index.html-Datei führen wir Bulma als CSS-Framework unserer Anwendung und unsere eigene styles.css-Datei ein, die sich im public/-Ordner befindet.

Da unser Fokus auf der Verwendung von Vue.js liegt, ist die Anwendung bereits mit dem gesamten benutzerdefinierten CSS versehen.

Der src/-Ordner ist, wo wir direkt arbeiten werden

$ ls src/
app/
main.js

src/main.js repräsentiert den Startpunkt unserer Vue-Anwendung. Hier wird unsere Vue-Instanz instanziiert, hier deklarieren wir die Elternkomponente, die gerendert werden soll, und das DOM-Element #app, an dem unsere App gemountet werden soll

import Vue from 'vue';
import App from './app/app';

new Vue({
  el: '#app',
  render: h => h(App)
});

Wir geben die App-Komponente aus der Datei src/app/app.js als Hauptelternkomponente unserer Anwendung an.

Im Verzeichnis src/app gibt es zwei weitere Dateien – app-custom.js und app-vue-router.js

$ ls src/app/
app-custom.js
app-vue-router.js
app.js

app-custom.js bezeichnet die abgeschlossene Implementierung der Anwendung mit einem benutzerdefinierten Vue-Router (d. h. dem, was wir in diesem Artikel bauen werden). app-vue-router.js ist eine abgeschlossene Routing-Implementierung, die die vue-router-Bibliothek verwendet.

Für den gesamten Artikel werden wir nur Code in die Datei src/app/app.js einfügen. Mit dem gesagt, schauen wir uns den Startcode in src/app/app.js an

const CharizardCard = {
  name: 'charizard-card',
  template: `

  `
};

const App = {
  name: 'App',
  template: `

  `,
  components: {
    'pokemon-card': CharizardCard
  }
};

export default App;

Derzeit existieren zwei Komponenten: CharizardCard und App. Die CharizardCard-Komponente ist eine einfache Vorlage, die Details des Pokémon Glurak anzeigt. Die App-Komponente deklariert die CharizardCard-Komponente in ihrer components-Eigenschaft und rendert sie als in ihrer template.

Wir haben derzeit nur statische Inhalte, mit denen wir sehen können, ob wir unsere Anwendung ausführen

npm run dev

Und starten localhost:8080

Um loszulegen, führen wir zwei neue Komponenten ein: BlastoiseCard und VenusaurCard, die Details von Schiggy und Bisaflor bzw. enthalten. Wir können diese Komponenten direkt nach CharizardCard anordnen

const CharizardCard = { 
  // ... 
};

const BlastoiseCard = {
  name: 'blastoise-card',
  template: `

  `
};

const VenusaurCard = {
  name: 'venusaur-card',
  template: `

  `
};

const App = { 
  // ... 
};

export default App;

Mit unseren Anwendungs-Komponenten können wir nun darüber nachdenken, wie wir das Routing zwischen diesen Komponenten erstellen werden.

router-view

Um das Routing zu etablieren, beginnen wir mit dem Bau einer neuen Komponente, die die Verantwortung trägt, *eine angegebene Komponente basierend auf dem Standort der App zu rendern*. Wir werden diese Komponente in einer Konstantenvariable namens View erstellen.

Bevor wir diese Komponente erstellen, sehen wir, wie wir sie verwenden könnten. In der template der App-Komponente entfernen wir die Deklaration von und rendern stattdessen die kommende router-view-Komponente. In der components-Eigenschaft registrieren wir die Konstante View als , die in der Vorlage deklariert werden soll.

const App = {
  name: 'App',
  template: `

 
  `,
  components: {
    'router-view': View
  }
};

export default App;

Die router-view-Komponente wird die richtige Pokémon-Komponente basierend auf der URL-Route abgleichen. Dieser Abgleich wird in einem routes-Array diktiert, das wir erstellen werden. Wir erstellen dieses Array direkt über der App-Komponente

const CharizardCard = { 
  // ... 
};
const BlastoiseCard = { 
  // ... 
};
const VenusaurCard = { 
  // ... 
};

const routes = [
  {path: '/', component: CharizardCard},
  {path: '/charizard', component: CharizardCard},
  {path: '/blastoise', component: BlastoiseCard},
  {path: '/venusaur', component: VenusaurCard}
];

const App = { 
  // ... 
};

export default App;

Wir haben jeden Pokémon-Pfad seiner jeweiligen Komponente zugeordnet (z. B. rendert /blastoise die BlastoiseCard-Komponente). Wir haben auch den Stamm-Pfad / der CharizardCard-Komponente zugeordnet.

Beginnen wir nun mit der Erstellung unserer router-view-Komponente.

Die router-view-Komponente wird im Wesentlichen ein *Montagepunkt* sein, um dynamisch zwischen Komponenten zu wechseln. Eine Möglichkeit, dies in Vue zu tun, ist die Verwendung des reservierten -Elements, um dynamische Komponenten zu etablieren.

Lassen Sie uns einen Startpunkt für router-view erstellen, um zu verstehen, wie das funktioniert. Wie bereits erwähnt, werden wir router-view innerhalb einer Konstantenvariable namens View erstellen. Mit dem gesagt, richten wir View direkt nach unserer Routendeklaration ein

const CharizardCard = { 
  // ... 
};
const BlastoiseCard = { 
  // ... 
};
const VenusaurCard = { 
  // ... 
};

const routes = [
  // ...
];

const View = {
  name: 'router-view',  
  template: ``,  
  data() {  
    return {  
      currentView: CharizardCard  
    }
  }
}; 

const App = {
// ... 
};

export default App;

Das reservierte -Element rendert jede Komponente, an die das Attribut is gebunden ist. Oben haben wir das Attribut is an eine currentView-Daten-Eigenschaft angehängt, die einfach auf die CharizardCard-Komponente abgebildet wird. Derzeit ähnelt unsere Anwendung dem Ausgangspunkt, indem sie CharizardCard anzeigt, unabhängig davon, welche URL-Route aktiv ist.

Obwohl router-view nun ordnungsgemäß innerhalb von App gerendert wird, ist es derzeit nicht dynamisch. Wir benötigen router-view, um die richtige Komponente basierend auf dem URL-Pfadnamen *beim Laden der Seite* anzuzeigen. Dazu verwenden wir den created()-Hook, um das routes-Array zu filtern und die Komponente zurückzugeben, deren path mit dem URL-Pfad übereinstimmt. Dadurch würde View etwa so aussehen

const View = {
  name: 'router-view',  
  template: ``,  
  data() {  
    return {  
      currentView: {}  
    }
  },
  created() {
    this.currentView = routes.find(
      route => route.path === window.location.pathname
    ).component;
  }
};

In der data-Funktion instanziieren wir nun currentView mit einem leeren Objekt. Im created()-Hook verwenden wir die native find()-Methode von JavaScript, um das erste Objekt aus routes zurückzugeben, das route.path === window.location.pathname entspricht. Wir können die Komponente dann mit object.component (wobei object das von find() zurückgegebene Objekt ist) erhalten.

Innerhalb einer Browserumgebung ist window.location ein spezielles Objekt, das die Eigenschaften des aktuellen Browserstandorts enthält. Wir greifen auf das pathname von diesem Objekt zu, welches der Pfad der URL ist.

An dieser Stelle; werden wir in der Lage sein, die verschiedenen Pokémon Card Komponenten basierend auf dem Zustand der Browser-URL zu sehen!

Es gibt noch etwas zu beachten. Wenn ein zufälliger URL-pathname eingegeben wird, wird unsere App derzeit einen Fehler ausgeben und nichts anzeigen.

Um dies zu vermeiden, führen wir eine einfache Prüfung ein, um eine "Nicht gefunden"-Vorlage anzuzeigen, wenn der URL-pathname mit keinem path im routes-Array übereinstimmt. Wir trennen die find()-Methode in eine Komponentenmethode namens getRouteObject(), um Wiederholungen zu vermeiden. Dies aktualisiert das View-Objekt zu

const View = {
  name: 'router-view',  
  template: ``,  
  data() {  
    return {  
      currentView: {}  
    }
  },
  created() {  
    if (this.getRouteObject() === undefined) {
      this.currentView = {
        template: `

Nicht gefunden :(. Wähle ein Pokémon aus der Liste unten!

        `
      };
    } else {
      this.currentView = this.getRouteObject().component;
    } 
  },
  methods: {
    getRouteObject() {
      return routes.find(
        route => route.path === window.location.pathname
      );
    }
  }
};

Wenn die Methode getRouteObject() undefined zurückgibt, zeigen wir eine "Nicht gefunden"-Vorlage an. Wenn getRouteObject() ein Objekt aus routes zurückgibt, binden wir currentView an die Komponente dieses Objekts. Wenn nun eine zufällige URL eingegeben wird, wird der Benutzer benachrichtigt

Die Vorlage "Nicht gefunden" fordert den Benutzer auf, ein Pokémon aus einer Liste auszuwählen. Diese Liste sind die Links, die wir erstellen werden, um dem Benutzer die Navigation zu verschiedenen URL-Routen zu ermöglichen.

Großartig! Unsere App reagiert nun auf externen Zustand, den Standort des Browsers. router-view bestimmt, welche Komponente basierend auf dem Standort der App angezeigt werden soll. Jetzt müssen wir Links erstellen, die *den Standort des Browsers ändern, ohne eine Webanfrage zu stellen*. Mit dem aktualisierten Standort möchten wir unsere Vue-App neu rendern und uns auf router-view verlassen, um die zu rendernde Komponente entsprechend zu bestimmen.

Wir werden diese Links als router-link-Komponenten bezeichnen.

router-link

In Weboberflächen verwenden wir HTML -Tags, um Links zu erstellen. Was wir hier wollen, ist eine spezielle Art von -Tag. Wenn der Benutzer auf diesen Tag klickt, möchten wir, dass der Browser seine Standardroutine überspringt, eine Webanfrage zu stellen, um die nächste Seite abzurufen. Stattdessen möchten wir nur den Standort des Browsers manuell aktualisieren.

Lassen Sie uns eine router-link-Komponente erstellen, die ein -Tag mit einem speziellen click-Binding erzeugt. Wenn der Benutzer auf die router-link-Komponente klickt, verwenden wir die History API des Browsers, um den Standort des Browsers zu aktualisieren.

Genau wie bei router-view sehen wir uns an, wie wir diese Komponente verwenden werden, bevor wir sie bauen.

In der Vorlage der App-Komponente erstellen wir drei -Elemente innerhalb eines übergeordneten

<code>

-Element. Anstatt das href-Attribut in zu verwenden, geben wir den gewünschten Speicherort des Links mit einem to-Attribut an. Wir registrieren auch die kommende router-link-Komponente (aus einer Konstantenvariable Link) in der App components-Eigenschaft

const App = {
  name: 'App',
  template: `

  `,
  components: {
    'router-view': View,
    'router-link': Link
  }
};

Wir erstellen das Link-Objekt, das router-link repräsentiert, direkt über der App-Komponente. Wir haben festgelegt, dass die router-link-Komponente immer ein to-Attribut (d. h. eine Prop) mit dem Wert des Zielstandorts erhalten sollte. Wir können diese Anforderung zur Prop-Validierung wie folgt erzwingen

const CharizardCard = { 
 // ... 
};
const BlastoiseCard = { 
  // ... 
};
const VenusaurCard = { 
  // ... 
};

const routes = [ 
  // ... 
];

const View = { 
  // ... 
};

const Link = {
  name: 'router-link',
  props: {
    to: {
      type: String,
      required: true
    }
  }
};

const App = { 
  // ... 
};

export default App;

Wir können die template von router-link so gestalten, dass sie aus einem -Tag mit einem @click-Handler-Attribut besteht. Bei Auslösung ruft der @click-Handler eine Komponentenmethode namens navigate() auf, die den Browser zum gewünschten Speicherort navigiert. Diese Navigation erfolgt mit der history.pushState()-Methode. Mit dem gesagt, wird das Link-Konstantenobjekt aktualisiert zu

const Link = {
  name: 'router-link',
  props: {
    to: {
      type: String,
      required: true
    }
  },
  template: `{{ to }}`,
  methods: {  
    navigate(evt) {  
      evt.preventDefault();  
      window.history.pushState(null, null, this.to);  
    }
  }
};

Innerhalb des -Tags binden wir den Wert der to-Prop an den Textinhalt des Elements mit {{ to }}.

Wenn navigate() ausgelöst wird, ruft es zuerst preventDefault() für das Ereignisobjekt auf, um zu verhindern, dass der Browser eine Webanfrage für den neuen Standort macht. Die Methode history.pushState() wird dann aufgerufen, um den Benutzer zum gewünschten Routenstandort zu leiten. history.pushState() nimmt drei Argumente entgegen

• ein State-Objekt zum Übergeben serialisierter State-Informationen
• ein Titel
• die Ziel-URL

In unserem Fall sind keine State-Informationen erforderlich, daher haben wir das erste Argument als null belassen. Einige Browser (z. B. Firefox) ignorieren derzeit den zweiten Parameter, title, daher haben wir auch diesen als null belassen.

Der Zielstandort, die to-Prop, wird als drittes und letztes Argument übergeben. Da die to-Prop den Zielstandort relativ enthält, wird sie relativ zur aktuellen URL aufgelöst. In unserem Fall wird /blastoise zu https://:8080/blastoise aufgelöst.

Wenn wir jetzt auf einen der Links klicken, werden wir feststellen, dass sich unser Browser ohne vollständiges Neuladen der Seite zum richtigen Standort aktualisiert. Unsere App wird sich jedoch nicht aktualisieren und die richtige Komponente rendern.

Dieses unerwartete Verhalten tritt auf, weil unsere Vue-App nicht über die Änderung informiert wird, wenn router-link den Standort des Browsers aktualisiert. Wir müssen unsere App (oder einfach nur die router-view-Komponente) neu rendern lassen, jedes Mal wenn sich der Standort ändert.

Obwohl es mehrere Möglichkeiten gibt, dieses Verhalten zu erreichen, werden wir dies mithilfe eines benutzerdefinierten EventBus tun. Ein EventBus ist eine Vue-Instanz, die dafür verantwortlich ist, isolierten Komponenten zu erlauben, *benutzerdefinierte Ereignisse* zwischen ihnen zu abonnieren und zu veröffentlichen.

Am Anfang der Datei werden wir die vue-Bibliothek importieren und einen EventBus mit einer neuen Vue()-Instanz erstellen

import Vue from 'vue';

const EventBus = new Vue();

Wenn ein Link angeklickt wurde, müssen wir den notwendigen Teil der Anwendung (d. h. router-view) darüber informieren, dass der Benutzer zu einer bestimmten Route navigiert. Der erste Schritt ist, einen Ereignis-Emitter über die Ereignis-Schnittstelle des EventBus in der navigate()-Methode von router-link zu erstellen. Wir geben diesem benutzerdefinierten Ereignis den Namen navigate

const Link = {
  // ...,
  methods: {
    navigate(evt) {
      evt.preventDefault();
      window.history.pushState(null, null, this.to);
      EventBus.$emit('navigate'); 
    }
  }
};

Wir können nun den Ereignis-Listener/Auslöser im created()-Hook von router-view setzen. Indem wir den benutzerdefinierten Ereignis-Listener außerhalb der if/else-Anweisung setzen, wird der created()-Hook von View wie folgt aktualisiert

const View = {
  // ...,
  created() {  
    if (this.getRouteObject() === undefined) {
      this.currentView = {
        template: `

Nicht gefunden :(. Wähle ein Pokémon aus der Liste unten!

        `
      };
    } else {
      this.currentView = this.getRouteObject().component;
    }

    // Event listener for link navigation
    EventBus.$on('navigate', () => {
      this.currentView = this.getRouteObject().component;
    });
  },
  // ...
};

Wenn sich der Standort des Browsers durch Klicken auf ein -Element ändert, wird diese Listener-Funktion aufgerufen, wodurch router-view neu gerendert wird, um mit der neuesten URL abzugleichen!

Großartig! Unsere App navigiert nun angemessen, wenn wir jeden der Links klicken.

Es gibt noch eine letzte Sache, die wir berücksichtigen müssen. Wenn wir versuchen, die Zurück/Vorwärts-Schaltflächen des Browsers zu verwenden, um durch den Browserverlauf zu navigieren, wird sich unsere Anwendung derzeit nicht korrekt neu rendern. Obwohl unerwartet, tritt dies auf, weil *kein Ereignis-Notifier emittiert wird*, wenn der Benutzer auf *Zurück* oder *Vorwärts* im Browser klickt.

Um dies zu ermöglichen, verwenden wir den onpopstate-Ereignishandler.

Das onpopstate-Ereignis wird jedes Mal ausgelöst, wenn sich der aktive Historieneintrag ändert. Eine Änderung der Historie wird durch Klicken auf die Schaltflächen *Zurück* oder *Vorwärts* im Browser oder durch programmgesteuertes Aufrufen von history.back() oder history.forward() ausgelöst.

Direkt nach der Erstellung unseres EventBus richten wir den onpopstate-Ereignis-Listener ein, um das Navigationsereignis auszulösen, wenn eine Historienänderung ausgelöst wird

window.addEventListener('popstate', () => {  
  EventBus.$emit('navigate');  
});

Unsere Anwendung wird nun auch dann angemessen reagieren, wenn die Navigationsschaltflächen des Browsers verwendet werden!

Und da haben wir es! Wir haben gerade einen benutzerdefinierten Vue-Router mit einem EventBus und dynamischen Komponenten erstellt. Selbst bei der geringen Größe unserer App können wir eine spürbare Leistungssteigerung erzielen. Das Vermeiden eines vollständigen Seitenladens spart Hunderte von Millisekunden und verhindert, dass unsere App während des Seitenwechsels "blinkt".

Fazit

Ich liebe Vue. Ein Grund dafür ist, dass es unglaublich *einfach* ist, Vue-Komponenten zu verwenden und zu manipulieren, so wie wir es in diesem Artikel gesehen haben.

In der Einleitung haben wir erwähnt, wie Vue die vue-router-Bibliothek als offizielle Routing-Bibliothek des Frameworks bereitstellt. Wir haben gerade einfache Versionen derselben Hauptkomponenten erstellt, die in vue-router verwendet werden

• routes: das Array, das für die Zuordnung von Komponenten zu entsprechenden URL-Pfadnamen verantwortlich ist.
• router-view: die Komponente, die eine angegebene App-Komponente basierend auf dem Standort der App rendert
• router-link: die Komponente, die es dem Benutzer ermöglicht, den Standort des Browsers zu ändern, ohne eine Webanfrage zu stellen.

Für *sehr* einfache Anwendungen kann das von uns erstellte Routing (oder eine Variation davon wie diese hier, erstellt von Chris Fritz) die minimale Arbeit leisten, die benötigt wird, um unsere Anwendungen zu routen.

Die vue-router-Bibliothek hingegen ist komplizierter aufgebaut und führt unglaublich nützliche Funktionen ein, die oft in größeren Anwendungen benötigt werden, wie z. B.

• Konsistenz zwischen verschiedenen Browsern
• Verschachtelte Routen
• Navigations-Guards
• Übergangseffekte

Obwohl die vue-router-Bibliothek zusätzlichen Boilerplate-Code mit sich bringt, ist sie relativ einfach zu integrieren, sobald Ihre Anwendung aus gut isolierten und eigenständigen Komponenten besteht. Wenn Sie interessiert sind, können Sie die Komponenten von vue-router, die zur Aktivierung des Routings in dieser Anwendung verwendet werden, hier sehen.

Ich hoffe, das war für Sie genauso angenehm, wie es für mich war, diesen Beitrag zusammenzustellen! Vielen Dank fürs Lesen!

---

Dieser Artikel ist ein angepasstes (und zusammengefasstes) Segment aus dem kommenden Buch, Fullstack Vue, an dem ich mit dem Fullstack.io-Team arbeite! Die Gelegenheit, mit den Leuten von Fullstack zusammenzuarbeiten, war nichts weniger als ein Vergnügen. Im typischen Fullstack-Stil behandelt das Buch zahlreiche Facetten von Vue, einschließlich, aber nicht beschränkt auf Routing, einfaches State-Management, Formularhandhabung, Vuex, Server-Persistenz und Tests. Wenn dies etwas ist, das Ihr Interesse weckt oder wenn Sie überhaupt Fragen haben, folgen Sie mir (oder senden Sie mir eine Nachricht) auf Twitter (@djirdehh)! Wenn das oben Genannte Ihr Interesse nicht weckt, können Sie mir trotzdem folgen. 😛