Vue.js und die Vue CLI 3 für Beginner
Im JavaScript-Universum tummeln sich so einige Frameworks, einige überwinden nie den Newcomer-Status andere hingegen etablieren sich als feste Größe unter den JavaScript-Frameworks. Ein Framework, das sich in den letzten Monaten bewiesen hat ist Vue.js, es gehört inzwischen zu den festen Größe unter den JavaScript-Frameworks. In diesem Blogpost wird Vue.js vorgestellt und erste Einblicke in die Frontendentwicklung mit Vue.js gegeben.
Unter den Frontend-Entwicklern hört man häufig denselben Satz –schon wieder ein neues Framework, lohnt sich die Betrachtung überhaupt?
Ja, eine Betrachtung lohnt sich definitiv. Denn schließlich gehört Vue.js laut Google-Trends zu den drei größten JavaScript-Frameworks mit wachsender Beliebtheit.
Was führt zu der steigenden Beliebtheit von Vue.js?
Ein großes Plus erhält Vue.js von mir durch die schnell wachsende und heute nicht mehr selbstverständlich freundliche Community. Dies hilft besonders dann weiter, wenn man sich mit neuen Technologien auseinandersetzt. Neben dem doch eher soften Fact der Community verfolgt Vue.js den Ansatz „schnelle Ergebnisse zu produzieren“. Diesen Ansatz spürt man auch in der Entwicklung, durch wenige Zeilen Code lässt bereits erstaunliches umsetzten. Vue.js zeichnet sich im Vergleich zu den anderen großen JavaScript-Frameworks auch dadurch aus, dass es in einem minimalen Setup sehr performant ist und es sich nach den Bedürfnissen des Projekts und des Entwicklers erweitern lässt.
Als modernes Web Framework nutzt Vue.js das von React.js bekannte virtual DOM (Document Object Model), legt viel Wert auf Performance und hat eine sehr flache Lernkurve. Das virtual DOM ist eine Abstraktion des bekannten DOM aus dem Browser, es ist leichtgewichtiger und schneller im Abarbeiten von Befehlen, die man über das Framework herein geben kann. Vue.js ist sowohl reaktiv als auch deklarativ und erlaubt es euch somit, visuelle Elemente zu erstellen und diese erst bei Anfrage darzustellen. Dies passiert natürlich auch, wenn sich bestimmte Zustände und Daten in euren Komponenten ändern.
Das beste Feature aus meiner Sicht, ist das Arbeiten mit den Single File Components (SFCs). Der modulare Ansatz zieht sich in Vue.js wie ein roter Faden durch. Idealerweise könnt ihr diese kleinen Komponenten in einer riesigen Applikation zusammenfassen, oder ihr pickt euch einfach die Komponenten raus, die ihr benötigt, und integriert diese in ein bestehendes Projekt. Zugute kommt einem dieser Ansatz in Projekten, die eine Microservice-Architektur einsetzen, da sich eine Kapselung einzelner Komponenten – wie bereits beschrieben – perfekt umsetzen lässt.
Genug der „trockenen“ Theorie erstellen wir unser erstes Projekt mit Vue CLI 3.
Die Vue CLI ist ein (Command Line Interface) Tool, welches die Erstellung von VueJS Applikationen enorm vereinfacht. Um jedoch die aktuelle Version Vue CLI 3 einsetzen zu können benötigen wir NodeJS mindestens in der Version 8 oder höher, anderenfalls wird es zu Fehlern kommen.
Im ersten Schritt, werden wir die Vue CLI installieren, im Anschluss werden wir dann mit dieser arbeiten.
npm install –g @vue/cli
oder
yarn global add @vue/cli
Wenn die Installation abgeschlossen ist, steht dir die Vue CLI global zur Verfügung.
Jetzt können wir unsere erste VueJS-Applikation erstellen, dazu verwenden wir folgenden Befehl:
cd demo-projekt
Innerhalb dieses Ordners können wir das Projekt kompilieren lassen und den Server ausführen.
npm run serve
oder
yarn run serve
Die Vue CLI nennt uns nach der erfolgreichen Ausführung unseres Projektes unter welcher URL die Vue-Applikation zum Abruf zur Verfügung steht.
In meinem Fall gebe ich nun die „Local“ URL in den Browser ein und bekomme die Standartseite von Vue angezeigt.
Schritt 2: Ordnerstruktur von Vue
In der nachfolgenden Grafik wird die Projekt-Ordnerstruktur angezeigt. Es gibt insgesamt in unserem Projekt drei Unterordner, wobei nur zwei von VueJS benötigt werden und zwar der Ordner „public“ sowie der Ordner „src“. Der wichtigste Ordner für uns ist der „src“-Ordner. Innerhalb dieses Ordners gibt es zwei Dateien, die „App.vue“ sowie die „main.js“ und zwei Unterordner „assets“ und „components“.
Die „App.vue“ beinhaltet alle Komponenten der Vue-Applikation und ist die Basisdatei unsere Applikation. Aktuell beinhaltet sie nur eine Komponente und zwar die HelloWorld.vue, welche im Ordner „components“ liegt. Dieser Aufbau zeigt uns, dass alle von uns entwickelten Komponenten in dem Ordner „components“ platziert werden sollten.
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld,
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Die App.vue zeigt uns ebenfalls wie in Vue eine Komponente verwendet wird, jedoch betrachten wir davor den Aufbau einer Vue-Datei, diese teilt sich in die folgenden drei Bereiche auf:
- Template, dort werden die HTML5-Elemente platziert
- Script, in diesem Bereich werden die JavaScript-Elemente platziert
- Style, dieser Bereich dient für die Gestaltung der Komponenten
Eine Komponente muss zu Beginn innerhalb des Skript-Tags (<script>…</script>) implementiert werden, siehe Zeile 9 in der Abbildung App.vue. Im Anschluss kann die implementierte Komponente in der aktuellen Datei initialisiert werden, dies erfolgt in den Zeilen 13 – 15 in der Abbildung App.vue, nun steht die Komponente für die Verwendung im Template-Bereich zur Verfügung, siehe Zeile 4 in der Abbildung App.vue. In diesem Fall erwartet die HelloWorld.vue als Übergabeparameter einen String, welcher mit der Variable „msg=“Welcome to your Vue.js App““ an die Komponente übergeben wird. Durch die Beschreibung des Quellcodes, haben wir die Bedeutung des Unterordners „components“ verstanden. In dem Unterordner „assets“, werden Images und Logos für die Applikation platziert, siehe Zeile 3 in der Abbildung App.vue. Dort wird das Logo mittels des img-Tags aus dem Ordner „assets“ eingebunden.
Nun fehlt uns noch zum vollständigen Verständnis des „src“-Ordners die „main.js“ Datei. Innerhalb dieser Datei wird die komplette Vue.js Applikation initialisiert.
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
Zum vollständigen Verständnis einer Vue-Applikation müssen wir uns den „public“-Ordner noch anschauen. In diesem Ordner liegen zwei Dateien, zum einen die Datei favicon.ico und die index.html. Die favicon.ico ist wie die Bezeichnung vermuten lässt für das Favicon im Browser zuständig. Die index.html-Datei ist eine normale HTML5-Datei in der die Vue-Applikation geladen wird. Dies erfolgt in dem div-Tag mit der ID „app“, zu sehen in der nachfolgenden Abbildung index.html in Zeile 14.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>demo-projekt</title>
</head>
<body>
<noscript>
<strong>We're sorry but demo-projekt doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Nun haben wir die komplette Struktur einer Basis Vue-Applikation betrachtet, aber wie erstelle ich nun eine eigene Komponente? Dazu gehen wir wie folgt vor.
Schritt 3: Unsere erste Komponente
Als erstes erstellen wir innerhalb des Ordners „components“ die Datei „FirstComp.vue“. Die Bezeichnung der Datei kann frei gewählt werde. In dieser Datei erstellen wir den folgenden Quellcode, dieser soll wie in der Komponente HelloWorld eine Nachricht auf der Webseite ausgeben.
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'FirstComp',
props: {
msg: String
}
}
</script>
<style>
</style>
Unsere erste eigene Vue-Komponente ist fertig, jetzt müssen wir diese in die App.vue einbinden. Dies machen wir genau gleich wie bei der HelloWorld-Komponente in dem wir in der App.vue innerhalb des Script-Tags unsere Komponente importieren und danach initialisieren.
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<FirstComp msg="Meine erste Komponente in Vue" />
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import FirstComp from './components/FirstComp.vue'
export default {
name: 'app',
components: {
HelloWorld,
FirstComp
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
In Zeile 11 der Abbildung App.vue FirstComp haben wir unsere Komponente in unser App.vue importiert um diese nun auch in unsere Anwendung ausführen zu können benötigen wir die Zeile 17 der Abbildung App.vue FirstComp, dort binden wir unsere Komponenten in unsere Anwendung ein. In Zeile 5 der Abbildung App.vue FirstComp haben wir die von uns entwickelte Komponente dem Frontend übergeben und zeigen unsere Nachricht nach der HelloWorld Komponente an.
Fazit
Mit Vue.js lassen sich nach relativ kurzer Eingewöhnungsphase gut wartbare, auf Komponenten basierende Anwendungen bauen. Besonderes Augenmerk legt Vue.js darauf, dem Entwickler Hilfsmittel an die Hand zu geben, um den Quellcode möglichst gut zu strukturieren. Selbstverständlich konnte dieser Artikel Vue.js nicht in der Tiefe betrachten. Ich hoffen, dass ich Neugierde auf dieses interessante, aufstrebende Framework wecken konnten.
