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

#🎜 🎜#Bei erfolgreicher Installation werden die Versionsinformationen von Vue CLI angezeigt. Als nächstes können wir mit der Vue-CLI ein neues Projekt erstellen. Geben Sie den folgenden Befehl in die Befehlszeile ein:

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 id="Hello-World">Hello, World!</h1>
   </div>
</template>

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

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

Diese .vue-Datei enthält drei Teile:

<script>: Der Skriptteil enthält JavaScript-Code zum Rendern der Logik der Komponente. </script>

In der .vue-Datei verwenden Sie export default {}, um die Vue-Komponente zu exportieren. In diesem Beispiel haben wir eine Vue-Komponente mit dem Namen „MyComponent“ exportiert. Wir können auch Requisiten, Daten, berechnete Methoden und andere Eigenschaften und Methoden in Vue-Komponenten für Komponenten definieren.

Schließlich müssen wir diese MyComponent-Komponente in anderen Komponenten verwenden. In anderen Vue-Komponenten können wir die MyComponent-Komponente wie folgt einführen:

<template>
   <div>
      <my-component></my-component>
   </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
   components: {
      'my-component': MyComponent
   }
}
</script>

Hier importieren wir die MyComponent-Komponente über das Schlüsselwort import in andere Vue-Komponenten und registrieren sie über das Komponentenattribut „components“ als untergeordnetes Element. Diese Komponente kann mithilfe des -Tags in der HTML-Vorlage gerendert werden.

Die oben genannten Schritte sind die einfachen Schritte zum Erstellen einer Vue-Komponente. Erstellen Sie ein Vue-Projekt mit der Vue-CLI, erstellen Sie dann eine .vue-Datei, schreiben Sie den Code und verwenden Sie ihn in anderen Vue-Komponenten. Das komponentenbasierte Entwicklungsmodell von Vue.js ermöglicht Entwicklern eine bequemere und schnellere Erstellung von Anwendungen und verbessert die Wiederverwendbarkeit und Modularität des Codes.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine VUE-Datei im Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!