Roadmap: Desenvolvimento Frontend com Vue

Curso de Desenvolvimento Frontend com Vue

Do conceito ao projeto escalável com Vue.js e Vuetify

📋 Visão Geral

  • ⚙️ Geral e Avisos

    Informações cruciais sobre a metodologia e avisos importantes para o início da jornada.

  • 📚 Visão Geral do Framework

    Entenda o que torna o Vue.js um framework progressivo e suas principais características.

🚀 Trilha de Frontend com Vue

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

    📦 Reatividade, diretivas e a instância do Vue.

  • 2. Arquitetura de Projetos (2h)

    🏗️ Organização de pastas, padrão SFC (Single File Components) e roteamento.

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

    🎨 Criando interfaces modernas com Material Design e componentes prontos.

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

    🛡️ Adicionando tipagem forte para evitar erros comuns e melhorar o IntelliSense.

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

    🔄 Uso de Pinia ou Vuex e integração com Axios para consumo de dados externos.

  • 6. Componentização e Reuso (1:15h)

    🧩 Criação de componentes genéricos, Props, Emits e Slots.

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

    ⚡ Lazy loading, otimização do bundle e ciclo de vida avançado.

  • 8. Testes e Qualidade (2:45h)

    🧪 Testes unitários com Vitest e E2E para garantir a estabilidade da aplicação.

  • 🏁 Desafio Prático

    Aplicação de todos os conceitos em um projeto real de ponta a ponta.

📌 CRUD com Vue

  • 📜 Pré-requisitos e Ferramentas ⛏️

    Preparação do ambiente: Node.js, NPM/Yarn e VS Code extensions.

  • 🦝 Padrões de Projeto e Divisão 🗂️

    Organização modular: Modelos, Repositórios e Controllers.

  • 👣 Passo a Passo do Desenvolvimento

    Desde a definição da 🏛️ Model até a criação da 🖥️ View final.

  • 🤝 Créditos e Networking

    🔗 LinkedIn dos criadores do conteúdo.

📑 Manual de Boas Práticas - Frontend

  • 🏗️ Estrutura e Arquitetura Modular

    Como manter o código limpo e escalável utilizando separação de responsabilidades.

  • 📐 Padrões de Código e Tipagem

    Uso correto do TypeScript e padrões de nomenclatura (clean code).

  • 🔄 Versionamento e Documentação 📝

    Fluxo de colaboração Git, Conventional Commits e documentação técnica.

🎓 Certificação do Curso

  • 📜 Certificado do Curso de Frontend

    Validação das competências em Vue.js para o mercado de trabalho.