Vue-Komponentenstruktur

Jede Komponente muss aus den folgenden zwei Tags bestehen:

App.vue<script>
  
</script>
<template>
  
</template>

Im Tag template sollte das Markup, also die Darstellung unserer Komponente, geschrieben werden:

App.vue<template>
  <div>
    Hello World
  </div>
</template>

Und im Tag script sollte der JavaScript-Code unserer Komponente geschrieben werden. Dieser Code sollte ein Objekt darstellen, das aus unserer Komponentendatei exportiert wird:

App.vue<script>
  export default {
    
  }
</script>

Im exportierten Objekt werden verschiedene Einstellungen und Funktionen der Komponente angegeben. Eine dieser Einstellungen ist der Name dieser Komponente:

App.vueexport default {
  name: 'App',
}