Für mich war die Antwort darauf ganz einfach: Vue.js ist leicht verständlich und sehr flexibel. Es bietet die Möglichkeit, in bestehende Projekte teilweise oder komplett eingebunden zu werden und wenn das nicht genug ist, kannst du mittels vue-cli das volle Potential des Frameworks nutzen und es dabei einfach mit weiteren Features/Bibliotheken erweitern - Vue.js ist nicht umsonst das Progressive JavaScript Framework!
Was genau steckt hinter vue-cli? Es ist ein build tool, das ein Grundgerüst für Vue.js-Projekte erstellt. Dabei fragt das Tool ab, welche Features/Einstellungen für das Projekt gewünscht sind, darunter z.B. TypeScript Support, einen CSS Pre-Processor, einen Linter, Grundgerüste für das Testing und, und, und ...
Ist alles soweit ausgewählt, werden die benötigten Dependencies per Package Manager (z.B. npm) heruntergeladen. Und schon kann das Programmieren losgehen!
Bei Projekten, die mittels vue-cli erstellt wurden, wird der Code in sogenannten Single File Components geschrieben. Wie der Name schon andeutet, werden Komponenten jeweils komplett in einer einzigen Datei beschrieben. In diesen .vue-Dateien befindet sich alles, was eine Komponente ausmacht: ein Template, ein Script-Teil sowie das Styling. Das Template ist quasi das HTML-Gerüst der Komponente, das aber noch mittels Vue-Direktiven und Mustache Templating mit Variablen und/oder Methoden aus dem Script-Teil angereichert werden kann, womit sich Inhalte z.B. dynamisch ein-/ausblenden lassen. In dem Script-Teil können Variablen, Methoden, weitere Komponenten (und noch einiges mehr) definiert werden, die von der Komponente benötigt werden und benutzt werden sollen. Zum Schluss wird noch das Styling in den Style-Teil eingefügt. Dabei kann festgelegt werden, ob das Styling nur für die Komponente selber oder übergreifend angewendet werden soll.
Da Bilder (bzw. in diesem Fall Code) mehr sagen als 1000 Worte, ist hier noch ein sehr einfaches „Hello World“-Beispiel zu sehen: