LE06 - Componentização e Rotas Vue + Vue Router

Prazo: 11/12/2022 Para cada dia em atraso será descontado 0.5 pontos da nota da atividade.

Envio:

Enviar, através do formulário, o link para o repositório no github com a implementação da atividade descrita a seguir.

Descrição:

Nesta atividade vamos transformar nosso Tzeet em um projeto frontend escrito usando Vue.Js. Ao longo desta atividade iremos refatorar nosso código para que possamos dividí-los em Single File Components do Vue.JS. Como nossa aplicação será uma Single Page Applications, precisaremos utilizar o Vue Router para manter a navegação entre as páginas do Tzeet funcionando.

Criando um seu projeto do Tzeet usando Vue e Vite

Se você usa um repositório git, sugiro que você faça o backup da pasta do projeto ou simplesmente altere o nome da pasta. O projeto deve criado usando um dos comandos abaixo:

# npm 6.x
npm create vite@latest tzeet --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest tzeet -- --template vue

# yarn
yarn create vite tzeet --template vue

Depois disso o projeto terá a estrutura padrão de um aplicação escrita usando VueJs.

Dica:

  • Inicia com a migração do arquivo que representa a home do usuário.
  • Copie todo o <head> deste arquivo para o arquivo index.html gerado pelo vite.
  • Adicione também, os scripts do home no final do <body> do arquivo recém gerado.
  • O conteúdo do <body> do arquivo de home do usuário deve ser inserido inicialmente dentro do *

Pronto, depois desse passo a página home do usuário deve estar totalmente funcional utilizando a estrutura do projeto Vue. O próximo passo é começar a componentização do Tzeeter.

Componentizando

Durante esta tarefa você deverá quebrar a interface do usuário do Tzeet em componentes (building block). Desta forma, as páginas do Tzeet, serão descritas por meios do componentes que juntos a tornam funcional. Elementos que se repetem em uma página são os principais candidatos a se tornarem componentes. A figura abaixo mostra alguns componentes que você deve criar:

Componentes do home Compoenente do modal Componentes:

  • Crie um componente que representa um item do menu de navegação
  • Na coluna do meio, crie um componente que representa um Tzeet
  • Além disso, crie um componente para encapsular o formulário de envio de Tzeet
    • Veja que esse componente aparece na coluna central da página home do usuário e no modal
  • Na coluna da direita, crie um componente para representar sugestões de usuários a serem seguidos

Atenção:

  • Os componentes criados devem ser salvos na pasta components existente na estrutura do projeto e os arquivos devem possuir a extensão .vue
  • As páginas do Tzeet: home, profile, login e signup, devem ser arquivos .vue, salvos na pasta views e devem ser contruídas a partir de compoenentes

Rotas

Para permitir a navegação entre as páginas do Tzeet, você precisará configurar o Vue-Router. Se ovcê seguiu os passos anteriories, você vai precisa alterar o App.vue de forma que dentro do <body>, a tag <router-view> exista, já que o conteúdo roteado sera renderizado no lugar dessa tag.

Você deve criar as seguintes rotas:

  • /login => Página de Login
  • /signup -> Página de cadastro de usuários
  • / ou /home => Página home do usuário
  • /profile => Perfil do usuário