Sebastian Springer JavaScript-Entwickler für MaibornWolff

„Trotz seines leichtgewichtigen Ansatzes und seiner geringen Einstiegshürde sollten Sie Vue.js nicht unterschätzen. Gerade im Vergleich mit Angular und React kann sich der Newcomer unter den JavaScript-Frameworks sehen lassen.“

Vue.js, Angular oder React? Wer ein Projekt beginnt, steht vor der Qual der Wahl. Vue.js wird immer beliebter, die Community wächst. Im direkten Vergleich zu Angular und React lässt sich gut zeigen, wann die Library die richtige Wahl ist.

Schenkt man der Auswertung über Frontend-Frameworks von npm Glauben, liegt Vue mittlerweile auf Platz drei der beliebtesten Frameworks. Doch wesentlich interessanter als der absolute Anteil an den Downloadzahlen ist vielmehr das Wachstum. Sehen Sie sich diesen Teil der Auswertung an, wird schnell klar, dass Sie von Vue in der nächsten Zeit noch mehr hören werden. Vue wächst aktuell deutlich stärker als die anderen betrachteten Frameworks, und das nicht ohne Grund. Vue ist, ähnlich wie React, ein Framework, das sich auf die Darstellung konzentriert und nicht wie Angular das komplette Frontend einer Applikation abdeckt. Das macht Vue zu einem leichtgewichtigen und flexiblen Werkzeug in der Entwicklung. Hinzu kommt, dass Vue im Vergleich zu React oder Angular relativ einfach zu erlernen ist. Auch die Community, die sich um das Framework gebildet hat, trägt ihren Teil zu dessen steigender Beliebtheit bei, indem immer mehr Werkzeuge und Erweiterungen für das Framework umgesetzt werden. Im Laufe dieses Artikels werde ich Ihnen einige Gemeinsamkeiten, aber auch Unterschiede zwischen Angular, React und Vue zeigen, sodass Sie sich selbst ein Bild von dem Framework machen und seine Einsatzgebiete einschätzen können.

Installation und erste Schritte

Vue ist ein Open-Source-Framework, das vollständig auf GitHub entwickelt wird. Das Framework selbst und zahlreiche Hilfsmittel und Erweiterungen finden Sie unter https://github.com/vuejs. Außerdem existieren für alle benötigten Komponenten Pakete auf npm beziehungsweise Yarn. Die einfachste Variante, mit Vue zu arbeiten, besteht allerdings darin, die JavaScript-Datei des Pakets direkt im Browser einzubinden und das Vue-Objekt global zu verwenden. Das ist vergleichbar mit der Art, auf die jQuery benutzt wird. Dieser Ansatz wird jedoch nur für sehr kleine Applikationen empfohlen, daher gehen wir darauf nicht weiter ein. Allerdings teilen sich diese globale Vue-Instanz und die im Folgenden verwendeten Components den gleichen Aufbau, sodass Sie die in diesem Artikel beschriebenen Features auch dort einsetzen können.

Um mit der Entwicklung einer Vue-Applikation zu beginnen, sollten Sie zunächst das Vue-CLI installieren. Der Einsatz von Kommandozeilenwerkzeugen zum Scaffolding einer Applikation hat sich mittlerweile bei allen großen Frameworks als Standard durchgesetzt. Das Vue-CLI bereitet die Grundlagen Ihrer Applikation so vor, dass Sie anschließend sofort mit der Entwicklung beginnen können. Eine mit dem CLI aufgesetzte Applikation enthält außerdem einen Dev-Server, der ähnlich funktioniert wie in Angular oder React, wenn Sie die Applikationen mit dem jeweiligen CLI initialisieren. Das Vue-CLI wird mit dem Kommando npm install -g @vue/cli global auf Ihrem System installiert, sodass Ihnen das vue-Kommando auf der Konsole des Systems zur Verfügung steht. Mit dem Kommando vue create todo-list lassen Sie die Struktur Ihres Projekts per CLI erzeugen. In der dritten Version des CLI werden Sie durch einen interaktiven Prozess geleitet, an dessen Ende eine funktionstüchtige Applikation steht. Sie können hier das Preset, also die verwendeten Werkzeuge wie Babel und eslint, auswählen und den zu verwendenden Package-Manager angeben. Für den Anfang reicht hier die Standardauswahl aus, die Sie erhalten, indem Sie beide Fragen mit der Eingabetaste bestätigen. Nachdem Sie Ihre Auswahl getroffen haben, werden sämtliche Abhängigkeiten heruntergeladen und die Verzeichnisstruktur wird erzeugt. Im Anschluss wechseln Sie in das erzeugte Verzeichnis und führen das Kommando npm run serve aus. Das sorgt dafür, dass der Dev-Server gestartet wird und Ihnen die Applikation unter http://localhost:8081 zur Verfügung stellt.

Den vollständigen Artikel lesen Sie in der Ausgabe:

Entwickler Magazin 4.18 - "Déjà Vue.js?"

Alle Infos zum Heft
579845105Wie man eine Applikation mit dem Framework Vue.js baut
X
- Gib Deinen Standort ein -
- or -