Beispiele zur Erläuterung, wie man eine Vue3-Umgebung und -Projekte erstellt

Vue ist ein beliebtes JavaScript-Framework, das durch Komponentisierung eine starke Wiederverwendbarkeit und eine einfach zu wartende Codestruktur bietet. Vue3 ist die neueste Version des Vue-Frameworks und wurde in Bezug auf Leistung und Benutzerfreundlichkeit erheblich verbessert. In diesem Artikel stellen wir vor, wie man eine Vue3-Umgebung einrichtet und eine einfache Vue3-Anwendung erstellt.

Schritt 1: Node.js installieren

Bevor Sie die Vue3-Umgebung einrichten, müssen Sie zuerst Node.js installieren. Node.js ist eine Open-Source-Umgebung zum Ausführen von JavaScript-Code. Sie verwendet die im Google Chrome-Browser integrierte V8-Engine. Sie können die neueste Version von der offiziellen Website von Node.js herunterladen und installieren.

Schritt 2: Vue-CLI installieren

Vue-CLI ist das offizielle Gerüsttool von Vue, mit dem Sie schnell ein Vue-basiertes Projekt erstellen können. Vue-CLI kann einfach mit npm installiert werden, dem Paketmanager, der mit Node.js geliefert wird.

Öffnen Sie das Terminal (Mac-Benutzer) oder die Eingabeaufforderung (Windows-Benutzer) und geben Sie den folgenden Befehl ein:

npm install -g @vue/cli

Dieser Befehl installiert Vue-CLI global.

Schritt 3: Erstellen Sie ein Vue3-Projekt

Das Erstellen eines Vue3-Projekts ist einfach. Öffnen Sie ein Terminal oder eine Eingabeaufforderung, geben Sie einen beliebigen Pfad ein und führen Sie den folgenden Befehl aus:

vue create my-project

Dieser Befehl erstellt ein Vue3-Projekt mit dem Namen „my-project“. In den nächsten Schritten müssen Sie einige Informationen eingeben, um es zu konfigurieren.

Schritt 4: Vue3 installieren

Verwenden Sie npm, um Vue3 zu installieren:

npm install vue@next

Dieser Befehl installiert Vue3.

Schritt 5: Führen Sie die Vue3-Anwendung aus

Um die Vue3-Anwendung auszuführen, müssen Sie in das Projektverzeichnis gehen und den folgenden Befehl ausführen:

npm run serve

Dieser Befehl startet einen Entwicklungsserver, sodass Sie eine Vorschau Ihrer Vue3-Anwendung anzeigen können das Browserprogramm.

Schritt 6: Erstellen Sie eine Vue3-Komponente

In Vue3 sind Komponenten die Grundbausteine ​​des Codes. Lassen Sie uns eine einfache Vue3-Komponente erstellen. Suchen Sie in Ihrem Projekt den Ordner „src/components“ und erstellen Sie eine neue Datei mit dem Namen „HelloWorld.vue“.

Fügen Sie den folgenden Code zu „HelloWorld.vue“ hinzu:

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: 'Hello Vue 3!'
    }
  }
}
</script>

Diese Komponente enthält eine Dateneigenschaft („Nachricht“) und verwendet diese zum Anzeigen eines Titels.

Schritt sieben: Verwenden der Komponente in der Vue3-Anwendung

Nun verwenden wir die neu erstellte „HelloWorld“-Komponente in der Vue3-Anwendung. Fügen Sie in der Datei „src/App.vue“ den folgenden Code zum