Vue.js hat sich zu einem der beliebtesten JavaScript-Frameworks für die Erstellung von Benutzeroberflächen entwickelt. Mit der Veröffentlichung von Vue 3 ist es sogar noch leistungsfähiger und einfacher zu bedienen. In diesem Tutorial führen wir Sie durch die Erstellung einer einfachen Vue 3-App von Grund auf. Am Ende werden Sie ein grundlegendes Verständnis der Kernkonzepte von Vue haben und eine funktionierende App haben, die Sie erweitern können.
Einrichten Ihrer Entwicklungsumgebung
Bevor wir mit dem Bau unserer Vue 3-App beginnen, müssen wir unsere Entwicklungsumgebung einrichten. Dies beinhaltet die Installation von Node.js und npm (Node Package Manager), welche für die Arbeit mit Vue.js unerlässlich sind.
Schritt 1: Node.js und npm installieren
Wenn Sie Node.js noch nicht installiert haben, besuchen Sie die offizielle Node.js Website und laden Sie die neueste Version für Ihr Betriebssystem herunter. Der npm Paketmanager wird zusammen mit Node.js installiert, sodass Sie diesen automatisch erhalten.
Um die Installation zu verifizieren, öffnen Sie Ihr Terminal und führen Sie aus:
Dies sollte die installierten Versionen von Node.js und npm anzeigen.
Schritt 2: Vue CLI installieren
Vue CLI ist ein Command-Line Interface, welches es einfach macht, Vue.js Projekte zu erstellen und zu verwalten. Um es global auf Ihrem Rechner zu installieren, nutzen Sie npm:
Schritt 3: Ein neues Vue 3 Projekt erstellen
Mit installierter Vue CLI können Sie nun ein neues Vue 3 Projekt erstellen. Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus:
Sie werden aufgefordert, ein Preset zu wählen. Wählen Sie für den Anfang das Standard-Preset durch Drücken von Enter. Vue CLI wird ein neues Projekt im Verzeichnis my-vue-app einrichten.
Schritt 4: Den Development Server starten
Navigieren Sie zu Ihrem Projektverzeichnis:
Nun starten Sie den Development Server:
Vue CLI startet einen lokalen Server, und Sie können Ihre App ansehen, indem Sie http://localhost:8080 in Ihrem Browser öffnen. Sie sollten einen Willkommensbildschirm sehen, der anzeigt, dass Ihre Vue 3 App läuft!
Erstellen Ihrer ersten Vue Komponente
Jetzt, wo unser Projekt eingerichtet ist, lassen Sie uns eine einfache Vue Komponente erstellen und auf der Seite rendern.
Schritt 1: App.vue bearbeiten
Die App.vue Datei ist die Root-Komponente Ihrer Anwendung. Öffnen Sie die src/App.vue Datei in Ihrem Code Editor und ersetzen Sie den Inhalt mit folgendem:
<template>
<div id=“app“>
<h1>{{ message }}</h1>
<MyComponent />
</div>
</template>
<script>
import MyComponent from ‚./components/MyComponent.vue‘;
export default {
name: ‚App‘,
components: {
MyComponent
},
data() {
return {
message: ‚Hallo Vue 3!‘
};
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Hier haben wir ein Data-Property namens message hinzugefügt und es in einem <h1> Tag angezeigt. Wir haben außerdem eine neue Komponente namens MyComponent importiert, die wir als Nächstes erstellen.
Schritt 2: Eine neue Komponente erstellen
Lassen Sie uns eine neue Komponente namens MyComponent.vue im src/components/ Verzeichnis erstellen. Erstellen Sie eine Datei mit folgendem Inhalt:
<template>
<div>
<p>Dies ist eine einfache Komponente!</p>
</div>
</template>
<script>
export default {
name: ‚MyComponent‘
};
</script>
<style scoped>
p {
color: #42b983;
}
</style>
Diese Komponente zeigt einen einfachen Paragraphen mit ein paar Styles an. Das scoped Attribut stellt sicher, dass die Styles nur auf diese Komponente angewendet werden.
Schritt 3: Ihre App ansehen
Speichern Sie Ihre Änderungen und gehen Sie zurück zum Browser. Wenn Ihr Development Server noch läuft, sollten Sie die aktualisierte App mit Ihrer Nachricht und der neuen Komponente sehen. Wenn der Server nicht läuft, starten Sie ihn erneut mit npm run serve.
Ihre App erweitern
Jetzt, wo Sie eine einfache Vue 3 App erstellt haben, können Sie diese erweitern, indem Sie mehr Komponenten hinzufügen, Routing mit Vue Router einrichten und den State mit Vuex managen. Die Möglichkeiten sind endlos!
Build für die Produktion
Sobald Sie mit Ihrer App zufrieden sind und diese deployen möchten, können Sie einen Build für die Produktion erstellen:
Dies wird ein dist Verzeichnis mit optimierten Dateien erstellen, die Sie auf einem Webserver bereitstellen können.
Fazit
Glückwunsch! Sie haben gerade eine einfache Vue 3 App erstellt und die Basics gelernt. Das ist erst der Anfang — Vue.js bietet ein riesiges Ökosystem mit Tools und Libraries für komplexe Anwendungen. Sobald Sie sich sicher fühlen, können Sie Features wie die Composition API, Vue Router und Vuex erkunden.
Viel Spaß beim Coden!
