Construire un composant de formulaire avec Element UI

Introduction

Dans ce projet, vous allez apprendre à utiliser Element UI, une bibliothèque d'interface utilisateur populaire pour Vue.js, pour construire un composant de formulaire et l'intégrer dans une application web.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment comprendre la structure initiale du code et l'organisation des fichiers
Comment identifier et corriger le problème qui fait disparaître le formulaire
Comment s'assurer que le formulaire est affiché correctement dans l'application web

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Utiliser Element UI pour créer des composants de formulaire dans une application Vue.js
Dépanner et corriger les problèmes liés à l'intégration des composants d'interface utilisateur
Comprendre l'importance d'inclure et de référencer correctement les bibliothèques externes dans une application web

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/viewport("Viewport Declaration") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") html/FormsandInputGroup -.-> html/forms("Form Elements") subgraph Lab Skills html/head_elems -.-> lab-445636{{"Disparu en fumée"}} html/viewport -.-> lab-445636{{"Disparu en fumée"}} html/doc_flow -.-> lab-445636{{"Disparu en fumée"}} html/embed_media -.-> lab-445636{{"Disparu en fumée"}} html/forms -.-> lab-445636{{"Disparu en fumée"}} end

Configurer la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le dossier du projet. La structure de répertoire est la suivante :

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

Où :

index.html est la page principale.
myform.vue est le fichier du composant de formulaire encapsulé.
js est le dossier pour stocker les fichiers liés à Vue.js.
element-ui-2.15.10 est le dossier pour stocker les fichiers element-ui.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez manuellement la page pour voir l'effet suivant dans votre navigateur :

Le composant de formulaire myform dans le code initial n'est pas affiché dans le navigateur.

Identifier le problème

Dans cette étape, vous allez découvrir le code initial fourni pour le projet tout en identifiant le problème qui a fait disparaître le formulaire.

Ouvrez le fichier index.html. Il s'agit du fichier HTML principal qui sert d'entrée pour l'application.
Examinez le code dans index.html. Vous pouvez constater qu'il inclut les fichiers nécessaires de Vue.js et d'Element UI, et qu'il inclut également une référence au composant myform.vue.
Ouvrez le fichier myform.vue. Il s'agit du composant Vue qui contient le formulaire que vous devez afficher.
Comprenez la structure du fichier myform.vue. Il inclut le HTML, le JavaScript et le CSS nécessaires pour le composant de formulaire.
Remarquez que le formulaire n'est pas affiché dans le navigateur, même s'il est référencé dans le fichier index.html.
Revoyez attentivement le fichier index.html une fois de plus.
Remarquez que le fichier element-ui-2.15.10/index.js n'a pas index.html introduit.

Corriger le problème

Dans cette étape, vous allez corriger le problème et vous assurer que le formulaire est affiché correctement.

Ouvrez le fichier index.html.
Ajoutez l'importation du fichier element-ui-2.15.10/index.js en bas à l'intérieur de la balise <head>.

<!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>
    <!-- style d'Element UI -->
    <link rel="stylesheet" href="./element-ui-2.15.10/index.css" />

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

Enregistrez les modifications dans le fichier index.html.
Rafraîchissez le navigateur pour voir la page mise à jour.
Assurez-vous que le formulaire est affiché comme prévu, comme le montre l'image ci-dessous :

Félicitations! Vous avez réussi à corriger le problème et à afficher le formulaire correctement.

✨ Vérifier la solution et pratiquer

Sommaire

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.