Construir un Componente de Formulario con Element UI

Introducción

En este proyecto, aprenderá a usar Element UI, una popular biblioteca de interfaz de usuario (UI) para Vue.js, para crear un componente de formulario y integrarlo en una aplicación web.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderá:

Cómo entender la estructura inicial del código y la organización de archivos
Cómo identificar y corregir el problema que hace que el formulario desaparezca
Cómo garantizar que el formulario se muestre correctamente en la aplicación web

🏆 Logros

Después de completar este proyecto, podrá:

Usar Element UI para crear componentes de formulario en una aplicación Vue.js
Solucionar y corregir problemas relacionados con la integración de componentes de interfaz de usuario
Comprender la importancia de incluir y referenciar adecuadamente bibliotecas externas en una aplicación web

Configurar la Estructura del Proyecto

En este paso, configurará los archivos y la estructura del proyecto. Siga los pasos siguientes para completar este paso:

Abra la carpeta del proyecto. La estructura de directorios es la siguiente:

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

Donde:

index.html es la página principal.
myform.vue es el archivo del componente de formulario encapsulado.
js es la carpeta para almacenar archivos relacionados con Vue.js.
element-ui-2.15.10 es la carpeta para almacenar archivos de element-ui.

Haga clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

Luego, abra "Web 8080" en la parte superior de la VM y actualice manualmente la página para ver el siguiente efecto en su navegador:

El componente de formulario myform en el código inicial no se muestra en el navegador.

✨ Revisar Solución y Practicar

Identificar el problema

En este paso, aprenderá sobre el código inicial proporcionado para el proyecto mientras identifica el problema que hizo que el formulario desapareciera.

Abra el archivo index.html. Este es el archivo HTML principal que sirve como punto de entrada para la aplicación.
Examine el código en index.html. Puede ver que incluye los archivos necesarios de Vue.js y Element UI, y también incluye una referencia al componente myform.vue.
Abra el archivo myform.vue. Este es el componente de Vue que contiene el formulario que necesita mostrar.
Comprenda la estructura del archivo myform.vue. Incluye el HTML, JavaScript y CSS necesarios para el componente de formulario.
Observe que el formulario no se está mostrando en el navegador, aunque se hace referencia a él en el archivo index.html.
Vuelva a revisar detenidamente el archivo index.html.
Observe que el archivo element-ui-2.15.10/index.js no tiene index.html introducido.

✨ Revisar Solución y Practicar

Corregir el problema

En este paso, corregirá el problema y asegurará de que el formulario se muestre correctamente.

Abra el archivo index.html.
Agregue la introducción del archivo element-ui-2.15.10/index.js al final dentro de la etiqueta <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>
    <!-- Estilo de element-ui -->
    <link rel="stylesheet" href="./element-ui-2.15.10/index.css" />

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

Guarde los cambios en el archivo index.html.
Actualice el navegador para ver la página actualizada.
Asegúrese de que el formulario se muestre como se esperaba, como se muestra en la imagen siguiente:

¡Felicitaciones! Ha corrido con éxito el problema y mostrado correctamente el formulario.

✨ Revisar Solución y Practicar

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.

Desaparecido en el Aire

Introducción

👀 Vista previa

🎯 Tareas

🏆 Logros

Configurar la Estructura del Proyecto

Identificar el problema

Corregir el problema

Resumen