Construa um Componente de Formulário com Element UI

Introdução

Neste projeto, você aprenderá como usar o Element UI, uma popular biblioteca de UI para Vue.js, para construir um componente de formulário e integrá-lo em uma aplicação web.

👀 Pré-visualização

finished form component preview

🎯 Tarefas

Neste projeto, você aprenderá:

Como entender a estrutura inicial do código e a organização dos arquivos
Como identificar e corrigir o problema que está causando o desaparecimento do formulário
Como garantir que o formulário seja exibido corretamente na aplicação web

🏆 Conquistas

Após concluir este projeto, você será capaz de:

Usar o Element UI para criar componentes de formulário em uma aplicação Vue.js
Solucionar problemas e corrigir questões relacionadas à integração de componentes de UI
Entender a importância de incluir e referenciar corretamente bibliotecas externas em uma aplicação web

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga os passos abaixo para completar esta etapa:

Abra a pasta do projeto. A estrutura de diretórios é a seguinte:

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

Onde:

index.html é a página principal.
myform.vue é o arquivo do componente de formulário encapsulado.
js é a pasta para armazenar arquivos relacionados ao Vue.js.
element-ui-2.15.10 é a pasta para armazenar os arquivos do element-ui.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra o "Web 8080" no topo da VM e atualize manualmente a página para ver o seguinte efeito no seu navegador:

Image Description

O componente de formulário myform no código inicial não é exibido no navegador.

Identificar o Problema

Nesta etapa, você aprenderá sobre o código inicial fornecido para o projeto, enquanto identifica o problema que causou o desaparecimento do formulário.

Abra o arquivo index.html. Este é o arquivo HTML principal que serve como ponto de entrada para a aplicação.
Examine o código em index.html. Você pode ver que ele inclui os arquivos necessários do Vue.js e Element UI, e também inclui uma referência ao componente myform.vue.
Abra o arquivo myform.vue. Este é o componente Vue que contém o formulário que você precisa exibir.
Entenda a estrutura do arquivo myform.vue. Ele inclui o HTML, JavaScript e CSS necessários para o componente do formulário.
Observe que o formulário não está sendo exibido no navegador, embora seja referenciado no arquivo index.html.
Revise cuidadosamente o arquivo index.html novamente.
Note que o arquivo element-ui-2.15.10/index.js não tem index.html introduzido.

Corrigir o Problema

Nesta etapa, você corrigirá o problema e garantirá que o formulário seja exibido corretamente.

Abra o arquivo index.html.
Adicione a introdução do arquivo element-ui-2.15.10/index.js na parte inferior dentro do <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>
    <!-- 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>

Salve as alterações no arquivo index.html.
Atualize o navegador para ver a página atualizada.
Certifique-se de que o formulário seja exibido conforme o esperado, como mostrado na imagem abaixo:

Image Description

Parabéns! Você corrigiu com sucesso o problema e exibiu o formulário corretamente.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.

Desaparecendo no Ar