Exercícios
-
Para fixar os conteúdos de rotas e componentes, sugiro a realização dos seguintes exercícios:
- Crie um componente chamado
HeaderComponent
que exibe um título e uma logo. - Altere o
App.Vue
para que o componenteHeaderComponent
seja exibido em todas as páginas, dentro da tagheader
. - Crie um component chamado
MenuComponent
que exibe uma lista de links para as páginasHome
,Projetos
,Contato
eSobre nós
. - Altere o layout da aplicação para que o componente
MenuComponent
seja exibido em todas as páginas, dentro da tagaside
. - Crie um componente chamado
FooterComponent
que exibe o texto “Desenvolvido por [seu nome]”. - Altere o layout da aplicação para que o componente
FooterComponent
seja exibido em todas as páginas. Note que ele precisa ser incorporado nagrid
do layout.
- Crie um componente chamado
-
Desafio: na página de produtos, faça a listagem de produtos, como feito nas aulas de
components
. Edite o componenteProductsView
para exibir uma lista de produtos. Cada produto deve conter umid
,nome
epreco
. Utilize o componenteProductList
para exibir a listagem dos produtos. Garanta que o método para remover o produto esteja funcionando.
< Criando um projeto com Vue Router Rotas dinâmicas (Listagem de produtos) >