Pular para conteúdo

Aula 08 – Projeto Prático I (Task Manager) 📋

Chegou a hora de consolidar tudo o que aprendemos nos Módulos 1 e 2. Vamos construir uma aplicação de Gerenciamento de Tarefas (Task Manager) aplicando componentização, reatividade, props e emits.

🎯 Escopo do Projeto

Nossa aplicação permitirá: 1. Adicionar novas tarefas. 2. Listar tarefas existentes. 3. Marcar tarefas como concluídas. 4. Remover tarefas. 5. Visualizar o progresso (contador de tarefas).

🏗️ Estrutura de Componentes

Para uma organização profissional, vamos dividir o projeto assim:

  1. App.vue: Gerencia o estado global (a lista de tarefas).
  2. FormTarefa.vue: Componente para entrada de dados.
  3. ListaTarefas.vue: Renderiza a lista de itens.
  4. ItemTarefa.vue: Exibe uma única tarefa com ações de remover/concluir.
graph TD
    App[App.vue - Estado Global]
    App --> Form[FormTarefa.vue - Input]
    App --> Lista[ListaTarefas.vue - Listagem]
    Lista --> Item[ItemTarefa.vue - Detalhe]

💻 Implementação Passo a Passo

# 1. Crie os arquivos vazios na pasta components
$ touch src/components/FormTarefa.vue
$ touch src/components/ItemTarefa.vue

# 2. Foque na lógica do App.vue
# Use ref para a lista de tarefas: const tarefas = ref([])

# 3. Implemente a comunicação
# FormTarefa EMITE 'adicionar' -> App.vue
# App.vue passa PROPS -> ListaTarefas -> ItemTarefa

💡 Dicas de Implementação

ID Único

Ao adicionar uma tarefa, use Date.now() como ID para gerar valores únicos para a :key do v-for.

Persistência Local (Bônus)

Tente usar o localStorage dentro do hook onMounted para carregar as tarefas salvas e um watch para salvar sempre que a lista mudar!

🎨 Desafio Visual

Utilize o que aprendeu sobre CSS Scoped para: * Riscar o texto da tarefa quando estiver concluída (text-decoration: line-through). * Mudar a cor de fundo do botão "Remover" para vermelho.

📝 Checkpoint de Entrega

Ao final desta aula, o aluno deve ter uma pasta src/ organizada, sem erros no console do navegador e com a reatividade funcionando plenamente entre os 4 componentes criados.

🚀 Próxima Aula: Vamos sair da página única e aprender a criar múltiplas rotas com o Vue Router!