Heim > Artikel > Web-Frontend > 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 -Tag hinzu:
<template> <div> <HelloWorld /> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </script>
Führen Sie nun den Befehl „npm run servo“ aus, um den Entwicklungsserver zu starten und Ihre Vue3-Anwendung im Browser anzuzeigen. Sie sehen einen Titel mit der Aufschrift „Hallo Vue 3!“
Zusammenfassung:
Durch Befolgen der oben genannten Schritte haben Sie erfolgreich eine Vue3-Umgebung eingerichtet und eine einfache Vue3-Anwendung erstellt. Dies ist nur die Spitze des Eisbergs des Vue3-Frameworks. Weitere Informationen und weitere Funktionen finden Sie in der offiziellen Vue3-Dokumentation.
Das obige ist der detaillierte Inhalt vonBeispiele zur Erläuterung, wie man eine Vue3-Umgebung und -Projekte erstellt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!