🚀 Trilha de Frontend com Vue

A Trilha de Frontend com Vue foi criada para ensinar os conceitos fundamentais do desenvolvimento front-end utilizando o framework Vue.js, explorando boas práticas de código, arquitetura de projetos e interfaces modernas com Vuetify.

Nesta trilha, você aprenderá desde os fundamentos do Git e GitHub, passando pela introdução ao Vue.js, componentização, gerenciamento de estado e consumo de APIs, até tópicos mais avançados como otimização de desempenho e testes automatizados.

Ao final da trilha, você terá adquirido conhecimento prático para construir aplicações Vue.js eficientes e escaláveis, aplicando boas práticas de desenvolvimento.

🔎 O que você vai aprender?
✅ Fundamentos do Vue.js e seu ecossistema
✅ Arquitetura de projetos Vue.js para aplicações escaláveis
✅ Criação de interfaces modernas e responsivas com Vuetify
✅ Boas práticas de desenvolvimento com TypeScript
✅ Gerenciamento de estado e integração com APIs
✅ Componentização e reutilização de código
✅ Melhoria de desempenho e otimização de aplicações Vue.js
✅ Testes automatizados e qualidade de código

⏳ Carga horária total: 15h30min
📌 Formato: Vídeos, artigos, leituras complementares e desafios práticos

🎯 Pré-requisitos
Para um melhor aproveitamento da trilha, é recomendado possuir conhecimentos básicos em:

• HTML: W3Schools - HTML Tutorial
• CSS: W3Schools - CSS Tutorial
• JavaScript: W3Schools - JavaScript Tutorial

💡 Como aproveitar essa trilha?
Cada módulo foi estruturado para oferecer um aprendizado progressivo e prático. Siga a sequência recomendada, pratique os conceitos e desenvolva seu próprio projeto ao longo da trilha.

🚀 Pronto para dominar o desenvolvimento front-end com Vue? Vamos começar!

1. Introdução ao Vue.js (3h)

Objetivo: Entender a estrutura e funcionamento do framework Vue.js.

• Tarefas:

  • Estudar o sistema de componentes do Vue.
  • Compreender o ciclo de vida dos componentes.
  • Trabalhar com diretivas (v-for, v-if, v-model, etc.).
  • Praticar a reatividade e entender o uso de ref, reactive, e computed.
  • Entender sobre DOM e como funciona o interpretador.

• Referências:

• [Vídeo Aula] - Introdução sobre Vue.js (15 min)

• [Documentação] - Mecanismo de Interpretação (25 min)

2. Arquitetura de Projetos Vue.js (2h)

Objetivo: Organizar um projeto Vue.js corretamente.

• Tarefas:
  • Estruturar o projeto usando boas práticas de organização de pastas e arquivos.
  • Explorar a separação de lógica (composição de componentes, reutilização de código).
  • Implementar roteamento com vue-router.
  • Criar estados globais com Vuex ou Pinia para gerenciar dados complexos.
• Referências:
  • [Documentação] - Guia de estrutura - Vuex (30 min)

3. Vuetify: Interface de Usuário (UI) (50 min)

Objetivo: Desenvolver UIs modernas e responsivas utilizando Vuetify.

• Tarefas:
  • Entender o funcionamento do grid system e layout responsivo do Vuetify.
  • Explorar e customizar componentes de interface: tabelas, botões, modais, formulários.
  • Implementar temas e customização de design.
  • Praticar com componentes avançados (como v-data-table, v-dialog, v-select).
• Referências:
  • [Documentação] - Dialog component — Vuetify (25 min)
  • [Documentação] - Select component — Vuetify (25 min)

4. Boas Práticas com TypeScript (1:20h)

Objetivo: Utilizar TypeScript para adicionar tipagem estática e aumentar a confiabilidade do código.

• Tarefas:
  • Definir corretamente as tipagens para dados e componentes.
  • Aprender sobre interfaces, tipos, e a integração com o Vue 3 (script setup com lang="ts").
  • Refatorar código para usar TypeScript de maneira eficiente.
• Referências:
  • [Tutorial] - Refactoring Vue 3 code | Reusable Form Component | Reusable Components (20 min)

5. Gerenciamento de Estado e APIs (2:30h)

Objetivo: Sincronizar o front-end com APIs, manipulando dados de maneira eficiente.

• Tarefas:
  • Integrar o front-end com APIs utilizando axios ou fetch.
  • Manipular respostas de APIs assíncronas (async/await).
  • Implementar paginação e filtros em tabelas com base em dados da API.
  • Estudar controle de erro e feedback ao usuário (ex: Swal para mostrar alertas de sucesso ou falha).
• Referências:
  • [Tutorial] - Vue JS 3 Tutorial for Beginners #6 - Using Axios to Consume APIs in Vue 3 (15 min)
  • [Documentação] - Usando Axios para Consumir APIs — Vue.js: (15 min)

6. Componentização e Reutilização de Código (1:15h)

Objetivo: Reutilizar componentes para aumentar a eficiência no desenvolvimento.

• Tarefas:
  • Criar componentes base (ex: BaseBreadcrumb, tabelas genéricas) para evitar repetição de código.
  • Desenvolver lógica reutilizável com mixins ou composables.
  • Refatorar o projeto para dividir funcionalidades em componentes menores e mais reutilizáveis.
• Referências:
  • [Documentação] - Breadcrumbs component — Vuetify (15 min)

7. Melhorias de Desempenho e Otimização (1:50h)

Objetivo: Melhorar o desempenho da aplicação Vue.js.

• Tarefas:
  • Implementar lazy loading de componentes e roteamento.
  • Utilizar técnicas de memoization para evitar recomputações desnecessárias.
  • Estudar a otimização de tabelas grandes com paginação e filtragem eficiente.
  • Utilizar funções assíncronas para carregamento assíncrono.
• Referências:
  • [Documentação] - Lazy component — Vuetify (25 min)
  • [Documentação] - Pagination component — Vuetify (25 min)

8. Testes e Qualidade de Código (2:45h)

Objetivo: Garantir a qualidade do código com testes e ferramentas de linting.

• Tarefas:
  • Configurar linting e formatação automática com ESLint e Prettier.
  • Realizar testes E2E com Cypress ou Playwright.
• Referências:
  • [Documentação] - Testes do Sistema SLAVE ONE (30 min)
  • [Documentação] - Fixtures do Cypress para testes (15 min)

9. Desafio

O desafio é desenvolver um programa que permita realizar as seguintes buscas:

1. Listar os órgãos, códigos e editais dos concursos públicos que se encaixam no perfil do candidato, tomando como base o seu CPF;
2. Listar o nome, data de nascimento e o CPF dos candidatos que se encaixam no perfil do concurso tomando com base o Código do Concurso do concurso público;

Para maiores detalhes do desafio clique no link.