Wie erstellen Sie eine Seite in Vue?

Eine Vue-Seite wird in der Regel als eigenständiges Komponent (.vue-Datei) erstellt, das aus drei Abschnitten besteht: <template>, <script> und <style>.

<template>: Definiert die HTML-Struktur der Seite und verwendet die Vue-Template-Syntax, um Daten und Logik zu binden.
```
<template>
  <div>
    <h1>{{ pageTitle }}</h1>
    <p>{{ pageContent }}</p>
  </div>
</template>
```

<script>: Enthält die JavaScript-Logik der Seite, einschließlich der Definition von Daten (data), berechneten Eigenschaften (computed), Methoden (methods), Lifecycle-Hooks und anderen Komponentenoptionen.

<script>
export default {
  data() {
    return {
      pageTitle: 'Meine Vue-Seite',
      pageContent: 'Dies ist der Inhalt meiner ersten Vue-Seite.'
    };
  },
  mounted() {
    // Logik, die nach dem Mounten der Komponente ausgeführt wird
    console.log('Seite gemountet!');
  }
}
</script>

<style>: Enthält CSS-Stile, die auf die Komponente angewendet werden. Der scoped-Modifikator kann verwendet werden, um den Stil nur auf diese Komponente zu beschränken.
```
<style scoped>
h1 {
  color: blue;
}

p {
  font-size: 16px;
}
</style>
```

Die erstellte Komponente wird dann in die Routing-Datei importiert (z.B. mit vue-router) und mit einer bestimmten URL verknüpft, sodass diese Seite beim Navigieren zu dieser Adresse angezeigt wird.

// router/index.js (Beispiel mit vue-router)
import { createRouter, createWebHistory } from 'vue-router';
import MyPage from '@/views/MyPage.vue'; // Import der Seitenkomponente

const routes = [
  {
    path: '/meine-seite', // URL der Seite
    name: 'MyPage',
    component: MyPage // Zu zeigendes Komponente
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

Im Hauptdatei der Anwendung (main.js) wird der Router an die Vue-Instanz angeschlossen.

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

Kurz gesagt, das Erstellen einer Vue-Seite besteht darin, eine Komponente zu erstellen, die ihre Struktur, Logik und Stile beschreibt, und den Router so zu konfigurieren, dass diese Komponente unter einer bestimmten URL angezeigt wird.