Jonas Hecht Senior IT Consultant für codecentric

„Bei der Anwendung von Vue.js und Spring Boot wird kein außergewöhnliches Know-how vorausgesetzt und man findet selbst als JavaScript-Anfänger recht schnell in das Projekt-Set-up hinein, das einfach und klar strukturiert ist.“

Mit Vue.js gibt es schon wieder einen neuen Stern am JavaScript-Himmel? Aber wie lässt sich der denn nun wieder in den eigenen Toolstack integrieren? Am Beispiel von Spring Boot als populärem Vertreter moderner Java-Frameworks lässt sich sehr gut zeigen, wie das geht. Eine Einführung in alles, was man zum Leben mit Spring Boot und Vue.js braucht.

Das JavaScript-Framework Vue.js ist gerade in aller Munde. Das kommt natürlich nicht von ungefähr, bietet es doch einen schnellen Einstieg in die Welt der modernen, komponentenbasierten Webframeworks. So hat sich Vue.js schon einen Platz in der Riege der ganz Großen erarbeitet und bietet damit eine Alternative zu Angular und React. Speziell die flachere Lernkurve sowie die höhere Entwicklungsgeschwindigkeit im Vergleich zu den bekannten Vertretern scheint die Entscheidung für Vue.js in vielen Projekten zu begünstigen.

Doch in der Praxis stellt sich natürlich die Frage, wie sich der neue Stern am JavaScript-Himmel in bereits vorhandene Stacks integrieren lässt – allen voran mit dem beliebten Java-Microservices-Framework Spring Boot. Außerdem muss ein vernünftiger (lokaler) Entwicklungsprozess her, damit das Entwickeln flott von der Hand geht. Nicht zuletzt sollten sich beide Frameworks nahtlos in bestehende Continuous-Integrationund-Delivery Pipelines integrieren und entsprechend automatisiert deployed werden können.

Projekt-Set-up

Um dem Leser möglichst umfassend die Nachvollziehbarkeit jedes beschriebenen Punkts zu ermöglichen, findet sich auf GitHub ein vollständiges Beispielprojekt. Es kann auch als Vorlage für erste eigene Projekte auf Basis von Spring Boot und Vue.js dienen. Den Erstkontakt mit den Frameworks hat man als Entwickler meist mit dem Projekt-Set-up. Eine klare Struktur kann hier den Einstieg erleichtern. Das Beispielprojekt bildet eine gewohnte Maven-Projektstruktur ab (Abb. 1).

Abb. 1: Eine klare Projektstruktur kann beim Einstieg helfen

Abb. 1: Eine klare Projektstruktur kann beim Einstieg helfen

Die pom.xml im Hauptordner der Beispielanwendung spring-boot-vuejs enthält somit im Wesentlichen die beiden Maven-Module backend und frontend:

 
<modules>
<module>frontend</module>
<module>backend</module>
</modules>

Die Build-Reihenfolge der beiden Module ist dabei wichtig und sollte nicht geändert werden. Zuerst wird das frontend-Modul gebaut, danach das backend-Modul.

Vue.js Frontend

Um die nächsten Schritte nachvollziehen zu können, wird eine funktionierende Node.js-Installation vorausgesetzt. Mithilfe eines Paketmanagers ist das schnell erledigt. So installiert beispielsweise ein brew install node alles Nötige auf einem Mac. Zusätzlich wird das Vue.js Command Line Interface (CLI) vue-cli (Abb. 2) benötigt, das einfach mit dem Node.js-Paketmanager npm installiert wird: npm install –global vue-cli. Nun kann im frontend-Verzeichnis der Rumpf eines Vue.js-Projekts angelegt werden: vue init webpack frontend. Auf den Befehl folgt eine Reihe an Fragen, die interaktiv beantwortet werden wollen. Das generierte Rumpfprojekt hält alles bereit, um mit den ersten eigenen Vue.js-Experimenten zu starten.

Den vollständigen Artikel lesen Sie in der Ausgabe:

Java Magazin 8.18 - "Privacy by Design: Mit Netz und doppeltem Boden"

Alle Infos zum Heft
579847848Spring Boot und Vue.js im eigenen Projekt anwenden
X
- Gib Deinen Standort ein -
- or -