Einrichten Ihres ersten Vue.js-Projekts

Vue.js ist ein fortschrittliches JavaScript-Framework zum Erstellen von Benutzeroberflächen und Single-Page-Anwendungen. Es ist äußerst flexibel und lässt sich leicht in andere Bibliotheken oder bestehende Projekte integrieren. Diese Anleitung führt Sie durch die Schritte zum Einrichten Ihres ersten Vue.js-Projekts mithilfe der Vue CLI, einem leistungsstarken Tool zum Erstellen und Verwalten von Vue-Anwendungen.

Voraussetzungen

Stellen Sie vor dem Einrichten eines Vue.js-Projekts sicher, dass Folgendes auf Ihrem System installiert ist:

• Node.js und npm: Vue.js erfordert die Installation von Node.js und npm (Node Package Manager). Sie können sie von der offiziellen Node.js-Website herunterladen.

Schritt 1: Vue CLI installieren

Die Vue CLI (Command Line Interface) ist ein Tool, mit dem Sie Vue.js-Projekte ganz einfach erstellen und verwalten können. Um Vue CLI global auf Ihrem System zu installieren, öffnen Sie Ihr Terminal oder Ihre Eingabeaufforderung und führen Sie den folgenden Befehl aus:

npm install -g @vue/cli

Dieser Befehl installiert die Vue CLI global und ermöglicht Ihnen, von überall in Ihrem Terminal auf den Befehl vue zuzugreifen.

Schritt 2: Erstellen Sie ein neues Vue-Projekt

Sobald Vue CLI installiert ist, können Sie ein neues Vue.js-Projekt erstellen, indem Sie den folgenden Befehl ausführen:

vue create my-vue-app

Sie werden aufgefordert, eine Voreinstellung für Ihr Projekt auszuwählen. Sie können entweder die Standardvoreinstellung auswählen, die Babel und ESLint enthält, oder manuell Funktionen wie Vue Router, Vuex, TypeScript und mehr auswählen. Für Anfänger wird empfohlen, die Standardvoreinstellung durch Drücken von Enter auszuwählen.

Vue CLI erstellt dann einen neuen Ordner mit dem Namen my-vue-app und richtet die Projektstruktur mit allen erforderlichen Dateien und Konfigurationen ein.

Schritt 3: Navigieren Sie zum Projektordner

Sobald das Projekt erstellt ist, navigieren Sie mit dem folgenden Befehl zum Projektordner:

cd my-vue-app

Dadurch wird das Arbeitsverzeichnis Ihres Terminals in den neu erstellten Vue.js-Projektordner geändert.

Schritt 4: Ausführen des Entwicklungsservers

Um Ihre neue Vue.js-Anwendung in Aktion zu sehen, starten Sie den lokalen Entwicklungsserver, indem Sie Folgendes ausführen:

npm run serve

Dieser Befehl startet einen Entwicklungsserver unter http://localhost:8080 (oder einem anderen verfügbaren Port). Öffnen Sie Ihren Webbrowser und navigieren Sie zu dieser URL, um Ihre neue Vue.js-Anwendung anzuzeigen.

Die Projektstruktur verstehen

Nach dem Erstellen eines neuen Vue.js-Projekts sehen Sie eine gut organisierte Projektstruktur. Hier sind die wichtigsten Dateien und Ordner:

• src: Dieser Ordner enthält den Quellcode für Ihre Vue.js-Anwendung. Alle Komponenten, Ansichten und Stile befinden sich hier.
• public: Dieser Ordner enthält statische Assets wie Bilder, Schriftarten und die Datei index.html, die als Einstiegspunkt für Ihre Anwendung dient.
• src/main.js: Der Haupteinstiegspunkt für Ihre Vue.js-Anwendung. Diese Datei initialisiert die Vue-Instanz und hängt sie in das DOM ein.
• src/App.vue: Die Stammkomponente Ihrer Anwendung. Sie können diese Datei ändern, um das Hauptlayout Ihrer App zu ändern.
• src/components: Dieser Ordner enthält Beispiel-Vue-Komponenten wie HelloWorld.vue. Sie können hier neue Komponenten hinzufügen und in Ihre Anwendung importieren.

Schritt 5: Passen Sie Ihre Anwendung an

Sie können mit der Anpassung Ihrer Vue.js-Anwendung beginnen, indem Sie die Datei App.vue bearbeiten und neue Komponenten erstellen. Hier ist ein Beispiel für eine einfache Vue-Komponente:

<template>
  <div>
    <h1>Welcome to My First Vue.js Project!</h1>
    <p>This is a simple Vue component.</p>
  </div>
</template>

<script>
export default {
  name: 'WelcomeComponent'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

Speichern Sie Ihre Änderungen und sehen Sie die Ergebnisse dank der Hot-Reloading-Funktion von Vue sofort in Ihrem Browser.

Abschluss

Herzlichen Glückwunsch! Sie haben Ihr erstes Vue.js-Projekt erfolgreich eingerichtet und die Grundlagen zum Erstellen und Ausführen einer Vue-Anwendung erlernt. Mit Vue CLI verfügen Sie über ein leistungsstarkes Tool, mit dem Sie Ihre Vue.js-Projekte erstellen, entwickeln und verwalten können. Von hier aus können Sie erweiterte Funktionen wie Vue Router für das Routing, Vuex für die Statusverwaltung und die Composition API für eine leistungsstärkere und flexiblere Entwicklung erkunden.