Formular-Component mit Element UI erstellen

Einführung

In diesem Projekt lernst du, wie du die Element UI, eine beliebte Vue.js-UI-Bibliothek, verwenden kannst, um einen Formular-Component zu erstellen und ihn in eine Webanwendung zu integrieren.

👀 Vorschau

Vorschau des fertigen Formular-Components

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du die ursprüngliche Code-Struktur und die Dateiorganisation verstehst
Wie du das Problem identifizierst und behebst, das dazu führt, dass das Formular verschwindet
Wie du sicherstellst, dass das Formular in der Webanwendung richtig angezeigt wird

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

Element UI in einer Vue.js-Anwendung zur Erstellung von Formular-Components zu verwenden
Probleme bei der Integration von UI-Components zu beheben und zu beheben
Die Wichtigkeit des richtigen Einbaus und Verweisens auf externe Bibliotheken in einer Webanwendung zu verstehen

Projektstruktur einrichten

In diesem Schritt wirst du die Projekt-Dateien und -struktur einrichten. Folg den Schritten unten, um diesen Schritt abzuschließen:

Öffne den Projektordner. Die Verzeichnisstruktur ist wie folgt:

├── element-ui-2.15.10
│   ├── index.css
│   └── index.js
├── index.html
├── js
│   ├── http-vue-loader.js
│   └── vue.min.js
└── myform.vue

Dabei gilt:

index.html ist die Hauptseite.
myform.vue ist die Datei mit dem kapselnden Formular-Component.
js ist der Ordner zum Speichern von Vue.js-vermittelten Dateien.
element-ui-2.15.10 ist der Ordner zum Speichern von element-ui-Dateien.

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne die Option "Web 8080" oben im VM und aktualisiere die Seite manuell, um das folgende Ergebnis im Browser zu sehen:

Bildbeschreibung

Die Formular-Component myform im ursprünglichen Code wird im Browser nicht angezeigt.

Das Problem identifizieren

In diesem Schritt wirst du über den ursprünglichen Code, der für das Projekt bereitgestellt wurde, informiert und dabei das Problem identifizieren, das dazu geführt hat, dass das Formular verschwunden ist.

Öffne die Datei index.html. Dies ist die Haupt-HTML-Datei, die als Einstiegspunkt für die Anwendung dient.
Prüfe den Code in index.html. Du kannst sehen, dass es die erforderlichen Vue.js- und Element-UI-Dateien enthält und auch einen Verweis auf die myform.vue-Komponente enthält.
Öffne die Datei myform.vue. Dies ist die Vue-Komponente, die das Formular enthält, das du anzeigen möchtest.
Verstehe die Struktur der Datei myform.vue. Sie enthält den erforderlichen HTML-, JavaScript- und CSS-Code für die Formular-Komponente.
Beobachte, dass das Formular nicht im Browser angezeigt wird, obwohl es in der Datei index.html referenziert ist.
Überprüfe die Datei index.html erneut sorgfältig.
Beachte, dass die Datei element-ui-2.15.10/index.js die index.html nicht einführt.

Das Problem beheben

In diesem Schritt wirst du das Problem beheben und sicherstellen, dass das Formular richtig angezeigt wird.

Öffne die Datei index.html.
Füge die Einbindung der Datei element-ui-2.15.10/index.js am Ende innerhalb des <head> hinzu.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vanished Into Thin Air</title>
    <script src="./js/vue.min.js"></script>
    <script src="./js/http-vue-loader.js"></script>
    <!-- element-ui style -->
    <link rel="stylesheet" href="./element-ui-2.15.10/index.css" />

    <!-- TODO: element-ui js -->
    <script src="./element-ui-2.15.10/index.js"></script>
  </head>
  <!--... -->
</html>

Speichere die Änderungen an der Datei index.html.
Aktualisiere den Browser, um die aktualisierte Seite zu sehen.
Vergewissere dich, dass das Formular wie erwartet angezeigt wird, wie im folgenden Bild gezeigt:

Bildbeschreibung

Glückwunsch! Du hast das Problem erfolgreich behoben und das Formular richtig angezeigt.

Zusammenfassung

Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Übungen absolvieren, um deine Fähigkeiten zu verbessern.

In Luft aufgelöst