So erstellen Sie eine VUE-Datei im Code

Vue.js ist ein beliebtes JavaScript-Framework, das die schnelle Erstellung interaktiver Weboberflächen ermöglicht. Im Gegensatz zu anderen JavaScript-Frameworks verwendet Vue.js Komponenten zum Erstellen von Anwendungen. Vue-Komponenten liegen in Form von .vue-Dateien vor, die Vue-Vorlagen, Skripte und Stile enthalten. Schauen wir uns an, wie man eine Vue-Datei erstellt.

Um eine Vue-Komponente zu erstellen, müssen Sie zunächst das Vue-CLI-Tool installieren. Dieses Tool kann automatisch Vue-Projekte für uns erstellen und bietet viele praktische Tools und Funktionen. Geben Sie zunächst den folgenden Befehl in die Befehlszeile ein, um Vue CLI zu installieren:

npm install -g @vue/cli

Nachdem die Installation abgeschlossen ist, können wir mit dem folgenden Befehl überprüfen, ob Vue CLI erfolgreich installiert wurde: # 🎜🎜#

vue --version

vue create my-project

Das „mein-Projekt“ hier ist der Name des Projekts, Sie können ihn nach Bedarf ändern. Wenn Sie diesen Befehl ausführen, werden Sie von Vue CLI aufgefordert, eine Voreinstellung auszuwählen, z. B. „Standard“, „Manuell“, „PWA“, „Einfach“ usw. Durch Auswahl der Voreinstellung „Standard“ wird automatisch ein Vue-Projekt mit Standardeinstellungen generiert. Wenn Sie die Voreinstellung „Manuell“ auswählen, müssen Sie verschiedene Einstellungen manuell auswählen.

Sobald das Vue-Projekt erfolgreich erstellt wurde, können Sie das Vue-CLI verwenden, um das Projekt auszuführen. Geben Sie den folgenden Befehl in die Befehlszeile ein:

cd my-project
npm run serve

Dieser Befehl startet einen lokalen Server. Besuchen Sie http://localhost:8080/ im Browser, um die laufende Wirkung des Vue-Projekts zu sehen.

Da wir nun das Vue-Projekt erstellt haben, erstellen wir eine .vue-Datei. Erstellen Sie eine neue Datei im Verzeichnis src/components und nennen Sie sie MyComponent.vue. Geben Sie den folgenden Code in die Datei ein:

<template>
   <div>
      <h1>Hello, World!</h1>
   </div>
</template>

<script>
export default {
   name: 'MyComponent'
}
</script>

<style>
h1 {
   color: red;
}
</style>

Diese .vue-Datei enthält drei Teile: