Übung – Erstellen einer App mithilfe von Vue.js - Training

5 Minuten

In dieser Einheit erstellen Sie Ihre erste Vue-Anwendung, indem Sie eine HTML-Datei verwenden. Die Datei ist mit der Vue-Core-Bibliothek und einer externen JavaScript-Datei verknüpft, welche die Anwendungsdetails enthält. Sie definieren eine Vue-Datenvariable und zeigen diese dynamisch innerhalb der HTML-Seite an.

Klonen des Starter-Repositorys

Zur Starter Site für die Anwendung gehören Bilder und ein Basis-Stil. Klonen Sie zunächst das Repository und öffnen Sie es dann in Visual Studio Code.

Öffnen Sie ein Terminal oder Befehlsfenster und führen Sie den folgenden Befehl aus.

git clone https://github.com/MicrosoftDocs/mslearn-vue-get-started/
cd mslearn-vue-get-started/start
code .

Verknüpfen mit der Vue-Core-Bibliothek in Ihrer HTML-Datei

Installieren Sie Vue.js aus dem Content Delivery Network (CDN).

Öffnen Sie in Visual Studio Code die Datei index.html.
Installieren Sie Vue.js, indem Sie eine Verknüpfung zur Vue-Core-Bibliothek anlegen. Fügen Sie in ihrer Starter-index.html-Datei unter dem TODO: Import Vue.js core library-Kommentar den folgenden Skript-Tag ein.
```

<script src="https://unpkg.com/vue@next"></script>
```

Erstellen einer JavaScript-Datei für Ihre Vue-Anwendung

Wenn Sie möchten, können Sie in Ihrer HTML-Datei ein Vue-Skript schreiben. Normalerweise bleibt Ihre Anwendung jedoch aufgeräumter, wenn Sie den Code in einer separaten JavaScript-Datei hinterlegen.

Erstellen Sie eine neue Datei mit dem Namen index.js.
Fügen Sie den folgenden Code zurindex.js hinzu, um die App zu erstellen.
```
const app = Vue.createApp({
    data() {
        return {
            productName: 'Book a Cruise to the Moon',
            productDescription: 'Cruise to the moon in our luxurious shuttle. Watch the astronauts working outside the International Space Station.',
            // additional properties later


        }
    },
});
```
DiecreateApp()-Funktion ist für Sie verfügbar, da Sie die Vue.js-Bibliothek in den <head>-Tag Ihrer HTML-Seite importiert haben. Anschließend übergeben Sie dieser Funktion als Argument ein Objekt mit einer data-Eigenschaft. Dieses Objekt gibt ein anderes Objekt zurück, das Sie nun zum Speichern Ihrer Daten verwenden.

Importieren und Einbinden der Anwendung

Nachdem Sie den JavaScript-Code erstellt haben, können Sie die Anwendung importieren und einbinden.

Kehren Sie zur index.htmlzurück.

Fügen Sie unter dem TODO: Import Vue app-Kommentar das folgende Skript hinzu.

<script src="./index.js"></script>
<script>
    app.mount('#app');
</script>

Verwenden der Vue-Anwendung

Nachdem Sie Ihre Vue-Anwendung erstellt und importiert haben, können Sie die Anzeige für die Informationen erstellen.

Fügen Sie in der index.html-Datei unter dem TODO: Add information display-Kommentar den folgenden HTML-Code hinzu.

<div id="app">
    <h2>{{ productName }}</h2>
    <div>{{ productDescription }}</div>
</div>

Wichtig

Die Seitenreihenfolge ist bei der Vue.js-Verarbeitung wichtig. Sie können Ihre Anwendung erst an das Document Object Model (DOM) anfügen, sobald die HTML-Seite vollständig geladen ist. Importieren Sie also die Vue-Anwendung unten auf der Seite, nachdem bereits alle anderen HTML-Elemente vom Browser geladen wurden. Im Allgemeinen empfiehlt es sich hierbei, die HTML-Seite zu laden, bevor Sie eine externe Skriptdatei aufzurufen, die den Inhalt oder die Struktur des DOM ändern soll.

Öffnen Sie die Seite mithilfe von Live Server

Die Live Server-Erweiterung für Visual Studio Code stellt einen Entwicklungs-Web-Server dar, der die Seite bei erkannten Änderungen automatisch aktualisiert. Befolgen Sie die Anweisungen zum Installieren der Erweiterung. Verwenden Sie diese dann zum Hosten der Seite.

Speichern Sie alle Dateien.
Öffnen Sie die Befehlspalette in Visual Studio Code, indem Sie Strg+Umschalt+P drücken. Drücken Sie auf einem Mac Cmd+Umschalt+P.
Geben Sie Live Server: Open with Live Server ein.

Im Dialogfeld, das geöffnet wird, sehen Sie, dass Ihre Seite nun unter http://localhost:5500 gehostet wird.
Öffnen Sie einen Browser, und wechseln Sie zu http://localhost:5500.

Nun sollte die gerade erstellte Seite angezeigt werden!

Screenshot showing the newly created page.

Weiter

Übung – Erstellen einer App mithilfe von Vue.js