Erstellen einer Komponente

• 7 Minuten

Wir möchten eine Anwendung erstellen, mit der ein Benutzer Buchungen für eine Kreuzfahrt zum Mond erstellen kann. Im Verlauf einiger Übungen erstellen Sie eine Komponente für das Formular, das der Benutzer beim Erstellen einer Buchung durchführt, und ein weiteres, um die Liste der erstellten Buchungen anzuzeigen. Die erste Komponente, die Sie erstellen, hostet beide untergeordneten Komponenten.

Installieren von Visual Studio Code-Erweiterungen

Visual Studio Code verfügt über zahlreiche Erweiterungen im Visual Studio Marketplace, die Sie bei Ihrer Entwicklungsarbeit unterstützen. Hier werden wir zwei davon nutzen:

• Volar ermöglicht die Unterstützung von .vue-Dateien in Visual Studio Code.
• Vue VSCode Snippets von Sarah Drasner ermöglicht Snippets in Visual Studio Code.

1. Öffnen Sie in Visual Studio Code die Erweiterungen-Workbench.

   

2. Geben Sie Vue VSCode Snippets in das Suchfeld ein.

3. Wählen Sie unter Vue VSCode Snippets Installieren aus, um sowohl Vue VSCode Snippets als auch Volar zu installieren.

   

Erstellen der Host-Komponente

Erstellen wir nun die Host-Komponente.

1. Erstellen Sie in src/components eine Datei mit dem Namen Host.vue.

2. Geben Sie in der Host.vue nun vue ein, und wählen Sie dann <vue> with default.vue im Ausschnittmenü aus.

   

   Der Codeausschnitt erstellt die Standardstruktur.

Aktualisieren der Skriptverweise

Der Codeausschnitt erstellt das script-Element für uns, wobei export default bereits erstellt wurde. Mit dem export default-Befehl kann eine andere Komponente diese Komponente in Vue laden. Lassen Sie uns den erforderlichen Code in diesem Abschnitt hinzufügen.

Fügen Sie innerhalb der geschweiften Klammern ({ }) von export default den folgenden Code hinzu, um die Komponente zu benennen, die Daten zu registrieren und zwei Kommentare für später hinzuzufügen:

name: 'Host',
data() {
    return {
        cruise: {
            name: 'Cruise to the moon',
            description: 'Cruise to the moon in our luxurious shuttle. Watch the astronauts working outside the International Space Station.',
            cabins: [
                { name: 'Coach', price: 125000 },
                { name: 'Business', price: 275000 },
                { name: 'First', price: 430000 },
            ]
        },
        bookings: [
            { name: 'Sample', price: 0 }
        ]
    }
},

// TODO: Add components

// TODO: Add methods

Das name-Feld legt den Namen der Komponente fest. Der data()-Teil registriert das cruise-Objekt als Daten für die Komponente. Wir verwenden bookings später, um eine Liste der Kreuzfahrtenbuchungen zu speichern. Die TODO-Kommentare dienen als Markierungen für einen späteren Zeitpunkt.

Hinzufügen der Vorlage

Wenn die Daten registriert sind, fügen Sie den HTML-Code zum template-Element hinzu, um die wichtigsten Informationen anzuzeigen. Lassen Sie uns auch einige Platzhalter für später hinzufügen.

Fügen Sie im template-Element in der Host.vue den folgenden HTML-Code hinzu, um den Namen und die Beschreibung der Kreuzfahrt anzuzeigen. Der HTML-Code enthält einen Platzhalter für zwei Komponenten, die wir später erstellen werden.

<section>
<div class="nav-bar"></div>
<h1>Relecloud Galaxy Tours</h1>

<div>
    <h2>{{ cruise.name }}</h2>
    <div>{{ cruise.description }}</div>
    <hr />

    <div class="row">
        <div>
            <!-- TODO: Add booking-form -->

        </div>
        <div>
            <!-- TODO: Add booking-list -->

        </div>
    </div>
</div>
</section>

Anwenden des Stils

Nachdem der HTML-Code erstellt wurde, fügen wir den Stil für die Anwendung hinzu.

Fügen Sie im style-Element in der Host.vue den folgenden CSS-Code hinzu:

body {
    background-color: #f2f2f2;
    margin: 0, 5%;
    font-family: tahoma;
}

.row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    vertical-align: middle;
    margin: 2em;
}

.button {
    background-color: #39495c;
    border-radius: 5px;
    color: white;
    text-align: center;
}

.nav-bar {
    background: linear-gradient(-50deg, #010801, #0d0d60);
    height: 60px;
    margin-bottom: 25px;
}

Dieser CSS-Code fügt der Anwendung einige Strukturen und Farben hinzu.

Festlegen der Host-Komponente als Einstiegspunkt in die Anwendung

Vue CLI erstellt eine main.js-Datei, die App.vue als Einstiegspunkt in die Anwendung lädt. Zu diesem Zweck haben wir eine neue Komponente namens Host erstellt. Lassen Sie uns main.js, um die Komponente zu verwenden aktualisieren.

Öffnen Sie main.js und ersetzen Sie den Inhalt, indem Sie den folgenden Code verwenden:

import { createApp } from 'vue'
import Host from './components/Host.vue'

createApp(Host).mount('#app')

Testen der Anwendung

Nachdem die Komponente erstellt und das Skript aktualisiert wurde, testen wir die Seite.

1. Speichern Sie alle Dateien, indem Sie Datei>Alle speichern auswählen.

2. Kehren Sie zum Browser zurück und aktualisieren Sie die Registerkarte, die http://localhost:8080 zeigt.

   Die aktualisierte Seite wird jetzt angezeigt.

   

Sie haben jetzt Ihre erste Komponente mit einer einzelnen Datei in Vue.js erstellt!