Nachdem wir die Vorteile von Vue.js in diesem Beitrag veranschaulicht haben, wollen wir heute zeigen, wie wir Vue.js in bereits existierende Projekte integriert haben. Unsere Erfahrung zeigt uns, dass das ohne Probleme und mit nur wenig Aufwand möglich ist. Wenn man einige Dinge dabei beachtet, kann man die gesamten Vorteile von Vue.js nutzen und den Entwicklungsprozess enorm beschleunigen.
Vue.js ist ein fantastisches Werkzeug für die effiziente Webentwicklung. Ein großer Vorteil von Vue.js: Wir können uns auf die Bearbeitung von Daten fokussieren. Vue.js übernimmt die Anzeige und die Eingaben des Nutzers. Dabei arbeitet das Framework so performant, dass es gar nicht weiter auffällt.
Vue.js einbinden
Zunächst müssen wir Vue.js in das Projekt einbinden. Dies geschieht am einfachsten über das script-Tag. Falls ein CMS oder ein Projektmanagement-Tool verwendet wird, sollte dies natürlich dort integriert werden.
Nun können wir Vue-Objekte instanziieren.
const vueObject = new Vue({
el: '#id',
data: () => {
// variables...
},
computed: {
// getter and setter functions
},
methods: {
// methods...
}
});
Wichtig hierbei ist, dass wir den Code ausführen, bevor der Rest des Skriptes ausgeführt wird. Vue.js rendert den entsprechenden Abschnitt unter el nochmals neu. Alle bestehenden Event Handler werden gelöscht. Es empfiehlt sich, eine neue Javascript Datei zu erstellen, die vor dem eigentlichen Skript ausgeführt wird.
Komponenten finden
Nun könnten wir einfach ein Vue-Objekt für die gesamte Webseite instanziieren und dieses übernimmt alle unsere neuen Aufgaben. Am besten ist es allerdings, wenn wir uns kurz Zeit nehmen und unsere Applikation genauer unter die Lupe nehmen. Denn: Bei großen Applikationen kann das Vue-Objekt schnell sehr groß und unübersichtlich werden. Die Vorteile wären somit wieder dahin. Besser ist es, wenn wir in unserer Applikation unabhängige Komponenten finden und neue Funktionen als solche verpacken.
Diese unabhängigen Komponenten bündeln einen Teil der Funktionalität. So müssen wir keine Angst haben, etwas an der Komponenten zu ändern, da diese größtenteils alleine arbeiten. Hierzu mal einpaar Beispiele:
Beispiel für mögliche Vue-Komponenten
Aus alt macht neu
Wenn wir alte Funktionen erweitern oder gar durch Vue.js ersetzen möchten, ist das ganz einfach möglich. Angenommen wir haben eine einfache Suche und möchten eine Filterfunktion hinzufügen. Hierfür müssen wir nur unser Vue-Objekt anlegen und es an die Suche binden. Die Suche funktioniert jetzt immer noch genauso wie vorher. Aber wir können nun unsere neue Filterfunktion nutzen. Dabei kann man gleich alte Strukturen wie Event Handler oder besondere Variablen kopieren.
Das Gute daran ist, dass wir alte Funktionen nicht sofort in das Objekt packen müssen, sondern nur Schritt für Schritt – oder auch gar nicht.
Kommunikation zwischen Komponenten
Ganz allein können die einzelnen Komponenten nicht arbeiten. Beispielsweise muss bei der Auswahl eines Suchergebnisses auch etwas angezeigt werden. D.h. die Suche muss unserer Hauptansicht mitteilen, was genau angezeigt werden soll. Hierfür gibt es verschiedene Wege, wie z.B. Custom Events.
Am besten ist es allerdings einen geteilten Speicher zu verwenden, wie Vuex. Somit müssen wir das Suchergebnis lediglich in eine Variable schreiben und die Hauptansicht kann diese verwenden. Vue.js verändert automatisch alle Werte in der Hauptansicht, die einen Bezug zu unserer geteilten Variable haben.
Fazit
Vue.js lässt sich leicht in bestehende Projekte einarbeiten, wenn wir unser Projekt analysieren und in einzelne Komponenten unterteilen. Diese können ohne Probleme in Vue.js übersetzt werden, wenn die Objekte instanziiert werden bevor der Rest des Skripts ausgeführt wird. Neue Funktionalität kann hinzugefügt werden, ohne die bisherige stark verändern zu müssen. Das Framework kann somit in jedem Projekt Anwendung finden und sollte nicht wegen eines vermeintlich hohen Refactoring-Aufwands aussortiert werden.
Weitere Tipps findet ihr übrigens auch in der offiziellen Dokumentation von Vue.js.
Habt ihr weitere Tipps zur Integration von Vue.js oder braucht Hilfe bei dem Thema? Dann schreibt uns gerne einen Kommentar oder nehmt Kontakt mit uns auf. Wir stehen euch gerne mit Rat & Tat um dieses und weitere Webentwickler-Themen zur Seite.
