Pular para conteúdo

Desenvolvimento Frontend com Vue.js 💻

Domine a criação de interfaces modernas, reativas e de alta performance com Vue 3, Vite, Pinia e Vue Router.

Foco do Curso

Metodologia: Aprendizado prático focado na construção de Single Page Applications (SPAs) profissionais, utilizando as melhores práticas do ecossistema Vue.

🎯 O Que Você Vai Aprender

  • Fundamentos do Vue 3 --- Aprenda reatividade, Data Binding, diretivas e o poder da Composition API no desenvolvimento moderno. Ir para Módulo 1

  • Componentização --- Crie interfaces modulares e reutilizáveis através de componentes, props, eventos e slots para máxima produtividade. Ver Componentes

  • Ecossistema Vue --- Domine o gerenciamento de rotas com Vue Router e o estado global da aplicação com Pinia. Ver Ecossistema

  • Projetos Reais --- Aplique seus conhecimentos em projetos práticos, desde Task Managers até CRUDs consumindo APIs REST. Ver Projetos

📚 Jornada de Aprendizado (16 Aulas)

O curso é estruturado em quatro fases de especialização.

🧱 Fase 1: Fundamentos e Estrutura (Aulas 01-04)

🏗️ Fase 2: Componentes e Prática (Aulas 05-08)

🔌 Fase 3: Ecossistema e Integração (Aulas 09-12)

🚀 Fase 4: Profissionalização e Final (Aulas 13-16)

Começar Minha Jornada Vue.js

Plano de Ensino 🧭

Curso: Desenvolvimento Frontend com Vue.js
Público-alvo: Estudantes de ADS, Ciência da Computação e Desenvolvedores de Software
Carga Horária: 20 Aulas (80 Horas Teórico-Práticas)

🎯 1. Objetivos do Curso

  • Compreender os fundamentos conceituais e arquiteturais de Desenvolvimento Frontend com Vue.js.
  • Aplicar padrões de projeto, sintaxe moderna e boas práticas da indústria.
  • Desenvolver soluções completas através de exercícios práticos e desafios de projeto.

📚 2. Cronograma de Aulas (Matriz de 20 Semanas)

Aula Tema Central Atividades e Entregas
01 Introdução ao Frontend Moderno Teoria, Prática Guiada, Quiz e Exercícios
02 Estrutura do Projeto Vue 3 ️ Teoria, Prática Guiada, Quiz e Exercícios
03 Reatividade e Data Binding Teoria, Prática Guiada, Quiz e Exercícios
04 Diretivas e Renderização Condicional Teoria, Prática Guiada, Quiz e Exercícios
05 Componentes e Props Teoria, Prática Guiada, Quiz e Exercícios
06 Eventos e Comunicação entre Componentes Teoria, Prática Guiada, Quiz e Exercícios
07 Ciclo de Vida e Hooks Teoria, Prática Guiada, Quiz e Exercícios
08 Projeto Prático I (Task Manager) Teoria, Prática Guiada, Quiz e Exercícios
09 Roteamento com Vue Router ️ Teoria, Prática Guiada, Quiz e Exercícios
10 Consumo de API REST Teoria, Prática Guiada, Quiz e Exercícios
11 Gerenciamento de Estado com Pinia Teoria, Prática Guiada, Quiz e Exercícios
12 Projeto Prático II (CRUD Completo) Teoria, Prática Guiada, Quiz e Exercícios
13 Boas Práticas e Arquitetura Teoria, Prática Guiada, Quiz e Exercícios
14 Estilização Moderna Teoria, Prática Guiada, Quiz e Exercícios
15 Build, Deploy e Produção Teoria, Prática Guiada, Quiz e Exercícios
16 Projeto Final e Apresentação Teoria, Prática Guiada, Quiz e Exercícios
17 Composition API Avançada e Composables Reutilizáveis Teoria, Prática Guiada, Quiz e Exercícios
18 Gerenciamento de Estado Global com Pinia Teoria, Prática Guiada, Quiz e Exercícios
19 Diretivas Customizadas e Render Functions Teoria, Prática Guiada, Quiz e Exercícios
20 Projeto Capstone: Aplicação Vue 3 Autônoma Reativa Teoria, Prática Guiada, Quiz e Exercícios

🧠 3. Metodologia de Ensino

  • Teoria Fundamentada: Aulas com conceitos detalhados, diagramas arquiteturais e sintaxe de referência.
  • Ciclo Teoria ⇄ Prática: Cada aula conta com Quiz Interativo (10 questões) para validação imediata, Lista de Exercícios Sanfonados (com Gabarito Explicado) e Desafio de Projeto Prático.
  • Laboratório Contínuo: Ambientes configurados passo a passo na seção de Setups da plataforma.

💼 4. Competências e Perfil Desenvolvido

  • Dominar as ferramentas e fluxos de desenvolvimento de Desenvolvimento Frontend com Vue.js.
  • Resolver problemas técnicos de alta complexidade com código limpo e performático.
  • Construir portfólio prático com 20 projetos aplicados.

📊 5. Critérios de Avaliação

  • 20 Listas de Exercícios: Resolução individual dividida em Básico, Intermediário e Desafio.
  • 20 Quizzes Interativos: Validação formativa com feedback imediato via JavaScript.
  • 20 Desafios de Projetos: Aplicações práticas consolidando o aprendizado de cada unidade.

Aulas

Aula 01 – Introdução ao Frontend Moderno 🚀

Seja bem-vindo à primeira aula do curso de Desenvolvimento Frontend com Vue.js! Hoje vamos entender o que torna o frontend moderno tão poderoso e por que o Vue.js é uma das melhores escolhas para desenvolvedores hoje.

🧠 Conceitos Fundamentais

A Evolução do Frontend

Antigamente, a web era composta por páginas estáticas (HTML) enviadas pelo servidor. Hoje, trabalhamos com aplicações dinâmicas que rodam quase inteiramente no navegador do usuário.

Era Característica Tecnologia
Página Estática Documentos simples HTML/CSS
Web 2.0 Interatividade básica jQuery/AJAX
Modern Web Componentização e Reatividade Vue/React/Angular

SPA vs MPA

É crucial entender a diferença entre Single Page Application (SPA) e Multi Page Application (MPA).

graph TD
    A[Usuário clica em link] --> B{Tipo de App}
    B -- MPA --> C[Servidor recarrega página inteira]
    B -- SPA --> D[JavaScript atualiza apenas o conteúdo necessário]
    C --> E[Interface "pisca" e demora]
    D --> F[Experiência fluida e instantânea]

Note

No Vue.js, focamos na construção de SPAs, onde o roteamento e a renderização acontecem no lado do cliente (Client-side Rendering).

📦 O que é Vue.js?

O Vue é um framework progressivo. Isso significa que você pode usá-lo apenas para uma pequena parte do seu site ou para construir uma aplicação inteira do zero.

Pilares do Vue 3:

  1. Reatividade: Os dados e a interface estão sempre sincronizados.
  2. Componentização: A interface é dividida em pequenas peças reutilizáveis.
  3. Fácil Aprendizado: Curva de aprendizado suave comparada a outros frameworks.

💻 Setup do Ambiente

Para começar, precisamos preparar nossa máquina.

# 1. Verifique se o Node.js está instalado
$ node -v
v20.x.x

# 2. Crie seu primeiro projeto usando Vite
$ npm create vite@latest meu-projeto-vue -- --template vue

# 3. Entre na pasta e instale as dependências
$ cd meu-projeto-vue
$ npm install

# 4. Inicie o servidor de desenvolvimento
$ npm run dev

Important

Certifique-se de ter o Node.js (LTS) instalado em sua máquina antes de prosseguir.

📝 Exercício de Fixação

  1. Explique com suas palavras a principal vantagem de uma SPA sobre uma MPA.
  2. Instale o Node.js em sua máquina e execute os comandos acima para criar seu primeiro projeto "Hello World" com Vite.

🚀 Dica: No próximo encontro, vamos explorar a fundo a estrutura de pastas desse projeto que acabamos de criar!

Aula 02 – Estrutura do Projeto Vue 3 🏗️

Agora que temos o ambiente pronto, vamos entender cada arquivo e pasta gerada pelo Vite. Dominar a estrutura é o primeiro passo para organizar aplicações escaláveis.

📂 Visão Geral do Diretório

Quando você cria um projeto com npm create vite@latest, a seguinte estrutura é gerada:

  • node_modules/: Onde moram as bibliotecas que o Vue precisa.
  • public/: Arquivos estáticos que não passam pelo processamento (como o favicon).
  • src/: Onde a mágica acontece! Todo o seu código Vue ficará aqui.
    • assets/: Imagens e estilos globais.
    • components/: Seus componentes Vue reutilizáveis.
    • App.vue: O componente raiz da aplicação.
    • main.js: O ponto de entrada que "monta" o Vue no HTML.
  • index.html: O arquivo HTML principal (único na SPA).
  • package.json: Lista de dependências e scripts do projeto.

🔍 O Ponto de Entrada: main.js

O arquivo main.js é responsável por inicializar a instância do Vue e conectá-la ao elemento #app do seu index.html.

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')

graph LR
    A[index.html] -- contem --> B["div id='app'"]
    C[main.js] -- importa --> D[App.vue]
    C -- monta em --> B

🧩 Single File Components (SFC)

No Vue, usamos extensões .vue. Eles são chamados de Single File Components porque unem Estrutura, Lógica e Estilo em um único arquivo.

Anatomia de um arquivo .vue:

<template>
  <!-- 1. Estrutura (HTML) -->
  <div class="saudacao">
    <h1>{{ mensagem }}</h1>
  </div>
</template>

<script setup>
  // 2. Lógica (JS/Composition API)
  const mensagem = "Olá, Estrutura Vue!"
</script>

<style scoped>
  /* 3. Estilo (CSS) */
  h1 { color: #42b983; }
</style>

Tip

O atributo scoped no <style> garante que o CSS deste arquivo não afete outros componentes da aplicação.

💻 Explorando o Projeto

Vamos rodar o projeto e ver as mudanças em tempo real.

# Inicie o modo desenvolvimento
$ npm run dev

# Abra o App.vue no seu editor e mude o texto do h1
# Salve o arquivo e veja o navegador atualizar instantaneamente!

Warning

Nunca delete a div#app do seu index.html, ou o Vue não terá onde renderizar os componentes!

📝 Exercício

  1. Explore a pasta src/components e identifique o componente HelloWorld.vue.
  2. Tente criar um novo arquivo chamado MeuComponente.vue dentro da pasta components seguindo a estrutura (Template, Script, Style).

🚀 Próxima Aula: Vamos aprender como o Vue gerencia dados de forma reativa!

Aula 03 – Reatividade e Data Binding ⚡

A mágica do Vue.js reside em seu sistema de reatividade. Quando os dados mudam no JavaScript, a interface reflete essa mudança instantaneamente sem que você precise manipular o DOM manualmente.

🏗️ Sintaxe Declarativa

O Vue utiliza uma sintaxe baseada em HTML que permite "vincular" (bind) o DOM aos dados da instância.

Interpolação (Mustache)

Para exibir dados simples, usamos as chaves duplas: {{ }}.

<template>
  <p>Bem-vindo, {{ nome }}!</p>
</template>

<script setup>
  const nome = "Usuário"
</script>

🔗 Diretivas de Binding

v-bind (Binding de Atributos)

Usado para vincular atributos HTML (como src, href, disabled) a uma variável.

<!-- Sintaxe completa -->
<img v-bind:src="urlImagem">

<!-- Atalho (Mais comum) -->
<img :src="urlImagem">

v-model (Two-Way Data Binding)

Crucial para formulários. Ele sincroniza o valor de um input com uma variável em tempo real.

graph LR
    Input[Input no HTML] -- digitação --> Variable[Variável no Script]
    Variable -- alteração --> Input

🧪 Sistema de Reatividade (Vue 3)

Na Composition API, usamos a função ref() para dizer ao Vue que uma variável deve ser reativa.

<script setup>
import { ref } from 'vue'

// Criando uma variável reativa
const contador = ref(0)

function incrementar() {
  // Para acessar o valor no script, usamos .value
  contador.value++
}
</script>

<template>
  <button @click="incrementar">Contagem: {{ contador }}</button>
</template>

Important

Lembre-se: No <script setup>, você usa variavel.value. No <template>, o Vue faz o "unwrapping" automático e você usa apenas {{ variavel }}.

🧠 Conceitos Chave

O que é Reatividade?

É a capacidade de um sistema de propagar mudanças automaticamente. No Vue, isso é feito através de Proxies do JavaScript que observam quando uma propriedade é lida ou alterada.

💻 Mão na Massa

Tente criar um campo de input que atualize um parágrafo enquanto você digita:

<script setup>
import { ref } from 'vue'
const texto = ref('')
</script>

<template>
  <input v-model="texto" placeholder="Digite algo...">
  <p>Você digitou: {{ texto }}</p>
</template>

📝 Exercício

  1. Crie uma variável reativa chamada cor e vincule-a a um input de texto. Use essa variável para mudar a cor de um parágrafo via :style="{ color: cor }".
  2. Qual a diferença entre v-bind e v-model?

🚀 Próxima Aula: Vamos aprender a renderizar listas e esconder elementos condicionalmente!

Aula 04 – Diretivas e Renderização Condicional 🌈

Nem sempre queremos mostrar tudo na tela ao mesmo tempo. Às vezes, dependemos de uma condição ou de uma lista de dados vinda de uma API. É aqui que entram as diretivas estruturais.

🌓 Renderização Condicional

v-if, v-else-if e v-else

Essas diretivas adicionam ou removem o elemento do DOM completamente conforme a condição.

<template>
  <button @click="logado = !logado">
    {{ logado ? 'Sair' : 'Entrar' }}
  </button>

  <p v-if="logado">Bem-vindo ao sistema reservado! 🎉</p>
  <p v-else>Por favor, faça login para continuar. 🔒</p>
</template>

<script setup>
import { ref } from 'vue'
const logado = ref(false)
</script>

v-show

Diferente do v-if, o v-show apenas alterna o CSS display: none. O elemento continua no DOM.

Tip

Use v-if para condições que mudam pouco e v-show para elementos que alternam de visibilidade com muita frequência (melhor performance).

🔄 Renderização de Listas (v-for)

Para percorrer arrays e renderizar múltiplos elementos.

<template>
  <ul>
    <li v-for="(item, index) in tarefas" :key="index">
      {{ index + 1 }} - {{ item }}
    </li>
  </ul>
</template>

<script setup>
const tarefas = ['Aprender Vue', 'Lavar louça', 'Fazer exercícios']
</script>

Important

Sempre use o atributo :key. Ele ajuda o algoritmo de reatividade do Vue a identificar quais itens mudaram, foram adicionados ou removidos de forma eficiente.

⚡ Manipulação de Eventos (v-on)

Para ouvir eventos do DOM (click, submit, keyup, etc).

<!-- Sintaxe completa -->
<button v-on:click="contar">Somar</button>

<!-- Atalho (Padrão) -->
<button @click="contar">Somar</button>

<!-- Modificadores -->
<form @submit.prevent="salvar"> <!-- Previne o recarregamento da página -->

📊 Fluxo de Decisão

graph TD
    A[Dado mudou?] --> B{v-if?}
    B -- Sim/Verdade --> C[Adiciona ao DOM]
    B -- Não/Falso --> D[Remove do DOM]
    A --> E{v-for?}
    E -- Lista --> F[Cria múltiplos elementos clonados]

💻 Prática Sugerida

Crie uma lista de tarefas onde você pode: 1. Digitar uma nova tarefa num input. 2. Clicar num botão para adicionar à lista (array reativo). 3. Mostrar uma mensagem "Sua lista está vazia" caso não haja itens (v-if).

📝 Exercício

  1. Qual a importância do atributo :key no v-for?
  2. Explique a diferença técnica entre v-if e v-show.
  3. Crie um campo que ao digitar "Vue" mostre uma imagem secreta na tela.

🚀 Fim do Módulo 1! No próximo módulo, vamos decompor nossa aplicação em componentes menores e profissionais.

Aula 05 – Componentes e Props 🧩

A componentização é o coração do Vue.js. Em vez de uma página monolítica, dividimos a UI em pequenas peças independentes e reutilizáveis chamadas Componentes.

🏗️ Criando seu Primeiro Componente

Um componente no Vue é um arquivo .vue que pode ser importado por outros.

  1. Crie src/components/CardUsuario.vue:
<template>
  <div class="card">
    <h2>{{ nome }}</h2>
    <p>{{ profissao }}</p>
  </div>
</template>

<script setup>
// Definindo o que o componente recebe de fora (Props)
defineProps(['nome', 'profissao'])
</script>

<style scoped>
.card { border: 1px solid #ccc; padding: 10px; border-radius: 8px; }
</style>

📥 Props: Comunicação Pai → Filho

As Props são canais de entrada de dados. Servem para passar informações do componente pai para o filho.

No arquivo App.vue (Pai):

<template>
  <h1>Meus contatos:</h1>

  <!-- Usando o componente e passando dados via Props -->
  <CardUsuario nome="Ricardo" profissao="Desenvolvedor" />
  <CardUsuario nome="Maria" profissao="Designer" />
</template>

<script setup>
import CardUsuario from './components/CardUsuario.vue'
</script>

graph TD
    App[App.vue - Pai] -- "Passa: nome='Ricardo'" --> Card[CardUsuario.vue - Filho]

🛡️ Validação de Props

É uma boa prática definir explicitamente o tipo e se a prop é obrigatória para evitar erros de desenvolvimento.

defineProps({
  nome: {
    type: String,
    required: true
  },
  idade: {
    type: Number,
    default: 18 // Valor caso não seja passado
  }
})

🧠 Conceitos Chave

Componentes são Legos

Pense nos componentes como peças de Lego. Cada peça tem uma função específica e pode ser usada em diferentes lugares do "castelo" (sua aplicação).

💻 Mão na Massa

Crie um componente chamado AlertaMensagem.vue que receba uma prop tipo (pode ser 'sucesso' ou 'erro') e uma prop mensagem. Use o v-if para mudar a cor de fundo baseado no tipo.

📝 Exercício

  1. O que são Props e qual a direção que os dados fluem ao usá-las?
  2. Por que é importante usar o atributo scoped no estilo de um componente?
  3. Crie um componente CardProduto.vue que receba nome, preço e uma booleana disponivel.

🚀 Próxima Aula: Como o componente filho avisa o pai que algo aconteceu? Descubra os Emits!

Aula 06 – Eventos e Comunicação entre Componentes 📡

Já sabemos como enviar dados para baixo (Pai → Filho) com Props. Mas e se o filho precisar avisar ao pai que um botão foi clicado ou um formulário foi preenchido? Usamos Events (Emits).

📤 Emitindo Eventos (Filho → Pai)

O componente filho "grita" um evento e o pai fica "ouvindo".

1. No Componente Filho (BotaoAcao.vue):

<template>
  <button @click="enviarClique">Clique aqui!</button>
</template>

<script setup>
// Declarando quais eventos este componente pode emitir
const emit = defineEmits(['clicouNoBotao'])

function enviarClique() {
  // Emitindo o evento com um dado opcional
  emit('clicouNoBotao', 'Dados enviados do filho')
}
</script>

2. No Componente Pai (App.vue):

<template>
  <!-- Ouvindo o evento com @ (assim como @click) -->
  <BotaoAcao @clicou-no-botao="tratarEvento" />

  <p>Mensagem recebida: {{ mensagem }}</p>
</template>

<script setup>
import { ref } from 'vue'
import BotaoAcao from './components/BotaoAcao.vue'

const mensagem = ref('')

function tratarEvento(payload) {
  mensagem.value = payload
}
</script>

📊 Fluxo de Comunicação

sequenceDiagram
    participant P as Pai (App.vue)
    participant F as Filho (BotaoAcao.vue)
    P->>F: Props (Dados)
    Note over F: Usuário interage
    F-->>P: Emit (Evento)

🔄 Comunicação entre Irmãos

Componentes "irmãos" não se comunicam diretamente. * Padrão: O irmão enviador emite para o pai, e o pai passa para o outro irmão via Prop. * Avançado: Veremos no futuro o uso de Stores (Pinia) para estado global.

🧠 Boas Práticas

Nomes de Eventos

Enquanto props usam camelCase no script e kebab-case no HTML, os eventos devem, por convenção, sempre usar kebab-case nos emits: emit('atualizar-lista').

💻 Mão na Massa

Crie um componente ItemTarefa.vue que tenha um botão para "Remover". Ao clicar, ele deve emitir um evento remover passando o ID da tarefa para o pai.

📝 Exercício

  1. Qual a diretiva usada no pai para "ouvir" um evento emitido pelo filho?
  2. Como passamos dados adicionais junto com um evento emitido?
  3. Explique por que componentes irmãos não se falam diretamente.

🚀 Próxima Aula: Vamos conhecer os momentos "mágicos" do Vue com o Ciclo de Vida!

Aula 07 – Ciclo de Vida e Hooks 🔄

Todo componente Vue passa por uma série de etapas desde o momento em que é criado até ser destruído. Essas etapas são chamadas de Lifecycle Hooks.

🏗️ O Ciclo de Vida

Imagine o componente como um ser vivo: ele nasce (mount), cresce/muda (update) e morre (unmount).

graph TD
    A[Setup] --> B[onMounted]
    B --> C{Dado mudou?}
    C -- Sim --> D[onUpdated]
    D --> C
    C -- Fechou página --> E[onUnmounted]

🎣 Hooks mais comuns

onMounted

Chamado quando o componente está pronto na tela. É o lugar perfeito para buscar dados de uma API ou configurar timers.

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log("O componente apareceu na tela! 🚀")
  // Iniciar chamada de API aqui
})
</script>

onUnmounted

Chamado logo antes do componente ser removido do DOM. Ótimo para limpar "lixo", como parar intervalos de tempo ou remover event listeners globais.

<script setup>
import { onMounted, onUnmounted } from 'vue'

let intervalId

onMounted(() => {
  intervalId = setInterval(() => console.log("Ping!"), 1000)
})

onUnmounted(() => {
  clearInterval(intervalId) // Limpeza necessária para não travar o navegador
})
</script>

🧠 Por que usar Hooks?

Organização

Os hooks permitem que você execute código em momentos estratégicos, garantindo que sua aplicação seja performática e não tenha vazamentos de memória (memory leaks).

🧱 Organização de Pastas Profissional

À medida que o projeto cresce, a pasta src/ deve ser organizada: * src/components/: Componentes genéricos (Botões, Inputs). * src/views/: Componentes que representam páginas inteiras. * src/services/: Arquivos JavaScript para chamadas de API.

💻 Prática Sugerida

Crie um componente que mostre um relógio digital que atualiza a cada segundo usando setInterval. Lembre-se de usar o onUnmounted para parar o relógio se o usuário sair da página.

📝 Exercício

  1. Em qual hook devemos fazer requisições para o servidor?
  2. O que acontece se não limparmos um setInterval no onUnmounted?
  3. Qual hook é disparado toda vez que um dado reativo exibido na tela é alterado?

🚀 Próxima Aula: Chegou a hora do nosso primeiro Projeto Prático Integrador! Vamos construir um Task Manager do zero.

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!

Aula 09 – Roteamento com Vue Router 🛣️

Em uma Single Page Application (SPA), não mudamos de arquivo HTML ao navegar. Em vez disso, o JavaScript troca o componente que está sendo exibido na tela. O responsável por isso é o Vue Router.

🏗️ Conceito de Rota

Uma rota mapeia uma URL (ex: /contato) para um componente (ex: ContatoView.vue).

graph LR
    URL["/sobre"] --> Router[Vue Router]
    Router --> Comp[SobreView.vue]
    Comp --> Tela[Interface Atualizada]

⚙️ Configuração Básica

Geralmente configuramos as rotas em um arquivo dedicado: src/router/index.js.

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import SobreView from '../views/SobreView.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: HomeView },
    { path: '/sobre', component: SobreView }
  ]
})

export default router

🧩 Componentes do Router

O Vue Router nos fornece dois componentes essenciais:

  1. <RouterView />: O "buraco" onde o componente da rota ativa será renderizado.
  2. <RouterLink>: O substituto da tag <a> para navegação interna sem recarregar a página.
<!-- App.vue -->
<template>
  <nav>
    <RouterLink to="/">Home</RouterLink> |
    <RouterLink to="/sobre">Sobre</RouterLink>
  </nav>

  <main>
    <RouterView /> <!-- Componente da rota aparece aqui -->
  </main>
</template>

⚡ Navegação Programática

Às vezes, queremos mudar de página via código (ex: após o login).

import { useRouter } from 'vue-router'

const router = useRouter()

function irParaHome() {
  router.push('/')
}

🛡️ Guards de Rota

Podemos impedir que o usuário acesse certas páginas se não estiver logado.

Segurança

router.beforeEach permite verificar permissões antes de carregar a rota. Lembre-se que segurança real deve ser feita no Backend; no Frontend é apenas para UX.

💻 Mão na Massa

  1. Instale o router: npm install vue-router@4.
  2. Crie duas "Views" simples na pasta src/views.
  3. Configure o roteador e use o <RouterView /> no seu App.vue.

📝 Exercício

  1. Qual a diferença entre usar <a> e <RouterLink> em uma SPA?
  2. Para que serve o componente <RouterView />?
  3. Como passamos parâmetros dinâmicos em uma rota (ex: /perfil/123)?

🚀 Próxima Aula: Vamos conectar nosso app ao mundo real consumindo uma API REST!

Aula 10 – Consumo de API REST 🌐

Nenhuma aplicação moderna vive isolada. Precisamos buscar dados de servidores e salvar informações. Para isso, usamos o protocolo HTTP e a biblioteca Axios.

🏗️ O que é uma API REST?

É uma forma padronizada de comunicação entre sistemas. Usamos Verbos HTTP para dizer o que queremos fazer:

  • GET: Buscar dados.
  • POST: Criar novos dados.
  • PUT: Atualizar dados existentes.
  • DELETE: Remover dados.

🚀 Usando Axios no Vue

O Axios é um cliente HTTP baseado em Promessas que facilita muito as requisições.

# Instale a biblioteca
$ npm install axios

Exemplo de busca de dados no onMounted:

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const usuarios = ref([])

onMounted(async () => {
  try {
    const response = await axios.get('https://api.exemplo.com/users')
    usuarios.value = response.data
  } catch (error) {
    console.error("Erro ao carregar usuários:", error)
  }
})
</script>

📊 Fluxo da Requisição

sequenceDiagram
    participant V as Vue (Client)
    participant A as API (Server)
    V->>A: GET /produtos
    Note right of A: Processa no Banco de Dados
    A-->>V: JSON { id: 1, nome: 'Teclado' }
    Note left of V: Vue atualiza a Ref e a tela muda!

🧱 Organização: O padrão Service

Não é bom espalhar axios.get por todos os componentes. Criamos uma pasta services/ para isolar a lógica de API.

Service Pattern

Crie src/services/api.js para configurar a URL base e reutilizar as funções de chamada.

🧠 Tratamento de Erros e Loading

Experiência do Usuário (UX)

Sempre mostre um "Carregando..." enquanto a API não responde e trate erros com mensagens amigáveis para o usuário caso o servidor caia.

💻 Prática Sugerida

Utilize a JSONPlaceholder (uma API de testes gratuita) para listar posts de um blog falso em seu projeto Vue.

📝 Exercício

  1. Qual a vantagem do Axios sobre o fetch nativo do navegador?
  2. Por que usamos o async/await ao lidar com requisições HTTP?
  3. O que acontece com a interface do Vue quando atribuímos o resultado da API a uma ref?

🚀 Próxima Aula: Como compartilhar dados entre páginas sem ficar passando centenas de props? Conheça o Pinia!

Aula 11 – Gerenciamento de Estado com Pinia 🍍

À medida que a aplicação cresce, passar dados via Props por 5 níveis de componentes se torna um pesadelo (Prop Drilling). O Pinia resolve isso criando uma "loja central" de dados acessível por qualquer componente.

🏗️ O que é um Store?

Um Store no Pinia tem três partes principais, muito parecidas com um componente Vue:

  1. State: Os dados (equivalente ao ref).
  2. Getters: Dados computados (equivalente ao computed).
  3. Actions: Funções para mudar os dados (equivalente às functions).

⚙️ Criando seu primeiro Store

Instalação: npm install pinia.

Exemplo: src/stores/carrinho.js

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useCarrinhoStore = defineStore('carrinho', () => {
  // 1. State
  const itens = ref([])

  // 2. Getter
  const totalItens = computed(() => itens.value.length)

  // 3. Action
  function adicionarAoCarrinho(produto) {
    itens.value.push(produto)
  }

  return { itens, totalItens, adicionarAoCarrinho }
})

📥 Usando o Store no Componente

Qualquer componente agora pode usar esses dados sem precisar do pai!

<script setup>
import { useCarrinhoStore } from '../stores/carrinho'

const carrinho = useCarrinhoStore()
</script>

<template>
  <div>
    <p>Produtos no carrinho: {{ carrinho.totalItens }}</p>
    <button @click="carrinho.adicionarAoCarrinho({nome: 'Mouse'})">
      Adicionar Mouse
    </button>
  </div>
</template>

📊 Arquitetura Centralizada

graph TD
    Store["Store (Pinia)"]
    Store --> CompA[Componente A]
    Store --> CompB[Componente B]
    Store --> CompC[Componente C]
    CompB -- "Action: Muda dado" --> Store

🧠 Quando usar o Pinia?

Não exagere!

Use o Pinia para dados que realmente precisam ser globais (Usuário Logado, Carrinho de Compras, Tema Dark/Light). Dados locais de um formulário ainda devem ficar dentro do componente.

💻 Mão na Massa

Crie um Store chamado useAuthStore que guarde o nome de um usuário e uma booleana isLoggedIn. Crie uma View de Login que altera esses dados e uma Navbar que mostre o nome do usuário se ele estiver logado.

📝 Exercício

  1. O que é "Prop Drilling" e como o Pinia ajuda a evitá-lo?
  2. Explique a diferença entre State, Getters e Actions no Pinia.
  3. Posso alterar o state do Pinia diretamente do componente? É recomendado?

🚀 Próxima Aula: Vamos unir tudo: Roteamento, API e Pinia no Projeto Prático II!

Aula 12 – Projeto Prático II (CRUD Completo) 🚀

Nesta aula prática, vamos aplicar a "Trindade do Vue Moderno": Vue Router + Axios + Pinia. O objetivo é construir um sistema de Gerenciamento de Produtos com persistência em uma API simulada.

🎯 Escopo do Projeto

Vamos desenvolver um CRUD (Create, Read, Update, Delete) que realize: 1. Listagem: Buscar produtos de uma API e exibir em cards (Axios + Pinia). 2. Criação: Formulário para adicionar novos itens (POST). 3. Edição: Alterar dados de um produto existente (PUT). 4. Exclusão: Remover itens da API e da tela (DELETE). 5. Navegação: Páginas separadas para "Home", "Produtos" e "Novo Produto".

🏗️ Arquitetura em Camadas

A organização profissional separa as responsabilidades:

graph TD
    View[Views / Páginas] --> Store[Pinia Stores]
    Store --> Service[Axios Services]
    Service --> API[(API Externa)]

O que cada camada faz?

  • Service: Apenas faz a requisição axios.get('/produtos').
  • Store: Chama o service e guarda o resultado na ref([]).
  • View: Apenas exibe o que está na Store e chama funções de clique.

🖥️ Estrutura de Pastas Recomendada

# Organize seu projeto assim:
src/
  services/
    produtoService.js
  stores/
    produtoStore.js
  views/
    ListagemProdutos.vue
    FormProduto.vue
  router/
    index.js

💡 Dicas de Implementação

API de Teste

Use o JSON Server localmente para ter uma API real rodando em minutos, ou use mocks simples no código se preferir focar apenas no Vue.

Chave Reativa

Ao editar um produto, lembre-se de usar o useRoute().params.id do Vue Router para buscar o ID correto da URL.

📊 Fluxo de Dados do CRUD

sequenceDiagram
    participant U as Usuário
    participant V as View
    participant S as Store
    participant A as API
    U->>V: Clica em 'Excluir'
    V->>S: store.excluir(id)
    S->>A: DELETE /produtos/1
    A-->>S: 200 OK
    S->>S: Remove do array local
    Note right of S: Reatividade atualiza a View automaticamente!

📝 Checkpoint de Entrega

Para concluir esta aula, o aluno deve demonstrar: 1. Navegação fluida entre páginas sem recarregar o browser. 2. Dados sendo buscados de uma fonte externa (real ou mock). 3. Uso do Pinia para gerenciar o array de produtos.

🚀 Próximo Módulo: Vamos profissionalizar ainda mais com Boas Práticas, Estilização e Deploy!

Aula 13 – Boas Práticas e Arquitetura 🏰

Escrever código que funciona é apenas o primeiro passo. Como desenvolvedores profissionais, nosso objetivo é escrever código que seja fácil de ler, testar e manter.

🏛️ Separação de Responsabilidades

Um erro comum é colocar muita lógica dentro do componente (.vue). Siga a regra de ouro: Componentes devem apenas exibir dados e emitir eventos.

Camada Função Exemplo
Views Páginas principais HomeView.vue
Components Peças reutilizáveis BaseButton.vue
Stores Estado Compartilhado userStore.js
Services Comunicação Externa authService.js
Utils Funções Auxiliares formatDate.js

🧼 Clean Code no Vue

  1. Nomes de Componentes: Use sempre pelo menos duas palavras para evitar conflitos com tags HTML (ex: UserCard em vez de Card).
  2. Props Tipadas: Sempre valide suas props.
  3. Composição over Mixins: No Vue 3, prefira extrair lógica repetida para Composables (useAlgo.js).
  4. Emits Declarados: Use defineEmits para documentar o que o componente faz.

📊 Estrutura de Composable

graph LR
    A[Lógica Repetida] --> B[useCounter.js]
    B --> C[Componente A]
    B --> D[Componente B]
    B --> E[Componente C]

Exemplo de um Composable simples:

// src/composables/useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)

  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }

  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  return { x, y }
}

🧠 Padrão de Nomenclatura

Dica de Ouro

Componentes que são usados apenas uma vez (como Header, Footer) devem ter o prefixo The (ex: TheNavbar.vue). Componentes reutilizáveis devem ter prefixos como Base, App ou V (ex: BaseButton.vue).

📝 Exercício

  1. Qual a vantagem de usar Composables em vez de colocar toda a lógica no componente?
  2. Refatore um componente seu que tenha mais de 100 linhas de lógica para usar um Composable ou um Service.
  3. Por que devemos evitar nomes de uma única palavra para componentes?

🚀 Próxima Aula: Vamos deixar nossa aplicação bonita e responsiva com Scoped CSS e Tailwind!

Aula 14 – Estilização Moderna 🎨

Uma aplicação excelente não apenas funciona bem, mas também é agradável de usar. No Vue.js, temos várias formas de gerenciar estilos de forma organizada.

🔐 Scoped CSS

Como já vimos, o atributo scoped garante que o CSS de um componente não "vaze" para os outros. O Vue faz isso adicionando um atributo único (ex: data-v-123) ao HTML e ao CSS durante o build.

<style scoped>
.titulo { color: blue; } /* Só afeta o .titulo DESTE componente */
</style>

📦 CSS Modules

Uma alternativa ao Scoped CSS, onde as classes se tornam objetos JavaScript.

<template>
  <h1 :class="$style.titulo">Olá Mundo</h1>
</template>

<style module>
.titulo { color: red; }
</style>

🌊 Introdução ao Tailwind CSS

O Tailwind é um framework "utility-first" que permite estilizar sua aplicação sem sair do HTML. Ele é extremamente popular no ecossistema Vue.

Por que usar?

  1. Velocidade: Não precisa inventar nomes de classes.
  2. Consistência: Sistema de design pré-definido.
  3. Responsividade: Prefixos simples como md:, lg:.

Exemplo: 

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Botão Tailwind
</button>

📱 Responsividade no Vue

graph LR
    A[Layout Único] --> B{Breakpoints}
    B -- "sm (mobile)" --> C[Coluna Única]
    B -- "md (tablet)" --> D[Duas Colunas]
    B -- "lg (desktop)" --> E[Grid Complexo]

🧠 Dicas de UX

Feedback Visual

Sempre adicione estados de :hover, :active e :disabled aos seus botões e links. Isso faz a aplicação parecer "viva".

Transições

O Vue oferece o componente <Transition> para animar a entrada e saída de elementos (ex: ao usar v-if).

💻 Prática Sugerida

  1. Adicione o Tailwind ao seu projeto: npx tailwindcss init -p.
  2. Estilize seu "Task Manager" da Aula 08 usando apenas classes utilitárias do Tailwind.

📝 Exercício

  1. Qual a diferença entre Scoped CSS e CSS Modules?
  2. Como o Tailwind ajuda na manutenção a longo prazo de grandes aplicações?
  3. Crie um componente que mude de cor de fundo dependendo de uma variável reativa isError.

🚀 Próxima Aula: Vamos preparar nosso app para o mundo real com Build e Deploy!

Aula 15 – Build, Deploy e Produção 🚀

Sua aplicação está pronta no seu computador, mas como mostrá-la para o mundo? Nesta aula, aprenderemos o processo de transformar nosso código de desenvolvimento em um pacote otimizado para produção.

🏗️ O Processo de Build

Quando rodamos npm run build, o Vite realiza várias otimizações: 1. Minificação: Remove espaços e encurta nomes de variáveis (diminui o tamanho do arquivo). 2. Tree Shaking: Remove código que não está sendo usado. 3. Chunking: Divide o código em arquivos menores para carregar mais rápido.

# Gere a versão de produção
$ npm run build

# O resultado estará na pasta /dist

🌐 Variáveis de Ambiente (.env)

Nunca coloque senhas ou URLs de produção diretamente no código. Use arquivos .env.

# .env.production
VITE_API_URL=https://meu-servidor-real.com/api

No Vue: import.meta.env.VITE_API_URL

🚢 Estratégias de Deploy

Temos várias opções excelentes e gratuitas para hospedar SPAs:

  1. Vercel / Netlify: Conectam ao seu GitHub e fazem deploy automático a cada git push.
  2. GitHub Pages: Ótimo para projetos estáticos e portfólios.
  3. Docker: Para quando você precisa de controle absoluto do servidor.
graph LR
    A[Código no VS Code] --> B[Git Push GitHub]
    B --> C[CI/CD: Build Automático]
    C --> D[Deploy: Vercel/Netlify]
    D --> E[Usuário acessa URL Pública]

🧪 Boas Práticas de Produção

Segurança

Certifique-se de que as ferramentas de desenvolvedor (Vue DevTools) estão desativadas em produção (o Vite faz isso automaticamente no build).

Performance

Use imagens otimizadas e carregamento preguiçoso (Lazy Loading) para rotas que o usuário raramente acessa.

💻 Mão na Massa

  1. Crie uma conta na Vercel ou Netlify.
  2. Conecte seu repositório do GitHub.
  3. Configure o comando de build (npm run build) e a pasta de saída (dist).
  4. Veja seu site ganhar uma URL pública!

📝 Exercício

  1. Para que serve a pasta dist gerada após o build?
  2. Por que devemos usar arquivos .env para URLs de API?
  3. O que é CI/CD e como ele facilita a vida do desenvolvedor?

🚀 Chegou a Hora! Na próxima aula, você apresentará seu Projeto Final: Um sistema Kanban completo!

Aula 16 – Projeto Final e Apresentação 🏆

Parabéns! Você chegou ao final da jornada de Desenvolvimento Frontend com Vue.js. Hoje é o dia de consolidar todo o conhecimento adquirido através do desenvolvimento e apresentação do seu Projeto Final.

🎯 O Desafio: Sistema Kanban (VueFlow)

Você deverá desenvolver um sistema de gerenciamento de tarefas estilo Kanban (colunas: Pendente, Em Andamento, Concluído). O sistema deve permitir que o usuário gerencie suas atividades de forma visual e intuitiva.

Requisitos Obrigatórios:

  1. Componentização: Dividir a interface em colunas e cards reutilizáveis.
  2. Roteamento: Ter pelo menos duas páginas (Dashboard e Configurações/Perfil).
  3. Estado Global (Pinia): Armazenar a lista de tarefas centralizadamente.
  4. Integração (Axios): Simular o consumo de cores ou perfis de uma API.
  5. Estilização: Uso de Tailwind CSS ou Scoped CSS com foco em responsividade.
  6. Interatividade: No mínimo, a funcionalidade de mover tarefas entre colunas e deletá-las.

📊 Arquitetura Esperada

graph TD
    A[App.vue] --> B[Navbar]
    A --> C[RouterView]
    C -- Rota: / --> D[KanbanBoard]
    C -- Rota: /config --> E[ConfigView]
    D --> F[Coluna: ToDo]
    D --> G[Coluna: Doing]
    D --> H[Coluna: Done]
    F --> I[CardTarefa]
    G --> I
    H --> I
    I --> J[Store: TaskStore]

📝 Critérios de Avaliação Técnica

Sua aplicação será avaliada com base nos seguintes pontos: * Organização do Código: Pastas bem estruturadas (views, components, stores, services). * Clean Code: Nomes de variáveis semânticos e funções pequenas. * UX/UI: A interface é amigável? Existem feedbacks visuais de carregamento ou erro? * Versionamento: Histórico de commits no Git (GitHub). * Deploy: Aplicação funcional e acessível via URL pública (Vercel/Netlify).

🧠 Dica para a Apresentação

O Pitch

Ao apresentar, não mostre apenas o código. Mostre o problema que sua aplicação resolve, os desafios técnicos que você enfrentou e como o Vue.js ajudou a superá-los.

🏁 Encerramento

O desenvolvimento frontend é uma área em constante evolução. Dominar o Vue 3 te coloca em uma posição privilegiada no mercado, apto a trabalhar com alta produtividade e qualidade.

Desejamos muito sucesso em sua carreira como desenvolvedor Vue! 🚀✨

Aula 17 - Composition API Avançada e Composables Reutilizáveis 💚

Objetivo Pedagógico

Objetivo: Arquitetura avançada com Composition API em Vue 3, criação de composables reutilizáveis com cleanup automático e reatividade profunda com ref/reactive.

📑 1. Fundamentos Teóricos & Análise Técnica

A introdução da Composition API no Vue 3 representou uma mudança fundamental de paradigma em relação à antiga Options API. Enquanto a Options API organizava o código por opções técnicas (data, methods, computed, watch), o que fragmentava o raciocínio em componentes extensos, a Composition API permite agrupar o código por preocupação lógica (Logical Concern).

O coração dessa arquitetura é o conceito de Composables — funções convenientes que encapsulam e reutilizam lógica com estado reativo através das APIs fundamentais do Vue (ref, reactive, computed, watchEffect).

Boas práticas essenciais na criação de Composables de alto nível: 1. Convenção de Nomenclatura: Nomeação prefixada com use (ex: useAsyncData, useEventListener). 2. Argumentos Flexíveis com toValue(): Capacidade de aceitar tanto valores literais quanto ref ou getters, tornando o composable adaptável a diferentes cenários. 3. Cleanup Automático: Desconexão de listeners e cancelamento de timers vinculados automaticamente ao ciclo de vida do componente chamador via onScopeDispose() ou onUnmounted().

📐 Arquitetura Conceitual & Diagrama de Fluxo

graph LR
    subgraph OptionsAPI ["Options API (Fragmentação Lógica)"]
        Data["data: { search, users, filters }"]
        Methods["methods: { fetchUsers(), applyFilter() }"]
        Watch["watch: { search() }"]
    end
    subgraph CompositionAPI ["Composition API (Coesão por Feature)"]
        Feature1["useSearch() -> { search, results }"]
        Feature2["usePagination() -> { page, nextPage }"]
        Feature3["useUserAuth() -> { user, login }"]
    end
    style OptionsAPI fill:#ffebee,stroke:#c62828
    style CompositionAPI fill:#e8f5e9,stroke:#2e7d32

🔍 Pilares e Diretrizes Técnicas

Nesta unidade, aprofundamos os seguintes conceitos fundamentais: - Agrupamento por Preocupação Lógica: Manutenção facilitada e leitura contínua de blocos de regras de negócio. - Desempacotamento de Refs: Uso de unref() e toValue() para máxima flexibilidade nos parâmetros. - Isolamento de Efeitos Colaterais: Garantia de que nenhum event listener persista na memória após a destruição do componente. - Suporte Perfeito a TypeScript: Inferência natural de tipos sem dependência das mágicas de contexto do objeto this.

🛠️ 2. Implementação Prática em Vue 3 Composition API e Script Setup

Abaixo está a implementação técnica de referência, estruturada com padrões de engenharia de software e foco em robustez:

// useMouseTracker.ts (Composable Reutilizável com Auto-Cleanup)
import { ref, onMounted, onUnmounted } from 'vue';

export function useMouseTracker() {
  const x = ref(0);
  const y = ref(0);

  function updateCoordinates(event: MouseEvent) {
    x.value = event.clientX;
    y.value = event.clientY;
  }

  onMounted(() => {
    window.addEventListener('mousemove', updateCoordinates);
  });

  onUnmounted(() => {
    window.removeEventListener('mousemove', updateCoordinates);
  });

  return { x, y };
}

💡 Análise Passo a Passo do Código

  1. Declaração Reativa: ref(0) cria referências reativas encapsuladas que serão expostas aos componentes.
  2. Vinculação de Ciclo de Vida: onMounted e onUnmounted garantem que o listener exista apenas enquanto o componente estiver na tela.
  3. Retorno de Objeto de Refs: Retornar { x, y } permite desestruturar as propriedades no componente consumidor mantendo a reatividade.

🎯 3. Próximos Passos & Sequência Didática

Aula 18 - Gerenciamento de Estado Global com Pinia 🍍

Objetivo Pedagógico

Objetivo: Arquitetura de estado centralizado moderno em Vue 3 com Pinia, stores modulares tipadas, getters computados e ações assíncronas.

📑 1. Fundamentos Teóricos & Análise Técnica

O Pinia é a biblioteca de gerenciamento de estado oficial recomendada para o ecossistema Vue 3, substituindo o legado Vuex. Projetado do zero para aproveitar os recursos modernos de tipagem do TypeScript e a reatividade da Composition API, o Pinia elimina completamente o boilerplate de mutations, simplifica a arquitetura e melhora a experiência do desenvolvedor (DX).

Principais características arquiteturais do Pinia: 1. Descentralização por Padrão: Não existe uma árvore de estado monolítica central. Cada funcionalidade possui sua própria Store Modular isolada (useUserStore, useCartStore, useThemeStore). 2. Eliminação das Mutações: As mutações síncronas foram extintas; o estado pode ser alterado diretamente dentro de ações (actions), que aceitam tanto lógica síncrona quanto assíncrona (async/await). 3. Suporte a Setup Stores: Definição da store utilizando a mesma sintaxe ergonômica de funções com ref e computed, unificando a forma de codificar componentes e estados globais.

📐 Arquitetura Conceitual & Diagrama de Fluxo

graph TD
    Component["Componente Vue 3 (<script setup>)"] -->|Lê Estado / Getters| PiniaStore["Pinia Modular Store"]
    Component -->|Dispara Ação| Actions["Actions (Sync ou Async)"]
    Actions -->|Atualiza Diretamente| State["State Reativo (ref)"]
    Actions --> API["Servidor / API Externa"]
    style Component fill:#e3f2fd,stroke:#1565c0
    style PiniaStore fill:#fff3e0,stroke:#e65100
    style Actions fill:#e8f5e9,stroke:#2e7d32

🔍 Pilares e Diretrizes Técnicas

Nesta unidade, aprofundamos os seguintes conceitos fundamentais: - Autocompletion Impecável: Inferência de tipos 100% nativa sem necessidade de wrappers ou tipagens manuais complexas. - Modularidade e Lazy Loading: Stores podem ser divididas em múltiplos arquivos e carregadas dinamicamente via Code Splitting. - Integração com Vue DevTools: Visualização de linha do tempo de ações disparadas e recursos de time-travel debugging. - Subscrições e Plugins: Possibilidade de interceptar ações e sincronizar o estado com o armazenamento local via plugins.

🛠️ 2. Implementação Prática em Pinia e Vue 3 Store Architecture

Abaixo está a implementação técnica de referência, estruturada com padrões de engenharia de software e foco em robustez:

// counterStore.ts (Pinia Setup Store com TypeScript)
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useCounterStore = defineStore('counter', () => {
  // 1. Estado Reativo (State)
  const count = ref(0);

  // 2. Getters Computados
  const doubleCount = computed(() => count.value * 2);

  // 3. Ações (Actions)
  function increment() {
    count.value++;
  }

  async function asyncIncrement() {
    await new Promise(resolve => setTimeout(resolve, 500));
    count.value += 10;
  }

  return { count, doubleCount, increment, asyncIncrement };
});

💡 Análise Passo a Passo do Código

  1. Sintaxe Setup Store: A função passada para defineStore espelha perfeitamente a estrutura de um <script setup>.
  2. Ação Assíncrona Direta: asyncIncrement realiza operações de rede ou timers sem precisar registrar mutações separadas.
  3. Consumo Ergonômico: No componente, basta importar const store = useCounterStore() e acessar propriedades diretamente.

🎯 3. Próximos Passos & Sequência Didática

Aula 19 - Diretivas Customizadas e Render Functions 🛠️

Objetivo Pedagógico

Objetivo: Criação de diretivas customizadas para manipulação de baixo nível do DOM e construção de componentes dinâmicos via Render Functions com a função h().

📑 1. Fundamentos Teóricos & Análise Técnica

Embora o compilador de templates do Vue atenda a grande maioria das necessidades de desenvolvimento de interfaces, existem cenários avançados em que o controle imperativo do DOM ou a flexibilidade total do JavaScript são indispensáveis. Para esses casos, o Vue oferece Diretivas Customizadas e Render Functions.

  1. Diretivas Customizadas (v-focus, v-click-outside): Mecanismo primário para encapsular manipulação direta de nós DOM nativos com base em ganchos de ciclo de vida (created, mounted, updated, unmounted). São especialmente indicadas para focar inputs automaticamente, gerenciar cliques fora de janelas suspensas (dropdowns) ou integrar bibliotecas de terceiros legadas.
  2. Render Functions com h(): Permitem dispensar o template HTML e escrever componentes diretamente contra o DOM Virtual (vDOM). Utilizando a função de hipertexto h(tag, props, children), o desenvolvedor pode criar componentes dinâmicos onde a própria tag HTML depende de uma propriedade (como um componente genérico <Heading :level="1"> que gera dinamicamente de <h1> a <h6>).

📐 Arquitetura Conceitual & Diagrama de Fluxo

flowchart TD
    Choice{"Complexidade da UI"} -->|Manipulação Pontual de DOM| Directive["Diretiva Customizada (v-custom)<br>Ex: Auto-foco, Click-Outside"]
    Choice -->|Tag Dinâmica / Lógica Extrema| RenderFn["Render Function com h()<br>Ex: h(`h${level}`, slots.default())"]
    Directive --> NativeDOM["Manipula Nó Nativo (el.focus())"]
    RenderFn --> VDOM["Gera Nó Virtual vNode"]
    VDOM --> NativeDOM
    style Choice fill:#e3f2fd,stroke:#1565c0
    style Directive fill:#fff3e0,stroke:#e65100
    style RenderFn fill:#e8f5e9,stroke:#2e7d32

🔍 Pilares e Diretrizes Técnicas

Nesta unidade, aprofundamos os seguintes conceitos fundamentais: - Ganchos de Diretiva: Controle fino da execução através de mounted(el, binding) e unmounted(el). - Poder Total do JavaScript: As render functions dispensam sintaxes especiais de template (v-if, v-for) em prol de if e array.map() nativos. - Componentes Recursivos: Construção elegante de estruturas em árvore (árvores de pastas, menus multinível). - Desempenho Otimizado: Uso de diretivas pontuais sem introduzir nós extras no grafo de componentes.

🛠️ 2. Implementação Prática em Vue 3 Virtual DOM e Custom Directives

Abaixo está a implementação técnica de referência, estruturada com padrões de engenharia de software e foco em robustez:

// dynamic-heading.ts (Render Function e Diretiva Customizada)
import { h, defineComponent, Directive } from 'vue';

// 1. Diretiva Customizada para Auto-Foco
export const vFocus: Directive = {
  mounted(el: HTMLElement) {
    el.focus();
  }
};

// 2. Componente com Render Function (Tag Dinâmica h1..h6)
export const DynamicHeading = defineComponent({
  props: {
    level: { type: Number, default: 1 }
  },
  setup(props, { slots }) {
    return () => h(`h${props.level}`, { class: 'dynamic-heading' }, slots.default?.());
  }
});

💡 Análise Passo a Passo do Código

  1. Diretiva vFocus: O gancho mounted(el) recebe o elemento DOM real assim que ele é inserido no documento e dispara .focus().
  2. Função h(): Gera o nó virtual correspondente à tag calculada h${props.level} sem necessidade de múltiplos v-if.
  3. Slots Funcionais: slots.default?.() executa a renderização do conteúdo filho passado para o cabeçalho.

🎯 3. Próximos Passos & Sequência Didática

Aula 20 - Projeto Capstone: Aplicação Vue 3 Autônoma Reativa 🏆

Objetivo Pedagógico

Objetivo: Construção de uma aplicação completa em Vue 3 com Vite, Pinia para gerenciamento de estado, Vue Router com guards de navegação e componentes tipados.

📑 1. Fundamentos Teóricos & Análise Técnica

O Projeto Capstone de Especialização em Vue 3 consolida as competências práticas do estudante através da construção de um Dashboard de Métricas e Análise Operacional. O projeto desafia o estudante a unir todos os conceitos avançados estudados em um sistema integrado, limpo e testável.

A aplicação construída integra os seguintes pilares de engenharia: 1. Ecossistema Vue 3 Moderno: Utilização de Vite para compilação instantânea em desenvolvimento e empacotamento otimizado com Rollup. 2. Pinia para Estado Global: Stores dedicadas para autenticação e gestão de dados, com persistência e getters calculados. 3. Vue Router com Guards: Roteamento cliente com proteção de rotas (beforeEach), lazy loading de views e manipulação de parâmetros de consulta (query params). 4. Composables Reutilizáveis: Extração de comportamentos transversais (comunicação com API, exportação de relatórios e tema visual) em funções composables dedicadas.

📐 Arquitetura Conceitual & Diagrama de Fluxo

graph TD
    Vite["Vite Build Tool"] --> Main["main.ts (Pinia + Router)"]
    Main --> Router["Vue Router (Guards de Autenticação)"]
    Router --> Layout["AppLayout.vue (<router-view>)"]
    Layout --> Views["Views Lazy Loaded (Dashboard, Gestão)"]
    Views --> Stores["Pinia Stores (Auth, Metrics)"]
    Views --> Composables["Composables Especializados (useApi)"]
    style Vite fill:#e3f2fd,stroke:#1565c0
    style Main fill:#fff3e0,stroke:#e65100
    style Views fill:#e8f5e9,stroke:#2e7d32
    style Stores fill:#f3e5f5,stroke:#7b1fa2

🔍 Pilares e Diretrizes Técnicas

Nesta unidade, aprofundamos os seguintes conceitos fundamentais: - Arquitetura Modular: Organização lógica clara entre views, componentes, stores, composables e serviços. - Navegação Protegida: Garantia de que rotas privadas redirecionem usuários não autenticados para a tela de login. - Feedback em Tempo Real: Uso de loaders e notificações reativas coordenadas pela store global. - Código Limpo com Script Setup: Código conciso e elegante com <script setup lang='ts'> em 100% dos componentes.

🛠️ 2. Implementação Prática em Vue 3, Vite, Pinia e Vue Router

Abaixo está a implementação técnica de referência, estruturada com padrões de engenharia de software e foco em robustez:

// DashboardView.vue (Exemplo Integrado da Arquitetura Capstone)
<script setup lang="ts">
import { onMounted } from 'vue';
import { useCounterStore } from '../stores/counterStore';

const store = useCounterStore();

onMounted(() => {
  console.log('Dashboard montado com sucesso!');
});
</script>

<template>
  <div class="dashboard-container">
    <h2>Painel de Métricas Operacionais</h2>
    <div class="metric-card">
      <p>Total de Operações: <strong>{{ store.count }}</strong></p>
      <p>Índice Multiplicador: <strong>{{ store.doubleCount }}</strong></p>
      <button @click="store.increment">Registrar Operação (+1)</button>
    </div>
  </div>
</template>

<style scoped>
.dashboard-container { padding: 24px; }
.metric-card { background: #ffffff; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0; }
</style>

💡 Análise Passo a Passo do Código

  1. Script Setup Conciso: Dispensa exportações manuais; todas as importações ficam disponíveis imediatamente no template.
  2. Integração Pinia Direta: O acesso a store.count e store.increment ocorre de forma transparente e totalmente tipada.
  3. Estilos com Escopo Isolado: O atributo scoped evita vazamento acidental de regras CSS para outras telas da aplicação.

🎯 3. Próximos Passos & Sequência Didática

Exercícios

🏋️ Exercícios do Curso

Lista completa das 20 unidades de exercicios organizadas em 5 módulos didáticos.

Exercícios: Aula 01 - Introdução ao Frontend Moderno 🏗️

1. Pesquisa: Ecossistema Frontend

Pesquise e descreva com suas palavras qual a diferença entre uma SPA (Single Page Application) e uma MPA (Multi Page Application). Cite um exemplo real de site para cada uma.

2. Por que o Vue?

O Vue.js é conhecido por ser um "Framework Progressivo". O que isso significa na prática para um desenvolvedor que já possui um site em HTML estático e quer começar a usar o Vue?

3. Diferença de Ferramental

Antigamente, usávamos o Vue CLI como ferramenta padrão de criação de projetos. Hoje, a recomendação oficial é o Vite. Liste 3 motivos pelos quais o Vite é considerado superior ao Vue CLI em termos de experiência de desenvolvimento (DX).

4. Renderização CSR vs SSR

Explique o conceito de Client-Side Rendering (CSR). O que acontece no navegador do usuário no momento em que ele acessa um site construído com Vue (sem SSR)?

5. Desafio: Instalação do Ambiente

Instale o Node.js em sua máquina (prefira a versão LTS). No terminal, execute o comando node -v e npm -v e tire um print das versões instaladas. Além disso, instale a extensão Vue - Official (antiga Volar) no seu VS Code.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Pesquisa **Resposta Comentada:** - **Fundamentação:** No contexto de **Introdução ao Frontend Moderno**, o conceito abordado (Pesquisa) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Por que o Vue? **Resposta Comentada:** - **Fundamentação:** No contexto de **Introdução ao Frontend Moderno**, o conceito abordado (Por que o Vue?) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Diferença de Ferramental **Resposta Comentada:** - **Fundamentação:** No contexto de **Introdução ao Frontend Moderno**, o conceito abordado (Diferença de Ferramental) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Renderização CSR vs SSR **Resposta Comentada:** - **Fundamentação:** No contexto de **Introdução ao Frontend Moderno**, o conceito abordado (Renderização CSR vs SSR) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Desafio **Resposta Comentada:** - **Fundamentação:** No contexto de **Introdução ao Frontend Moderno**, o conceito abordado (Desafio) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios: Aula 02 - Estrutura do Projeto Vue 3 🏗️

1. Anatomia de um SFC

O que é um SFC (Single File Component) no contexto do Vue? Descreva a função de cada uma das 3 tags principais encontradas em um arquivo .vue.

2. Criação de Projeto

Utilizando o terminal, execute o comando para criar um novo projeto Vite: npm create vite@latest meu-primeiro-app-vue. Selecione o framework Vue e a variante JavaScript. Entre na pasta, instale as dependências e inicie o servidor de desenvolvimento.

3. Entendendo o main.js

Abra o arquivo src/main.js. Explique qual a função das seguintes linhas de código: 

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

4. Pasta Public vs Assets

Qual a diferença entre colocar uma imagem na pasta public/ e na pasta src/assets/? Em qual delas o Vite realiza otimizações durante o processo de build?

5. Desafio: Alterando o Componente Raiz

Abra o arquivo src/App.vue. Limpe o conteúdo original e crie um componente simples que exiba um título <h1> com o seu nome e um parágrafo <p> com a sua frase favorita. Verifique se a mudança foi refletida no navegador instantaneamente.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Anatomia de um SFC **Resposta Comentada:** - **Fundamentação:** No contexto de **Estrutura do Projeto Vue 3 ️**, o conceito abordado (Anatomia de um SFC) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Criação de Projeto **Resposta Comentada:** - **Fundamentação:** No contexto de **Estrutura do Projeto Vue 3 ️**, o conceito abordado (Criação de Projeto) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Entendendo o main.js **Resposta Comentada:** - **Fundamentação:** No contexto de **Estrutura do Projeto Vue 3 ️**, o conceito abordado (Entendendo o main.js) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Pasta Public vs Assets **Resposta Comentada:** - **Fundamentação:** No contexto de **Estrutura do Projeto Vue 3 ️**, o conceito abordado (Pasta Public vs Assets) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Desafio **Resposta Comentada:** - **Fundamentação:** No contexto de **Estrutura do Projeto Vue 3 ️**, o conceito abordado (Desafio) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios: Aula 03 - Reatividade e Data Binding ⚛️

1. Ref vs Reactive

Explique quando é mais vantajoso usar a função ref() em vez de reactive() para criar variáveis reativas. Cite um exemplo de código para cada uma.

2. Interpolação de Texto

Crie uma variável reativa chamada contador iniciando em 0. Exiba esse valor no HTML dentro de um <h2> utilizando a sintaxe de chaves duplas (Mustache). Adicione um botão que, ao ser clicado, aumente o valor desse contador no script.

3. Atribuição de Atributos (v-bind)

Imagine que você tem uma variável reativa linkImagem contendo a URL de uma foto. Como você faria para aplicar essa URL ao atributo src de uma tag <img> de forma dinâmica? Escreva a sintaxe completa e a sintaxe curta (atalho).

4. Two-Way Data Binding (v-model)

Crie um campo de input de texto e um parágrafo abaixo dele. Use a diretiva v-model para que tudo o que o usuário digitar no input apareça instantaneamente dentro do parágrafo. Qual o nome desse conceito de sincronização bidirecional?

5. Desafio: Profiler Simples

Crie um objeto reativo (usando reactive) chamado usuario com as propriedades nome e idade. Crie dois inputs no HTML (um para nome e outro para idade) ligados a esse objeto via v-model. Exiba uma frase formatada como: "Olá, meu nome é [nome] e tenho [idade] anos".

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Ref vs Reactive **Resposta Comentada:** - **Fundamentação:** No contexto de **Reatividade e Data Binding ⚡**, o conceito abordado (Ref vs Reactive) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Interpolação de Texto **Resposta Comentada:** - **Fundamentação:** No contexto de **Reatividade e Data Binding ⚡**, o conceito abordado (Interpolação de Texto) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Atribuição de Atributos (v **Resposta Comentada:** - **Fundamentação:** No contexto de **Reatividade e Data Binding ⚡**, o conceito abordado (Atribuição de Atributos (v) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Two **Resposta Comentada:** - **Fundamentação:** No contexto de **Reatividade e Data Binding ⚡**, o conceito abordado (Two) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Desafio **Resposta Comentada:** - **Fundamentação:** No contexto de **Reatividade e Data Binding ⚡**, o conceito abordado (Desafio) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios: Aula 04 - Diretivas e Renderização 📜

1. Exibição Condicional

Qual a diferença técnica entre usar v-if e v-show para esconder um elemento na tela? Em qual cenário de performance o v-show é mais recomendado?

2. Renderização de Listas

Crie um array reativo chamado frutas contendo ["Maçã", "Banana", "Uva"]. Use a diretiva v-for para renderizar esses nomes dentro de uma lista não ordenada (<ul> e <li>). Não esqueça de utilizar o atributo :key.

3. Captura de Eventos (v-on)

Crie um botão que dispare um alerta (alert) com a mensagem "Olá Vue!" ao ser clicado. Demonstre o uso da sintaxe completa (v-on:click) e do atalho (@click).

4. Modificadores de Evento

Explique para que serve o modificador .prevent em um evento de submissão de formulário (@submit.prevent). O que acontece se não o utilizarmos em uma SPA?

5. Desafio: Lista de Tarefas Simples (V1)

Crie uma variável reativa novaTarefa (string) e uma lista tarefas (array). - Crie um input ligado à novaTarefa via v-model. - Crie um botão "Adicionar" que pegue o valor de novaTarefa, adicione ao array tarefas e limpe o input. - Renderize a lista na tela usando v-for. - Adicione um v-if para mostrar uma mensagem "Sua lista está vazia" caso não haja tarefas.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Exibição Condicional **Resposta Comentada:** - **Fundamentação:** No contexto de **Diretivas e Renderização Condicional**, o conceito abordado (Exibição Condicional) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Renderização de Listas **Resposta Comentada:** - **Fundamentação:** No contexto de **Diretivas e Renderização Condicional**, o conceito abordado (Renderização de Listas) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Captura de Eventos (v **Resposta Comentada:** - **Fundamentação:** No contexto de **Diretivas e Renderização Condicional**, o conceito abordado (Captura de Eventos (v) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Modificadores de Evento **Resposta Comentada:** - **Fundamentação:** No contexto de **Diretivas e Renderização Condicional**, o conceito abordado (Modificadores de Evento) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Desafio **Resposta Comentada:** - **Fundamentação:** No contexto de **Diretivas e Renderização Condicional**, o conceito abordado (Desafio) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios: Aula 05 - Componentes e Props 🧩

1. Vantagens da Componentização

Explique brevemente por que dividimos uma aplicação em componentes em vez de manter todo o código em um único arquivo gigante. Como isso ajuda no trabalho em equipe?

2. Criando um Componente de Botão

Crie um arquivo chamado BotãoCustomizado.vue na pasta src/components/. - Esse componente deve aceitar uma prop chamada texto (String). - Renderize o texto dentro de uma tag <button>. - No componente App.vue, importe e use esse botão 3 vezes com textos diferentes.

3. Tipagem e Validação de Props

Modifique o defineProps do exercício anterior para que a prop texto seja obrigatória (required) e possua um valor padrão caso não seja enviada. Como o Vue avisa se passarmos um número em vez de uma string para essa prop?

4. Passando Objetos como Prop

Crie um componente CardUsuario.vue que receba um objeto usuario como prop. O objeto deve conter nome, email e cargo. Renderize essas informações de forma organizada (ex: usando <div>, <h3> e <p>).

5. Desafio: Galeria de Produtos

Crie um array de objetos produtos em App.vue. Cada produto deve ter id, nome e preco. - Crie um componente ItemProduto.vue que receba os dados de um produto via prop. - No App.vue, use um v-for para renderizar o componente ItemProduto.vue para cada item do array.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Vantagens da Componentização **Resposta Comentada:** - **Fundamentação:** No contexto de **Componentes e Props**, o conceito abordado (Vantagens da Componentização) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Criando um Componente de Botão **Resposta Comentada:** - **Fundamentação:** No contexto de **Componentes e Props**, o conceito abordado (Criando um Componente de Botão) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Tipagem e Validação de Props **Resposta Comentada:** - **Fundamentação:** No contexto de **Componentes e Props**, o conceito abordado (Tipagem e Validação de Props) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Passando Objetos como Prop **Resposta Comentada:** - **Fundamentação:** No contexto de **Componentes e Props**, o conceito abordado (Passando Objetos como Prop) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Desafio **Resposta Comentada:** - **Fundamentação:** No contexto de **Componentes e Props**, o conceito abordado (Desafio) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios: Aula 06 - Eventos e Comunicação 📡

1. Para que serve o Emits?

Explique a diferença entre usar Props e usar Emits. Qual das duas ferramentas é usada para enviar dados do filho para o pai?

2. Disparando um Evento Simples

Crie um componente ContadorFilho.vue com um botão "Incrementar". - Ao clicar no botão, o componente deve emitir um evento chamado aumentar. - No componente Pai (App.vue), escute o evento @aumentar e incremente uma variável reativa local.

3. Enviando Dados (Payload) no Evento

Modifique o exercício anterior para que o filho envie o valor do incremento (ex: 5 ou 10) como argumento do evento. emit('aumentar', 5). Como o pai recebe esse valor na função de tratamento?

4. Comunicação entre Irmãos

Imagine dois componentes filhos (A e B) no mesmo nível dentro de um Pai. O Filho A tem um botão que precisa mudar um texto no Filho B. Descreva os passos necessários para que essa comunicação ocorra seguindo o fluxo padrão do Vue.

5. Desafio: Deletar item da Lista

Utilize a galeria de produtos do exercício da aula anterior. - Adicione um botão "Remover" dentro do componente ItemProduto.vue. - Ao clicar em "Remover", o componente deve emitir um evento remover passando o id do produto. - O componente Pai deve ouvir o evento e remover o produto correspondente do array original.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Para que serve o Emits? **Resposta Comentada:** - **Fundamentação:** No contexto de **Eventos e Comunicação entre Componentes**, o conceito abordado (Para que serve o Emits?) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Disparando um Evento Simples **Resposta Comentada:** - **Fundamentação:** No contexto de **Eventos e Comunicação entre Componentes**, o conceito abordado (Disparando um Evento Simples) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Enviando Dados (Payload) no Evento **Resposta Comentada:** - **Fundamentação:** No contexto de **Eventos e Comunicação entre Componentes**, o conceito abordado (Enviando Dados (Payload) no Evento) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Comunicação entre Irmãos **Resposta Comentada:** - **Fundamentação:** No contexto de **Eventos e Comunicação entre Componentes**, o conceito abordado (Comunicação entre Irmãos) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Desafio **Resposta Comentada:** - **Fundamentação:** No contexto de **Eventos e Comunicação entre Componentes**, o conceito abordado (Desafio) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios: Aula 07 - Ciclo de Vida e Hooks 🔄

1. O que é o Ciclo de Vida?

Descreva o que acontece em um componente Vue desde o momento em que ele é importado até o momento em que o usuário navega para outra página e ele desaparece da tela.

2. O Hooks onMounted

Qual a utilidade do hook onMounted? Por que não é recomendado fazer chamadas de inicialização de timers ou APIs diretamente no corpo do <script setup> sem o hook?

3. O Hook onUnmounted

Crie um componente que inicie um setInterval no onMounted que imprima uma mensagem no console a cada 1 segundo. Use o hook onUnmounted para limpar esse timer (clearInterval). Por que essa limpeza é fundamental para o navegador?

4. Reatividade vs Lifecycle

Suponha que um dado mude e a tela se atualize. Qual hook do ciclo de vida é disparado APÓS essa atualização visual ocorrer? Cite um exemplo de uso para esse hook.

5. Desafio: Relógio Digital Reativo

Crie um componente de relógio que exiba as horas, minutos e segundos atualizados em tempo real. - Use onMounted para iniciar o relógio. - Use onUnmounted para pará-lo. - Use uma ref para armazenar o horário atual. - Formate a exibição para que sempre tenha dois dígitos (ex: 09:05:01).

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: O que é o Ciclo de Vida? **Resposta Comentada:** - **Fundamentação:** No contexto de **Ciclo de Vida e Hooks**, o conceito abordado (O que é o Ciclo de Vida?) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: O Hooks onMounted **Resposta Comentada:** - **Fundamentação:** No contexto de **Ciclo de Vida e Hooks**, o conceito abordado (O Hooks onMounted) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: O Hook onUnmounted **Resposta Comentada:** - **Fundamentação:** No contexto de **Ciclo de Vida e Hooks**, o conceito abordado (O Hook onUnmounted) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Reatividade vs Lifecycle **Resposta Comentada:** - **Fundamentação:** No contexto de **Ciclo de Vida e Hooks**, o conceito abordado (Reatividade vs Lifecycle) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Desafio **Resposta Comentada:** - **Fundamentação:** No contexto de **Ciclo de Vida e Hooks**, o conceito abordado (Desafio) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios: Aula 08 - Projeto Prático I: Task Manager (Planejamento) 📝

1. Planejamento de Componentes

Para o nosso Task Manager, quais componentes você acredita serem necessários para manter o projeto organizado? Liste pelo menos 3 e descreva a responsabilidade de cada um.

2. Definição de Dados (State)

Que tipo de informações cada "Tarefa" (Task) deve conter no nosso array de tarefas? Defina um objeto exemplo com as propriedades necessárias (ex: título, status, id).

3. Fluxo de Criação

Descreva o passo a passo lógico (do input do usuário até a atualização da tela) para a funcionalidade de "Adicionar Nova Tarefa". Quais diretivas e eventos serão utilizados?

4. Persistência Local (LocalStorage)

Pesquise como salvar e ler dados do LocalStorage do navegador. Escreva um exemplo de código que salva o array de tarefas e outro que o recupera ao carregar a página.

5. Desafio: Maquete do App

Crie a estrutura visual básica do App em um único arquivo App.vue (sem separar componentes ainda). - Deve ter um título centralizado. - Um input com botão ao lado. - Uma área para listar as tarefas. - Use CSS (pode ser CSS puro ou classes utilitárias) para deixar o layout limpo e agradável. - Implemente apenas a funcionalidade de listar tarefas estáticas por enquanto.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Planejamento de Componentes **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Prático I (Task Manager)**, o conceito abordado (Planejamento de Componentes) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Definição de Dados (State) **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Prático I (Task Manager)**, o conceito abordado (Definição de Dados (State)) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Fluxo de Criação **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Prático I (Task Manager)**, o conceito abordado (Fluxo de Criação) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Persistência Local (LocalStorage) **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Prático I (Task Manager)**, o conceito abordado (Persistência Local (LocalStorage)) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Desafio **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Prático I (Task Manager)**, o conceito abordado (Desafio) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios: Aula 09 - Roteamento com Vue Router 🛣️

1. SPA vs Roteamento Tradicional

Em uma Single Page Application, o que realmente acontece quando o usuário "muda de página"? Explique o papel do Vue Router nesse processo.

2. Configurando Rotas

Crie um arquivo router/index.js (esquemático) que defina duas rotas: - A rota / que renderiza o componente HomeView.vue. - A rota /sobre que renderiza o componente AboutView.vue. Utilize o createRouter e o createWebHistory.

Qual a diferença entre usar <a href="/sobre"> e <router-link to="/sobre"> em uma aplicação Vue? O que acontece com o estado da aplicação no primeiro caso?

4. Parâmetros Dinâmicos

Crie uma rota que receba um ID de produto dinamicamente: /produto/:id. Dentro do componente de destino, como você faria para capturar esse ID e exibi-lo na tela usando a Composition API?

5. Desafio: Barra de Navegação

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: SPA vs Roteamento Tradicional **Resposta Comentada:** - **Fundamentação:** No contexto de **Roteamento com Vue Router ️**, o conceito abordado (SPA vs Roteamento Tradicional) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Configurando Rotas **Resposta Comentada:** - **Fundamentação:** No contexto de **Roteamento com Vue Router ️**, o conceito abordado (Configurando Rotas) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Navegação vs Links **Resposta Comentada:** - **Fundamentação:** No contexto de **Roteamento com Vue Router ️**, o conceito abordado (Navegação vs Links) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Parâmetros Dinâmicos **Resposta Comentada:** - **Fundamentação:** No contexto de **Roteamento com Vue Router ️**, o conceito abordado (Parâmetros Dinâmicos) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Desafio **Resposta Comentada:** - **Fundamentação:** No contexto de **Roteamento com Vue Router ️**, o conceito abordado (Desafio) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios: Aula 10 - Consumo de API REST 🌐

1. Promises e Async/Await

Converta a seguinte estrutura de .then() para uma função usando async/await com bloco try/catch: 

axios.get('/api/users').then(res => {
  console.log(res.data)
}).catch(err => {
  console.error(err)
})

2. Configuração do Axios

Instale o Axios no seu projeto (npm install axios). Crie uma instância customizada do Axios em src/services/api.js que já possua uma baseURL definida (ex: https://jsonplaceholder.typicode.com).

3. Exibindo Dados da API

Crie um componente que, ao ser montado (onMounted), dispare uma requisição GET para a rota /posts da API JSONPlaceholder. Armazene o resultado em um array reativo e exiba apenas os títulos dos 10 primeiros posts na tela.

4. Feedback de Carregamento

Adicione uma variável reativa loading (booleana) ao componente anterior. Inicie-a como true, e mude para false após a conclusão da requisição. Use um v-if no HTML para exibir uma mensagem "Carregando..." enquanto os dados não chegam.

5. Desafio: Buscador de Usuário

Crie um input de texto onde o usuário digita um ID. Ao clicar em um botão "Buscar", o app deve fazer um GET para /users/:id. Exiba o nome e o e-mail do usuário encontrado ou uma mensagem "Usuário não encontrado" em caso de erro 404.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Promises e Async/Await **Resposta Comentada:** - **Fundamentação:** No contexto de **Consumo de API REST**, o conceito abordado (Promises e Async/Await) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Configuração do Axios **Resposta Comentada:** - **Fundamentação:** No contexto de **Consumo de API REST**, o conceito abordado (Configuração do Axios) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Exibindo Dados da API **Resposta Comentada:** - **Fundamentação:** No contexto de **Consumo de API REST**, o conceito abordado (Exibindo Dados da API) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Feedback de Carregamento **Resposta Comentada:** - **Fundamentação:** No contexto de **Consumo de API REST**, o conceito abordado (Feedback de Carregamento) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Desafio **Resposta Comentada:** - **Fundamentação:** No contexto de **Consumo de API REST**, o conceito abordado (Desafio) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios: Aula 11 - Gerenciamento de Estado (Pinia) 🍍

1. Por que usar Pinia?

Cite uma situação em que o uso do Pinia (Gerenciamento de Estado Global) é preferível em relação ao uso de Props e Events. O que é o problema do "Prop Drilling"?

2. Criando uma Store

Crie uma store chamada useCounterStore usando o estilo Setup Store. - Defina um state (ref) chamado count. - Defina uma action (function) chamada increment. - Defina um getter (computed) chamado doubleCount que retorna o dobro do valor atual.

3. Consumindo a Store

Importe a store criada acima em um componente Vue. Exiba o valor de count e de doubleCount no template. Chame a action increment ao clicar em um botão.

4. Persistência de Estado

Como você faria para que os dados de uma Store do Pinia não fossem perdidos quando o usuário atualiza (F5) a página? Cite uma estratégia ou plugin que ajude nisso.

5. Desafio: Lista de Compras Global

Crie uma useCartStore que gerencie um array de produtos no carrinho. - Crie uma action para adicionar um produto ao array. - Crie um getter que calcule o valor total do carrinho (soma dos preços). - Crie dois componentes diferentes na página: um que adiciona itens e outro que exibe apenas o total acumulado, provando que ambos compartilham o mesmo estado.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Por que usar Pinia? **Resposta Comentada:** - **Fundamentação:** No contexto de **Gerenciamento de Estado com Pinia**, o conceito abordado (Por que usar Pinia?) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Criando uma Store **Resposta Comentada:** - **Fundamentação:** No contexto de **Gerenciamento de Estado com Pinia**, o conceito abordado (Criando uma Store) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Consumindo a Store **Resposta Comentada:** - **Fundamentação:** No contexto de **Gerenciamento de Estado com Pinia**, o conceito abordado (Consumindo a Store) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Persistência de Estado **Resposta Comentada:** - **Fundamentação:** No contexto de **Gerenciamento de Estado com Pinia**, o conceito abordado (Persistência de Estado) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Desafio **Resposta Comentada:** - **Fundamentação:** No contexto de **Gerenciamento de Estado com Pinia**, o conceito abordado (Desafio) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios: Aula 12 - Projeto Prático II: CRUD (Estrutura) 💾

1. Planejando o CRUD

Para um sistema de Gerenciamento de Produtos, quais são os 4 componentes visuais principais que você criaria para representar as ações de Criar, Ler, Atualizar e Deletar?

2. Verbos HTTP vs CRUD

Relacione as ações do CRUD com os verbos HTTP correspondentes: - Criar novo produto -> ? - Listar produtos -> ? - Atualizar produto existente -> ? - Deletar produto -> ?

3. Mockando a API

Utilize o site JSON Server ou uma ferramenta similar para simular uma API REST local. Crie um arquivo db.json com uma lista inicial de produtos contendo id, nome e preco.

4. Tratamento de Erros Profissional

No script de uma action que realiza um axios.post, como você trataria um erro de validação enviado pelo servidor (ex: Status 400)? Como você exibiria esse erro para o usuário final de forma amigável?

5. Desafio: Formulário de Edição

Crie um componente FormularioProduto.vue que sirva tanto para Criar quanto para Editar. - Ele deve receber um objeto produto opcional via prop. - Se a prop estiver presente, preencha os inputs com os dados (Edição). - Se não estiver, os campos devem começar vazios (Criação). - Ao salvar, o componente deve emitir um evento para o pai ou chamar a action da store correspondente.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Planejando o CRUD **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Prático II (CRUD Completo)**, o conceito abordado (Planejando o CRUD) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Verbos HTTP vs CRUD **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Prático II (CRUD Completo)**, o conceito abordado (Verbos HTTP vs CRUD) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Mockando a API **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Prático II (CRUD Completo)**, o conceito abordado (Mockando a API) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Tratamento de Erros Profissional **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Prático II (CRUD Completo)**, o conceito abordado (Tratamento de Erros Profissional) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Desafio **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Prático II (CRUD Completo)**, o conceito abordado (Desafio) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios: Aula 13 - Boas Práticas e Arquitetura 🏛️

1. Refatoração de Componentes

Pegue um componente que você criou nos exercícios anteriores que possua mais de 100 linhas. Tente identificar uma parte da interface que se repete ou que possui uma lógica independente e extraia-a para um novo componente menor. Quais os ganhos obtidos?

2. Criando um Composable

Crie um Composable chamado useToggle.js. - Ele deve retornar uma variável reativa isOpen (boolean) e uma função toggle que inverta esse valor. - Importe e use esse composable em dois componentes diferentes para controlar a visibilidade de um modal ou menu.

3. Organização de Pastas

Descreva como você organizaria as pastas de um projeto Vue que possui: - 20 Componentes globais (botão, input, etc). - 5 Páginas principais. - 3 Stores do Pinia. - 10 Ícones SVG. - 1 arquivo de configuração de rotas.

4. Boas Práticas de Props

Por que não devemos alterar o valor de uma Prop diretamente dentro do componente filho? Se precisarmos mudar esse valor, qual técnica (padrão) devemos seguir?

5. Desafio: Documentação de Componente

Escolha o componente mais complexo que você criou neste curso. Escreva um pequeno arquivo README.md (dentro da pasta do componente) explicando quais Props ele recebe, quais Eventos ele emite e qual a sua responsabilidade principal.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Refatoração de Componentes **Resposta Comentada:** - **Fundamentação:** No contexto de **Boas Práticas e Arquitetura**, o conceito abordado (Refatoração de Componentes) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Criando um Composable **Resposta Comentada:** - **Fundamentação:** No contexto de **Boas Práticas e Arquitetura**, o conceito abordado (Criando um Composable) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Organização de Pastas **Resposta Comentada:** - **Fundamentação:** No contexto de **Boas Práticas e Arquitetura**, o conceito abordado (Organização de Pastas) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Boas Práticas de Props **Resposta Comentada:** - **Fundamentação:** No contexto de **Boas Práticas e Arquitetura**, o conceito abordado (Boas Práticas de Props) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Desafio **Resposta Comentada:** - **Fundamentação:** No contexto de **Boas Práticas e Arquitetura**, o conceito abordado (Desafio) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios: Aula 14 - Estilização Moderna 🎨

1. CSS Scoped e Global

Crie um componente que tenha um parágrafo personalizado com uma cor rosa usando <style scoped>. Logo abaixo, crie um parágrafo normal em App.vue. Verifique se o parágrafo do App também ficou rosa. Explique o resultado.

2. Introdução ao Tailwind (Conceitual)

Transforme o seguinte CSS tradicional em classes utilitárias do Tailwind CSS: 

.meu-botao {
  background-color: #3b82f6;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  color: white;
  font-weight: bold;
}

3. Classes Dinâmicas

Crie uma lista de alertas. Cada alerta pode ser do tipo "sucesso", "erro" ou "aviso". Use a diretiva :class para mudar a cor de fundo do alerta com base no seu tipo.

4. Variáveis Reativas no CSS

No Vue 3, use o v-bind() dentro da tag <style> para que a largura de uma barra de progresso seja controlada por uma variável reativa do JavaScript. width: v-bind(porcentagem + '%');

5. Desafio: Dark Mode Simples

Crie um botão de "Alternar Tema". - Ao clicar, ele deve adicionar ou remover a classe .dark na tag principal do app ou no body. - Defina variáveis CSS para cor de fundo e cor de texto que mudam quando a classe .dark está ativa. - Use transições CSS para que a mudança de cores seja suave.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: CSS Scoped e Global **Resposta Comentada:** - **Fundamentação:** No contexto de **Estilização Moderna**, o conceito abordado (CSS Scoped e Global) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Introdução ao Tailwind (Conceitual) **Resposta Comentada:** - **Fundamentação:** No contexto de **Estilização Moderna**, o conceito abordado (Introdução ao Tailwind (Conceitual)) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Classes Dinâmicas **Resolução e Implementação:** 
// Solução de referência para: Classes Dinâmicas
function solucaoExercicio() {
    console.log("Executando validação de: Estilização Moderna");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Estilização Moderna**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 4: Variáveis Reativas no CSS **Resposta Comentada:** - **Fundamentação:** No contexto de **Estilização Moderna**, o conceito abordado (Variáveis Reativas no CSS) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Desafio **Resposta Comentada:** - **Fundamentação:** No contexto de **Estilização Moderna**, o conceito abordado (Desafio) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios: Aula 15 - Build, Deploy e Produção 🚢

1. Scripts do NPM

Abra o arquivo package.json. Explique o que cada um dos comandos abaixo faz: - npm run dev - npm run build - npm run preview

2. O Processo de Build

Execute npm run build no seu projeto. Abra a pasta dist/ que foi gerada. O que aconteceu com seus arquivos .vue? Eles ainda existem nesse formato na pasta final?

3. Variáveis de Ambiente

Crie um arquivo .env e defina uma variável VITE_API_URL. Como você acessa esse valor dentro de um componente Vue ou arquivo JS no Vite? Por que não devemos salvar senhas reais nesse arquivo?

4. Preparando para o Deploy

Escolha um serviço de hospedagem gratuito (Vercel ou Netlify). Conecte seu repositório do GitHub e realize o primeiro deploy. Coloque o link do seu site no ar aqui.

5. Desafio: Auditoria com Lighthouse

Abra o seu site publicado no Google Chrome. Vá em "Inspecionar" -> "Lighthouse" e gere um relatório de performance. Identifique um ponto de melhoria sugerido pela ferramenta para o seu projeto Vue.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Scripts do NPM **Resolução e Implementação:** 
// Solução de referência para: Scripts do NPM
function solucaoExercicio() {
    console.log("Executando validação de: Build, Deploy e Produção");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Build, Deploy e Produção**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: O Processo de Build **Resposta Comentada:** - **Fundamentação:** No contexto de **Build, Deploy e Produção**, o conceito abordado (O Processo de Build) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Variáveis de Ambiente **Resposta Comentada:** - **Fundamentação:** No contexto de **Build, Deploy e Produção**, o conceito abordado (Variáveis de Ambiente) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Preparando para o Deploy **Resposta Comentada:** - **Fundamentação:** No contexto de **Build, Deploy e Produção**, o conceito abordado (Preparando para o Deploy) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Desafio **Resposta Comentada:** - **Fundamentação:** No contexto de **Build, Deploy e Produção**, o conceito abordado (Desafio) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios: Aula 16 - Projeto Final: Kanban System 🎓

1. Checklist de Requisitos

Leia os requisitos do Projeto Final na Aula 16. Liste quais as 3 funcionalidades você considera as mais desafiadoras de implementar e por quê.

2. Arquitetura da Store de Tarefas

Desenhe a estrutura da Store do Pinia para o Kanban. Quais propriedades o objeto de tarefa deve ter para que o sistema saiba em qual coluna (To Do, Doing, Done) a tarefa se encontra?

3. Planejamento de Layout

Faça um rascunho (pode ser no papel ou ferramenta de desenho) de como as 3 colunas serão exibidas em telas de computador (desktop) e como elas devem se comportar em telas de celular (mobile). Utilize conceitos de Flexbox ou CSS Grid.

4. Feedback ao Usuário

Como você notificaria o usuário de que uma tarefa foi criada, movida ou excluída com sucesso? (Ex: Toasts, Modais, Alertas). Cite uma biblioteca que ajude com isso.

5. Desafio Final: Estrutura do Repositório

Crie o repositório final do projeto no GitHub. Organize as pastas iniciais, configure o Vue Router e o Pinia. Crie os componentes "casca" para as colunas e para o Header. Realize o primeiro git commit com o título "Initial project structure".

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Checklist de Requisitos **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Final e Apresentação**, o conceito abordado (Checklist de Requisitos) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Arquitetura da Store de Tarefas **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Final e Apresentação**, o conceito abordado (Arquitetura da Store de Tarefas) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Planejamento de Layout **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Final e Apresentação**, o conceito abordado (Planejamento de Layout) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Feedback ao Usuário **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Final e Apresentação**, o conceito abordado (Feedback ao Usuário) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Desafio Final **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Final e Apresentação**, o conceito abordado (Desafio Final) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Projetos

🚀 Projetos do Curso

Lista completa das 20 unidades de projetos organizadas em 5 módulos didáticos.

Projeto 01 - Setup e Primeiro Componente 🚀

🎯 Objetivo

Configurar o ambiente de desenvolvimento e criar a estrutura inicial da sua primeira aplicação Vue 3 utilizando o Vite.

🛠️ Requisitos

  1. Instalação: Certifique-se de ter o Node.js instalado.
  2. Bootstrap: Inicie um projeto usando o comando npm create vite@latest.
  3. Configuração:
    • Nome do projeto: meu-primeiro-vue
    • Framework: Vue
    • Variante: JavaScript
  4. Limpeza: Remova os arquivos de exemplo gerados pelo Vite (HelloWorld.vue, estilos padrão em App.vue).

🏗️ Tarefas

  1. No arquivo App.vue, crie uma estrutura básica de HTML usando as tags <template>, <script setup> e <style>.
  2. Exiba uma mensagem de boas-vindas em um <h1>.
  3. Adicione um parágrafo descrevendo qual o seu objetivo com este curso de Vue.js.
  4. Aplique um estilo CSS simples (cor de fundo e fonte) no bloco <style>.

🧪 Verificação

Rode o comando npm run dev e verifique se o seu projeto está rodando em localhost:5173 com as informações que você escreveu.

Projeto 02 - Layout e Estrutura Estática 🏗️

🎯 Objetivo

Organizar a estrutura visual de uma página utilizando as pastas e padrões de um projeto profissional em Vue.

🛠️ Requisitos

  • Utilizar o projeto criado na aula anterior.
  • Respeitar a divisão de pastas: src/assets para estilos e src/components para as peças da interface.

🏗️ Tarefas

  1. CSS Global: Crie um arquivo src/assets/main.css com um reset básico (margin: 0, padding: 0) e importe-o no seu main.js.
  2. Header: Crie um componente Header.vue na pasta components que contenha o nome "Meu Portal Vue" e um menu simples (Home, Sobre).
  3. Footer: Crie um componente Footer.vue com os créditos: "Desenvolvido por [Seu Nome] - 2026".
  4. Assemble: Importe e exiba o Header e o Footer dentro do seu App.vue.

🧪 Verificação

O site deve exibir uma barra no topo, um espaço no meio (conteúdo do App) e uma barra no rodapé, sem espaços em branco nas bordas da tela.

Projeto 03 - Card Interativo (Reatividade) ⚛️

🎯 Objetivo

Implementar a reatividade do Vue para criar uma interface que responde aos dados em tempo real.

🛠️ Requisitos

  • Uso de ref ou reactive.
  • Uso de Interpolação {{ }} e Bind de atributos :src, :alt.

🏗️ Tarefas

  1. Estado do Perfil: Crie um objeto reativo que contenha: nome, bio, seguidores (número) e urlAvatar.
  2. Visual: Crie um Card que exiba essas informações de forma elegante.
  3. Ação: Adicione um botão "Seguir" que, ao ser clicado, adicione +1 ao número de seguidores.
  4. Log: Use um watch para imprimir no console toda vez que o número de seguidores mudar.

🧪 Verificação

Ao clicar no botão, o número na tela deve atualizar instantaneamente sem que a página recarregue.

Projeto 04 - Lista Dinâmica (Diretivas) 📜

🎯 Objetivo

Dominar o controle de fluxo no template utilizando as diretivas v-if, v-for e @click.

🛠️ Requisitos

  • Listagem dinâmica de dados.
  • Modificadores de evento.

🏗️ Tarefas

  1. Lista de Frutas: Crie um array reativo de strings com nomes de frutas.
  2. Renderização: Utilize o v-for para mostrar a lista na tela. Use o index como :key.
  3. Adicionar: Crie um input e um botão para que o usuário possa digitar uma nova fruta e adicioná-la à lista ao clicar ou apertar Enter (@keyup.enter).
  4. Condicional: Se a lista estiver vazia (adicione um botão "Limpar Tudo"), exiba a mensagem: "Nenhuma fruta encontrada. 🧺".

🧪 Verificação

Teste adicionar 3 frutas, verifique se elas aparecem. Limpe a lista e veja se o aviso de lista vazia aparece conforme o esperado.

Projeto 05 - Componentização e Props 🧩

🎯 Objetivo

Quebrar uma interface monolítica em pequenos componentes reutilizáveis, utilizando Props para transferência de dados.

🛠️ Requisitos

  • Divisão em múltiplos arquivos .vue.
  • Validação de Props no componente filho.

🏗️ Tarefas

  1. Componente Base: Crie um componente MeuBotao.vue que aceite as props texto (obrigatória) e cor (opcional, com valor padrão).
  2. Componente de Card: Crie um CardProduto.vue que receba um objeto produto (id, nome, preco) e um botão do item 1.
  3. App: No App.vue, renderize uma lista de 3 produtos diferentes utilizando o CardProduto.
  4. Estilização: Utilize o atributo scoped para garantir que o estilo de um card não afete o outro.

🧪 Verificação

Verifique se os cards aparecem de forma independente e se os botões exibem o texto correto enviado pelo componente pai.

Projeto 06 - Eventos e Comunicação 📡

🎯 Objetivo

Estabelecer a comunicação de "baixo para cima" (filho para pai) utilizando defineEmits.

🛠️ Requisitos

  • Uso de defineEmits no componente filho.
  • Captura de eventos com @ no componente pai.

🏗️ Tarefas

  1. Filho: Crie um componente TecladoNumerico.vue com botões de 1 a 9.
  2. Ação: Ao clicar em qualquer número, o componente deve disparar um evento clique-numero enviando o valor pressionado como conteúdo (payload).
  3. Pai: No App.vue, receba esses números e vá concatenando-os em uma variável resultado para formar um número de telefone.
  4. Botão Limpar: O pai deve ter um botão para resetar a variável.

🧪 Verificação

Digite uma sequência de números no teclado e verifique se o número completo está sendo montado corretamente na tela do componente pai.

Projeto 07 - Ciclo de Vida e Hooks 🔄

🎯 Objetivo

Utilizar os estágios de vida de um componente para gerenciar recursos do sistema e chamadas externas.

🛠️ Requisitos

  • Uso de onMounted e onUnmounted.

🏗️ Tarefas

  1. Relógio Reativo: Crie um componente que exiba as horas atuais.
  2. Montagem: No onMounted, inicie um setInterval que atualiza a hora a cada segundo.
  3. Limpeza: No onUnmounted, limpe o intervalo para evitar que ele continue rodando na memória após o componente ser destruído.
  4. Toggle: No App.vue, crie um botão "Mostrar/Esconder Relógio" para testar se a limpeza está funcionando (verifique via logs no console).

🧪 Verificação

Abra o console do navegador. O relógio deve atualizar a cada segundo. Clique em esconder e verifique se as atualizações no console param imediatamente.

Projeto Prático I - Task Manager App 📝

🎯 Objetivo

Construir uma aplicação real de gerenciamento de tarefas, consolidando os conhecimentos de componentes, props, eventos e persistência.

🛠️ Requisitos

  • Componentização completa (Form, List, Item).
  • Persistência no localStorage.
  • Estilização agradável.

🏗️ Tarefas

  1. Estrutura: Crie o componente TaskForm para entrada e TaskItem para exibição.
  2. Lista: O componente Pai (App.vue) deve manter o array de objetos de tarefas.
  3. Funcionalidades:
    • Adicionar tarefa.
    • Marcar como concluída (visual riscado).
    • Deletar tarefa da lista.
  4. Persistência: Ao carregar, verifique o LocalStorage. Ao mudar a lista, salve no LocalStorage.

🧪 Verificação

Feche o navegador e abra novamente. Suas tarefas devem continuar aparecendo na tela exatamente como você as deixou.

Projeto 09 - Roteamento com Vue Router 🛣️

🎯 Objetivo

Transformar sua aplicação em uma SPA (Single Page Application) com múltiplas visualizações e navegação entre elas.

🛠️ Requisitos

  • Instalação e configuração do vue-router.
  • Uso de router-link e router-view.

🏗️ Tarefas

  1. Setup: Instale o Vue Router e crie o arquivo src/router/index.js.
  2. Vistas: Crie as pastas src/views e adicione os componentes Home.vue e Sobre.vue.
  3. Navegação: No App.vue, remova o conteúdo central e coloque a tag <router-view />. Crie links de navegação usando <router-link>.
  4. Parâmetros: Crie uma rota /usuario/:id que exiba o ID passado na URL dentro da página.

🧪 Verificação

Clique nos links do menu. A URL deve mudar e o conteúdo no centro da página deve alternar sem que o navegador realize um refresh completo.

Projeto 10 - Consumo de API REST 🌐

🎯 Objetivo

Integrar o frontend com um serviço externo de dados utilizando o Axios.

🛠️ Requisitos

  • Instalação do axios.
  • Chamadas assíncronas com async/await.

🏗️ Tarefas

  1. Instalação: Instale o axios e crie uma instância de API apontando para https://jsonplaceholder.typicode.com.
  2. Lista de Usuários: No onMounted de um componente, busque a lista de usuários (/users).
  3. Renderização: Mostre o nome e o e-mail de cada usuário em uma lista.
  4. Loading: Exiba um texto "Carregando..." enquanto os dados não chegam e trate possíveis erros com try/catch.

🧪 Verificação

Ao entrar na página, você deve visualizar a lista real de usuários vinda da API externa.

Projeto 11 - Gerenciamento de Estado (Pinia) 🍍

🎯 Objetivo

Centralizar o estado de informações importantes da aplicação para que elas sejam acessíveis em qualquer tela.

🛠️ Requisitos

  • Configuração do Pinia.
  • Criação de uma Store (State, Actions).

🏗️ Tarefas

  1. Setup: Configure o Pinia no main.js.
  2. Store de Perfil: Crie uma store useUserStore que guarde o nome do usuário logado.
  3. Ação: Crie uma função na store para atualizar o nome.
  4. Uso: Exiba o nome do usuário no Header (vindo da store) e crie uma página de "Configurações" onde o usuário possa mudar seu nome.

🧪 Verificação

Mude o nome na página de configurações e verifique se o nome no cabeçalho (Header) atualiza instantaneamente em todas as rotas.

Projeto Prático II - CRUD System 💾

🎯 Objetivo

Desenvolver um sistema completo de Gerenciamento de Produtos, aplicando roteamento, consumo de API e estado global.

🛠️ Requisitos

  • Rotas para Listagem, Criação e Edição.
  • Uso de Axios para persistir dados (use o JSON-Server se desejar).
  • Pinia para gerenciar a lista de produtos em cache.

🏗️ Tarefas

  1. Listagem: Crie uma tela que liste todos os produtos com botões de "Editar" e "Excluir".
  2. Cadastro: Crie um formulário que envie um POST para a API para criar novos produtos.
  3. Edição: Ao clicar em editar, leve o usuário para uma rota /editar/:id, carregue os dados e permita o salvamento via PUT.
  4. Exclusão: Ao clicar em excluir, envie o DELETE e atualize a lista na tela.

🧪 Verificação

Realize o fluxo completo: Crie um produto, edite o nome dele, e por fim, exclua-o da lista. Verifique se todas as requisições na aba "Network" do navegador foram bem-sucedidas.

Projeto 13 - Composables e Clean Code 🏛️

🎯 Objetivo

Melhorar a organização do código extraindo lógicas complexas para funções reusáveis (Composables).

🛠️ Requisitos

  • Criação de um Composable customizado.
  • Refatoração de um componente existente.

🏗️ Tarefas

  1. useFetch: Crie um composable chamado useFetch que receba uma URL e retorne { data, error, loading }.
  2. Encapsulamento: Toda a lógica de try/catch e estados de loading devem ficar dentro do composable.
  3. Refatoração: Escolha um componente que faça chamadas de API e substitua o código original pelo uso do seu novo useFetch.
  4. Reuso: Utilize o mesmo composable em um segundo componente para provar que a lógica é genérica.

🧪 Verificação

O componente deve continuar funcionando exatamente como antes, mas o código dentro dele deve estar muito mais limpo e focado apenas na interface.

Projeto 14 - Estilização Moderna (Tailwind) 🎨

🎯 Objetivo

Implementar uma interface profissional e moderna utilizando as classes utilitárias do Tailwind CSS.

🛠️ Requisitos

  • Configuração do Tailwind CSS no projeto.
  • Design responsivo.

🏗️ Tarefas

  1. Setup: Instale e configure o Tailwind no seu projeto Vite.
  2. Login Screen: Crie uma tela de Login bonita e centralizada.
  3. Estilos: Use bordas arredondadas, sombras (shadow-md), efeitos de hover nos botões e um fundo suave.
  4. Responsividade: Garanta que o formulário ocupe a largura total no celular e tenha uma largura fixa em telas maiores.

🧪 Verificação

Abra o site e verifique se o layout está alinhado e se os botões e campos possuem o visual "premium" proporcionado pelo Tailwind.

Projeto 15 - Build e Deploy 🚢

🎯 Objetivo

Transformar seu código fonte em um site real e acessível por qualquer pessoa na internet.

🛠️ Requisitos

  • Processo de build via Vite.
  • Hosting em plataforma Jamstack.

🏗️ Tarefas

  1. Build: Execute npm run build e explore a pasta dist/.
  2. Environment: Crie um arquivo .env para suas chaves de API.
  3. Deploy: Suba seu projeto para o GitHub e conecte-o ao Netlify ou Vercel.
  4. Auditoria: Rode o Lighthouse do Google Chrome no site já publicado e identifique melhorias de performance.

🧪 Verificação

Envie o link do seu site no ar para um colega ou abra no seu celular para testar o acesso externo.

Projeto Final - Kanban System 🎓

🎯 Objetivo

Construir uma aplicação avançada de produtividade aplicando TODO o conhecimento adquirido no curso.

🛠️ Requisitos

  • Sistema de colunas (To-Do, Doing, Done).
  • Drag and Drop para movimentação de tarefas.
  • Persistência total (Pinia + LocalStorage).
  • UI profissional com Tailwind.

🏗️ Tarefas

  1. Planejamento: Defina a estrutura da sua store do Pinia para gerenciar as tarefas por status.
  2. Interface: Crie as 3 colunas e o formulário para adicionar novas tarefas.
  3. Movimentação: Implemente a lógica para mudar o status de uma tarefa ao ser movida.
  4. Filtros: Adicione uma busca rápida no topo para filtrar tarefas pelo título.
  5. Finalização: Realize o deploy e documente o projeto em um README caprichado.

🧪 Verificação

Mova uma tarefa da coluna "To-Do" para "Done", atualize a página e verifique se ela permanece na coluna correta.

🚀 Projeto 17 – Composition API Avançada e Composables Reutilizáveis 🚀

🎯 Objetivo

Desenvolver uma aplicação ou módulo prático alinhado aos requisitos avançados de Composition API Avançada e Composables Reutilizáveis 🚀.

📋 Requisitos do Desafio

  1. Estruturar o módulo principal para resolução do problema de Composition API Avançada e Composables Reutilizáveis 🚀.
  2. Garantir tratamento de exceções, validação rigorosa de dados e documentação limpa.

💡 Código / Arquitetura de Referência

// Estrutura do Projeto 17 - Composition API Avançada e Composables Reutilizáveis 🚀
INICIO
    INICIALIZAR componente (Composition API Avançada e Composables Reutilizáveis 🚀)
    EXECUTAR processamento de dados
    VALIDAR métricas e integridade
FIM

🚀 Projeto 18 – Gerenciamento de Estado Global com Pinia 🚀

🎯 Objetivo

Desenvolver uma aplicação ou módulo prático alinhado aos requisitos avançados de Gerenciamento de Estado Global com Pinia 🚀.

📋 Requisitos do Desafio

  1. Estruturar o módulo principal para resolução do problema de Gerenciamento de Estado Global com Pinia 🚀.
  2. Garantir tratamento de exceções, validação rigorosa de dados e documentação limpa.

💡 Código / Arquitetura de Referência

// Estrutura do Projeto 18 - Gerenciamento de Estado Global com Pinia 🚀
INICIO
    INICIALIZAR componente (Gerenciamento de Estado Global com Pinia 🚀)
    EXECUTAR processamento de dados
    VALIDAR métricas e integridade
FIM

🚀 Projeto 19 – Diretivas Customizadas e Render Functions 🚀

🎯 Objetivo

Desenvolver uma aplicação ou módulo prático alinhado aos requisitos avançados de Diretivas Customizadas e Render Functions 🚀.

📋 Requisitos do Desafio

  1. Estruturar o módulo principal para resolução do problema de Diretivas Customizadas e Render Functions 🚀.
  2. Garantir tratamento de exceções, validação rigorosa de dados e documentação limpa.

💡 Código / Arquitetura de Referência

// Estrutura do Projeto 19 - Diretivas Customizadas e Render Functions 🚀
INICIO
    INICIALIZAR componente (Diretivas Customizadas e Render Functions 🚀)
    EXECUTAR processamento de dados
    VALIDAR métricas e integridade
FIM

🚀 Projeto 20 – Projeto Capstone: Aplicação Vue 3 Autônoma Reativa 🚀

🎯 Objetivo

Desenvolver uma aplicação ou módulo prático alinhado aos requisitos avançados de Projeto Capstone: Aplicação Vue 3 Autônoma Reativa 🚀.

📋 Requisitos do Desafio

  1. Estruturar o módulo principal para resolução do problema de Projeto Capstone: Aplicação Vue 3 Autônoma Reativa 🚀.
  2. Garantir tratamento de exceções, validação rigorosa de dados e documentação limpa.

💡 Código / Arquitetura de Referência

// Estrutura do Projeto 20 - Projeto Capstone: Aplicação Vue 3 Autônoma Reativa 🚀
INICIO
    INICIALIZAR componente (Projeto Capstone: Aplicação Vue 3 Autônoma Reativa 🚀)
    EXECUTAR processamento de dados
    VALIDAR métricas e integridade
FIM

Quizzes

🧠 Quizzes de Fixação

Lista completa das 20 unidades de quizzes organizadas em 5 módulos didáticos.

🧠 Quiz 01 – Introdução ao Frontend Moderno 🚀

  1. Qual é o conceito fundamental e objetivo principal de Introdução ao Frontend Moderno 🚀?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Introdução ao Frontend Moderno 🚀?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Introdução ao Frontend Moderno 🚀, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Introdução ao Frontend Moderno 🚀?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Introdução ao Frontend Moderno 🚀 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Introdução ao Frontend Moderno 🚀, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Introdução ao Frontend Moderno 🚀?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Introdução ao Frontend Moderno 🚀 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Introdução ao Frontend Moderno 🚀 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Introdução ao Frontend Moderno 🚀 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 02 – Estrutura do Projeto Vue 3 🏗️

  1. Qual é o conceito fundamental e objetivo principal de Estrutura do Projeto Vue 3 🏗️?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Estrutura do Projeto Vue 3 🏗️?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Estrutura do Projeto Vue 3 🏗️, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Estrutura do Projeto Vue 3 🏗️?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Estrutura do Projeto Vue 3 🏗️ atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Estrutura do Projeto Vue 3 🏗️, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Estrutura do Projeto Vue 3 🏗️?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Estrutura do Projeto Vue 3 🏗️ estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Estrutura do Projeto Vue 3 🏗️ com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Estrutura do Projeto Vue 3 🏗️ deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 03 – Reatividade e Data Binding ⚡

  1. Qual é o conceito fundamental e objetivo principal de Reatividade e Data Binding ⚡?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Reatividade e Data Binding ⚡?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Reatividade e Data Binding ⚡, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Reatividade e Data Binding ⚡?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Reatividade e Data Binding ⚡ atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Reatividade e Data Binding ⚡, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Reatividade e Data Binding ⚡?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Reatividade e Data Binding ⚡ estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Reatividade e Data Binding ⚡ com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Reatividade e Data Binding ⚡ deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 04 – Diretivas e Renderização Condicional 🌈

  1. Qual é o conceito fundamental e objetivo principal de Diretivas e Renderização Condicional 🌈?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Diretivas e Renderização Condicional 🌈?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Diretivas e Renderização Condicional 🌈, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Diretivas e Renderização Condicional 🌈?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Diretivas e Renderização Condicional 🌈 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Diretivas e Renderização Condicional 🌈, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Diretivas e Renderização Condicional 🌈?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Diretivas e Renderização Condicional 🌈 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Diretivas e Renderização Condicional 🌈 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Diretivas e Renderização Condicional 🌈 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 05 – Componentes e Props 🧩

  1. Qual é o conceito fundamental e objetivo principal de Componentes e Props 🧩?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Componentes e Props 🧩?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Componentes e Props 🧩, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Componentes e Props 🧩?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Componentes e Props 🧩 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Componentes e Props 🧩, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Componentes e Props 🧩?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Componentes e Props 🧩 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Componentes e Props 🧩 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Componentes e Props 🧩 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 06 – Eventos e Comunicação entre Componentes 📡

  1. Qual é o conceito fundamental e objetivo principal de Eventos e Comunicação entre Componentes 📡?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Eventos e Comunicação entre Componentes 📡?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Eventos e Comunicação entre Componentes 📡, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Eventos e Comunicação entre Componentes 📡?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Eventos e Comunicação entre Componentes 📡 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Eventos e Comunicação entre Componentes 📡, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Eventos e Comunicação entre Componentes 📡?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Eventos e Comunicação entre Componentes 📡 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Eventos e Comunicação entre Componentes 📡 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Eventos e Comunicação entre Componentes 📡 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 07 – Ciclo de Vida e Hooks 🔄

  1. Qual é o conceito fundamental e objetivo principal de Ciclo de Vida e Hooks 🔄?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Ciclo de Vida e Hooks 🔄?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Ciclo de Vida e Hooks 🔄, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Ciclo de Vida e Hooks 🔄?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Ciclo de Vida e Hooks 🔄 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Ciclo de Vida e Hooks 🔄, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Ciclo de Vida e Hooks 🔄?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Ciclo de Vida e Hooks 🔄 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Ciclo de Vida e Hooks 🔄 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Ciclo de Vida e Hooks 🔄 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

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

  1. Qual é o conceito fundamental e objetivo principal de Projeto Prático I (Task Manager) 📋?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Projeto Prático I (Task Manager) 📋?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Projeto Prático I (Task Manager) 📋, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Projeto Prático I (Task Manager) 📋?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Projeto Prático I (Task Manager) 📋 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Projeto Prático I (Task Manager) 📋, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Projeto Prático I (Task Manager) 📋?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Projeto Prático I (Task Manager) 📋 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Projeto Prático I (Task Manager) 📋 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Projeto Prático I (Task Manager) 📋 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 09 – Roteamento com Vue Router 🛣️

  1. Qual é o conceito fundamental e objetivo principal de Roteamento com Vue Router 🛣️?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Roteamento com Vue Router 🛣️?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Roteamento com Vue Router 🛣️, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Roteamento com Vue Router 🛣️?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Roteamento com Vue Router 🛣️ atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Roteamento com Vue Router 🛣️, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Roteamento com Vue Router 🛣️?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Roteamento com Vue Router 🛣️ estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Roteamento com Vue Router 🛣️ com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Roteamento com Vue Router 🛣️ deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 10 – Consumo de API REST 🌐

  1. Qual é o conceito fundamental e objetivo principal de Consumo de API REST 🌐?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Consumo de API REST 🌐?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Consumo de API REST 🌐, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Consumo de API REST 🌐?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Consumo de API REST 🌐 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Consumo de API REST 🌐, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Consumo de API REST 🌐?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Consumo de API REST 🌐 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Consumo de API REST 🌐 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Consumo de API REST 🌐 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 11 – Gerenciamento de Estado com Pinia 🍍

  1. Qual é o conceito fundamental e objetivo principal de Gerenciamento de Estado com Pinia 🍍?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Gerenciamento de Estado com Pinia 🍍?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Gerenciamento de Estado com Pinia 🍍, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Gerenciamento de Estado com Pinia 🍍?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Gerenciamento de Estado com Pinia 🍍 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Gerenciamento de Estado com Pinia 🍍, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Gerenciamento de Estado com Pinia 🍍?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Gerenciamento de Estado com Pinia 🍍 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Gerenciamento de Estado com Pinia 🍍 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Gerenciamento de Estado com Pinia 🍍 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 12 – Projeto Prático II (CRUD Completo) 🚀

  1. Qual é o conceito fundamental e objetivo principal de Projeto Prático II (CRUD Completo) 🚀?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Projeto Prático II (CRUD Completo) 🚀?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Projeto Prático II (CRUD Completo) 🚀, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Projeto Prático II (CRUD Completo) 🚀?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Projeto Prático II (CRUD Completo) 🚀 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Projeto Prático II (CRUD Completo) 🚀, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Projeto Prático II (CRUD Completo) 🚀?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Projeto Prático II (CRUD Completo) 🚀 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Projeto Prático II (CRUD Completo) 🚀 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Projeto Prático II (CRUD Completo) 🚀 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 13 – Boas Práticas e Arquitetura 🏰

  1. Qual é o conceito fundamental e objetivo principal de Boas Práticas e Arquitetura 🏰?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Boas Práticas e Arquitetura 🏰?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Boas Práticas e Arquitetura 🏰, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Boas Práticas e Arquitetura 🏰?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Boas Práticas e Arquitetura 🏰 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Boas Práticas e Arquitetura 🏰, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Boas Práticas e Arquitetura 🏰?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Boas Práticas e Arquitetura 🏰 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Boas Práticas e Arquitetura 🏰 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Boas Práticas e Arquitetura 🏰 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 14 – Estilização Moderna 🎨

  1. Qual é o conceito fundamental e objetivo principal de Estilização Moderna 🎨?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Estilização Moderna 🎨?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Estilização Moderna 🎨, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Estilização Moderna 🎨?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Estilização Moderna 🎨 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Estilização Moderna 🎨, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Estilização Moderna 🎨?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Estilização Moderna 🎨 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Estilização Moderna 🎨 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Estilização Moderna 🎨 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 15 – Build, Deploy e Produção 🚀

  1. Qual é o conceito fundamental e objetivo principal de Build, Deploy e Produção 🚀?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Build, Deploy e Produção 🚀?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Build, Deploy e Produção 🚀, Deploy e Produção 🚀, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Build, Deploy e Produção 🚀?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Build, Deploy e Produção 🚀 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Build, Deploy e Produção 🚀, Deploy e Produção 🚀, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Build, Deploy e Produção 🚀?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Build, Deploy e Produção 🚀 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Build, Deploy e Produção 🚀 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Build, Deploy e Produção 🚀 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 16 – Projeto Final e Apresentação 🏆

  1. Qual é o conceito fundamental e objetivo principal de Projeto Final e Apresentação 🏆?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Projeto Final e Apresentação 🏆?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Projeto Final e Apresentação 🏆, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Projeto Final e Apresentação 🏆?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Projeto Final e Apresentação 🏆 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Projeto Final e Apresentação 🏆, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Projeto Final e Apresentação 🏆?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Projeto Final e Apresentação 🏆 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Projeto Final e Apresentação 🏆 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Projeto Final e Apresentação 🏆 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 17 – Composition API Avançada e Composables Reutilizáveis 🚀

  1. Qual o propósito principal de Composition API Avançada e Composables Reutilizáveis 🚀?
  2. ( ) Reduzir o espaço em disco sem validação.
  3. (x) Garantir estruturação, eficiência e robustez no processamento do sistema.
  4. ( ) Desativar os testes unitários automatizados.

  5. ( ) Substituir a documentação técnica por código legado.

  6. Qual benefício direto é obtido ao aplicar os padrões de Composition API Avançada e Composables Reutilizáveis 🚀?

  7. (x) Maior manutenibilidade, legibilidade e desempenho.
  8. ( ) Aumento no tempo de resposta das chamadas à API.
  9. ( ) Incompatibilidade com compiladores modernos.

  10. ( ) Bloqueio da execução assíncrona.

  11. Em relação à arquitetura de Composition API Avançada e Composables Reutilizáveis 🚀, assinale a alternativa correta:

  12. ( ) O módulo opera de forma totalmente isolada sem interface de dados.
  13. (x) O fluxo de dados segue validação de entrada, processamento e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de apresentação.

  15. ( ) Não há suporte para testes de integração.

  16. Qual a melhor prática ao implementar Composition API Avançada e Composables Reutilizáveis 🚀?

  17. (x) Manter o código coeso, desacoplado e devidamente documentado.
  18. ( ) Utilizar variáveis globais sem controle de acesso.
  19. ( ) Omitir o tratamento de erros em produção.

  20. ( ) Desabilitar a checagem de tipos estáticos.

  21. Como verificar se a implementação de Composition API Avançada e Composables Reutilizáveis 🚀 atingiu os objetivos de qualidade?

  22. ( ) Observando o tamanho do arquivo fonte em bytes.
  23. (x) Executando testes automatizados de cobertura e benchmarks de desempenho.
  24. ( ) Verificando a cor do tema do editor de código.

  25. ( ) Aguardando reclamações dos usuários finais em produção.

  26. Ao lidar com exceções em Composition API Avançada e Composables Reutilizáveis 🚀, deve-se:

  27. (x) Capturar falhas específicas e fornecer mensagens informativas com rastreamento.
  28. ( ) Ignorar todos os erros com blocos vazios try-catch.
  29. ( ) Encerrar o sistema imediatamente sem log.

  30. ( ) Modificar o sistema operacional hospedeiro.

  31. Qual o impacto do mau uso dos conceitos de Composition API Avançada e Composables Reutilizáveis 🚀?

  32. (x) Degradação de desempenho, vulnerabilidades de segurança e débito técnico.
  33. ( ) Redução automática no uso de memória RAM.
  34. ( ) Melhoria na taxa de transferência de dados da rede.

  35. ( ) Formatação automática de arquivos Markdown.

  36. O princípio da responsabilidade única aplicado a Composition API Avançada e Composables Reutilizáveis 🚀 determina que:

  37. (x) Cada classe ou função deve ter apenas uma razão para mudar.
  38. ( ) Todas as funções do sistema devem residir no mesmo arquivo.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os comentários de código devem ser removidos antes da compilação.

  41. Na integração de Composition API Avançada e Composables Reutilizáveis 🚀 com outros componentes do ecossistema:

  42. (x) Deve-se utilizar interfaces bem definidas e contratos claros (APIs/DTOs).
  43. ( ) Deve-se utilizar acesso direto às estruturas privadas de outros módulos.
  44. ( ) É proibido transmitir dados pela rede.

  45. ( ) Todos os dados devem ser trafegados em formato de texto bruto desformatado.

  46. A documentação técnica referente a Composition API Avançada e Composables Reutilizáveis 🚀 deve conter:

  47. (x) Requisitos, diagramas de fluxo, exemplos de uso e instruções de teste.
  48. ( ) Apenas o nome do autor do código.
  49. ( ) Lista de reprodução de músicas recomendadas.
  50. ( ) Histórico completo de conversas do suporte.

🧠 Quiz 18 – Gerenciamento de Estado Global com Pinia 🚀

  1. Qual o propósito principal de Gerenciamento de Estado Global com Pinia 🚀?
  2. ( ) Reduzir o espaço em disco sem validação.
  3. (x) Garantir estruturação, eficiência e robustez no processamento do sistema.
  4. ( ) Desativar os testes unitários automatizados.

  5. ( ) Substituir a documentação técnica por código legado.

  6. Qual benefício direto é obtido ao aplicar os padrões de Gerenciamento de Estado Global com Pinia 🚀?

  7. (x) Maior manutenibilidade, legibilidade e desempenho.
  8. ( ) Aumento no tempo de resposta das chamadas à API.
  9. ( ) Incompatibilidade com compiladores modernos.

  10. ( ) Bloqueio da execução assíncrona.

  11. Em relação à arquitetura de Gerenciamento de Estado Global com Pinia 🚀, assinale a alternativa correta:

  12. ( ) O módulo opera de forma totalmente isolada sem interface de dados.
  13. (x) O fluxo de dados segue validação de entrada, processamento e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de apresentação.

  15. ( ) Não há suporte para testes de integração.

  16. Qual a melhor prática ao implementar Gerenciamento de Estado Global com Pinia 🚀?

  17. (x) Manter o código coeso, desacoplado e devidamente documentado.
  18. ( ) Utilizar variáveis globais sem controle de acesso.
  19. ( ) Omitir o tratamento de erros em produção.

  20. ( ) Desabilitar a checagem de tipos estáticos.

  21. Como verificar se a implementação de Gerenciamento de Estado Global com Pinia 🚀 atingiu os objetivos de qualidade?

  22. ( ) Observando o tamanho do arquivo fonte em bytes.
  23. (x) Executando testes automatizados de cobertura e benchmarks de desempenho.
  24. ( ) Verificando a cor do tema do editor de código.

  25. ( ) Aguardando reclamações dos usuários finais em produção.

  26. Ao lidar com exceções em Gerenciamento de Estado Global com Pinia 🚀, deve-se:

  27. (x) Capturar falhas específicas e fornecer mensagens informativas com rastreamento.
  28. ( ) Ignorar todos os erros com blocos vazios try-catch.
  29. ( ) Encerrar o sistema imediatamente sem log.

  30. ( ) Modificar o sistema operacional hospedeiro.

  31. Qual o impacto do mau uso dos conceitos de Gerenciamento de Estado Global com Pinia 🚀?

  32. (x) Degradação de desempenho, vulnerabilidades de segurança e débito técnico.
  33. ( ) Redução automática no uso de memória RAM.
  34. ( ) Melhoria na taxa de transferência de dados da rede.

  35. ( ) Formatação automática de arquivos Markdown.

  36. O princípio da responsabilidade única aplicado a Gerenciamento de Estado Global com Pinia 🚀 determina que:

  37. (x) Cada classe ou função deve ter apenas uma razão para mudar.
  38. ( ) Todas as funções do sistema devem residir no mesmo arquivo.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os comentários de código devem ser removidos antes da compilação.

  41. Na integração de Gerenciamento de Estado Global com Pinia 🚀 com outros componentes do ecossistema:

  42. (x) Deve-se utilizar interfaces bem definidas e contratos claros (APIs/DTOs).
  43. ( ) Deve-se utilizar acesso direto às estruturas privadas de outros módulos.
  44. ( ) É proibido transmitir dados pela rede.

  45. ( ) Todos os dados devem ser trafegados em formato de texto bruto desformatado.

  46. A documentação técnica referente a Gerenciamento de Estado Global com Pinia 🚀 deve conter:

  47. (x) Requisitos, diagramas de fluxo, exemplos de uso e instruções de teste.
  48. ( ) Apenas o nome do autor do código.
  49. ( ) Lista de reprodução de músicas recomendadas.
  50. ( ) Histórico completo de conversas do suporte.

🧠 Quiz 19 – Diretivas Customizadas e Render Functions 🚀

  1. Qual o propósito principal de Diretivas Customizadas e Render Functions 🚀?
  2. ( ) Reduzir o espaço em disco sem validação.
  3. (x) Garantir estruturação, eficiência e robustez no processamento do sistema.
  4. ( ) Desativar os testes unitários automatizados.

  5. ( ) Substituir a documentação técnica por código legado.

  6. Qual benefício direto é obtido ao aplicar os padrões de Diretivas Customizadas e Render Functions 🚀?

  7. (x) Maior manutenibilidade, legibilidade e desempenho.
  8. ( ) Aumento no tempo de resposta das chamadas à API.
  9. ( ) Incompatibilidade com compiladores modernos.

  10. ( ) Bloqueio da execução assíncrona.

  11. Em relação à arquitetura de Diretivas Customizadas e Render Functions 🚀, assinale a alternativa correta:

  12. ( ) O módulo opera de forma totalmente isolada sem interface de dados.
  13. (x) O fluxo de dados segue validação de entrada, processamento e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de apresentação.

  15. ( ) Não há suporte para testes de integração.

  16. Qual a melhor prática ao implementar Diretivas Customizadas e Render Functions 🚀?

  17. (x) Manter o código coeso, desacoplado e devidamente documentado.
  18. ( ) Utilizar variáveis globais sem controle de acesso.
  19. ( ) Omitir o tratamento de erros em produção.

  20. ( ) Desabilitar a checagem de tipos estáticos.

  21. Como verificar se a implementação de Diretivas Customizadas e Render Functions 🚀 atingiu os objetivos de qualidade?

  22. ( ) Observando o tamanho do arquivo fonte em bytes.
  23. (x) Executando testes automatizados de cobertura e benchmarks de desempenho.
  24. ( ) Verificando a cor do tema do editor de código.

  25. ( ) Aguardando reclamações dos usuários finais em produção.

  26. Ao lidar com exceções em Diretivas Customizadas e Render Functions 🚀, deve-se:

  27. (x) Capturar falhas específicas e fornecer mensagens informativas com rastreamento.
  28. ( ) Ignorar todos os erros com blocos vazios try-catch.
  29. ( ) Encerrar o sistema imediatamente sem log.

  30. ( ) Modificar o sistema operacional hospedeiro.

  31. Qual o impacto do mau uso dos conceitos de Diretivas Customizadas e Render Functions 🚀?

  32. (x) Degradação de desempenho, vulnerabilidades de segurança e débito técnico.
  33. ( ) Redução automática no uso de memória RAM.
  34. ( ) Melhoria na taxa de transferência de dados da rede.

  35. ( ) Formatação automática de arquivos Markdown.

  36. O princípio da responsabilidade única aplicado a Diretivas Customizadas e Render Functions 🚀 determina que:

  37. (x) Cada classe ou função deve ter apenas uma razão para mudar.
  38. ( ) Todas as funções do sistema devem residir no mesmo arquivo.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os comentários de código devem ser removidos antes da compilação.

  41. Na integração de Diretivas Customizadas e Render Functions 🚀 com outros componentes do ecossistema:

  42. (x) Deve-se utilizar interfaces bem definidas e contratos claros (APIs/DTOs).
  43. ( ) Deve-se utilizar acesso direto às estruturas privadas de outros módulos.
  44. ( ) É proibido transmitir dados pela rede.

  45. ( ) Todos os dados devem ser trafegados em formato de texto bruto desformatado.

  46. A documentação técnica referente a Diretivas Customizadas e Render Functions 🚀 deve conter:

  47. (x) Requisitos, diagramas de fluxo, exemplos de uso e instruções de teste.
  48. ( ) Apenas o nome do autor do código.
  49. ( ) Lista de reprodução de músicas recomendadas.
  50. ( ) Histórico completo de conversas do suporte.

🧠 Quiz 20 – Projeto Capstone: Aplicação Vue 3 Autônoma Reativa 🚀

  1. Qual o propósito principal de Projeto Capstone: Aplicação Vue 3 Autônoma Reativa 🚀?
  2. ( ) Reduzir o espaço em disco sem validação.
  3. (x) Garantir estruturação, eficiência e robustez no processamento do sistema.
  4. ( ) Desativar os testes unitários automatizados.

  5. ( ) Substituir a documentação técnica por código legado.

  6. Qual benefício direto é obtido ao aplicar os padrões de Projeto Capstone: Aplicação Vue 3 Autônoma Reativa 🚀?

  7. (x) Maior manutenibilidade, legibilidade e desempenho.
  8. ( ) Aumento no tempo de resposta das chamadas à API.
  9. ( ) Incompatibilidade com compiladores modernos.

  10. ( ) Bloqueio da execução assíncrona.

  11. Em relação à arquitetura de Projeto Capstone: Aplicação Vue 3 Autônoma Reativa 🚀, assinale a alternativa correta:

  12. ( ) O módulo opera de forma totalmente isolada sem interface de dados.
  13. (x) O fluxo de dados segue validação de entrada, processamento e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de apresentação.

  15. ( ) Não há suporte para testes de integração.

  16. Qual a melhor prática ao implementar Projeto Capstone: Aplicação Vue 3 Autônoma Reativa 🚀?

  17. (x) Manter o código coeso, desacoplado e devidamente documentado.
  18. ( ) Utilizar variáveis globais sem controle de acesso.
  19. ( ) Omitir o tratamento de erros em produção.

  20. ( ) Desabilitar a checagem de tipos estáticos.

  21. Como verificar se a implementação de Projeto Capstone: Aplicação Vue 3 Autônoma Reativa 🚀 atingiu os objetivos de qualidade?

  22. ( ) Observando o tamanho do arquivo fonte em bytes.
  23. (x) Executando testes automatizados de cobertura e benchmarks de desempenho.
  24. ( ) Verificando a cor do tema do editor de código.

  25. ( ) Aguardando reclamações dos usuários finais em produção.

  26. Ao lidar com exceções em Projeto Capstone: Aplicação Vue 3 Autônoma Reativa 🚀, deve-se:

  27. (x) Capturar falhas específicas e fornecer mensagens informativas com rastreamento.
  28. ( ) Ignorar todos os erros com blocos vazios try-catch.
  29. ( ) Encerrar o sistema imediatamente sem log.

  30. ( ) Modificar o sistema operacional hospedeiro.

  31. Qual o impacto do mau uso dos conceitos de Projeto Capstone: Aplicação Vue 3 Autônoma Reativa 🚀?

  32. (x) Degradação de desempenho, vulnerabilidades de segurança e débito técnico.
  33. ( ) Redução automática no uso de memória RAM.
  34. ( ) Melhoria na taxa de transferência de dados da rede.

  35. ( ) Formatação automática de arquivos Markdown.

  36. O princípio da responsabilidade única aplicado a Projeto Capstone: Aplicação Vue 3 Autônoma Reativa 🚀 determina que:

  37. (x) Cada classe ou função deve ter apenas uma razão para mudar.
  38. ( ) Todas as funções do sistema devem residir no mesmo arquivo.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os comentários de código devem ser removidos antes da compilação.

  41. Na integração de Projeto Capstone: Aplicação Vue 3 Autônoma Reativa 🚀 com outros componentes do ecossistema:

  42. (x) Deve-se utilizar interfaces bem definidas e contratos claros (APIs/DTOs).
  43. ( ) Deve-se utilizar acesso direto às estruturas privadas de outros módulos.
  44. ( ) É proibido transmitir dados pela rede.

  45. ( ) Todos os dados devem ser trafegados em formato de texto bruto desformatado.

  46. A documentação técnica referente a Projeto Capstone: Aplicação Vue 3 Autônoma Reativa 🚀 deve conter:

  47. (x) Requisitos, diagramas de fluxo, exemplos de uso e instruções de teste.
  48. ( ) Apenas o nome do autor do código.
  49. ( ) Lista de reprodução de músicas recomendadas.
  50. ( ) Histórico completo de conversas do suporte.

Slides

Configuração

Ambientes de Desenvolvimento 🛠️

Guias para configurar seu computador para o desenvolvimento frontend moderno.

Setup 01 - Node.js e NPM 🟢

O Node.js é o motor que nos permite rodar ferramentas de desenvolvimento (como o Vite) e gerenciar bibliotecas em nossa máquina.

📥 Instalação

  1. Acesse o site oficial: nodejs.org.
  2. Baixe a versão LTS (Long Term Support). Ela é a mais estável e recomendada para produção.
  3. Siga o instalador padrão ("Next, Next, Finish").

🧪 Verificação

Abra seu terminal (CMD, PowerShell ou Terminal do Mac) e digite: 

node -v
npm -v
Se aparecerem as versões, a instalação foi um sucesso!

💡 Dica: NVM (Opcional)

Se você precisar gerenciar várias versões do Node no futuro, pesquise pelo NVM (Node Version Manager). Ele facilita a troca de versões sem precisar desinstalar nada.

Setup 02 - VS Code e Extensões Essenciais 💻

O Visual Studio Code é o editor de código mais popular do mundo, e com as extensões certas, ele se torna uma IDE super poderosa para Vue.

📥 Instalação do VS Code

Baixe em: code.visualstudio.com

🧩 Extensões Obrigatórias para Vue 3

Abra o menu de extensões (Ctrl + Shift + X) e instale:

  1. Vue - Official (antiga Volar): Suporte oficial para arquivos .vue, incluindo realce de sintaxe e autocompletar.
  2. ESLint: Ajuda a identificar erros de código enquanto você digita.
  3. Prettier - Code formatter: Formata seu código automaticamente ao salvar, deixando-o limpo.
  4. Auto Close Tag: Fecha as tags HTML/Vue automaticamente.

🛠️ Configuração Recomendada

Vá em Configurações -> Editor: Format On Save e deixe marcado como ativado. Isso garantirá que o Prettier formate seu código toda vez que você salvar o arquivo.

Setup 03 - Browser e Vue DevTools 🕵️

Para desenvolver frontend, o navegador não é apenas onde vemos o site, mas também nossa principal ferramenta de depuração.

🌐 Navegador Recomendado

  • Google Chrome ou Microsoft Edge possuem as ferramentas de desenvolvedor mais robustas para o ecossistema Vue.

🛠️ Instalando Vue DevTools

O Vue DevTools permite "enxergar" as variáveis reativas, o estado do Pinia e a árvore de componentes.

  1. Acesse a loja de extensões (Chrome Web Store).
  2. Procure por Vue.js devtools e clique em "Usar no Chrome".
  3. Após instalar, reinicie o navegador.

🚀 Como Usar

No seu projeto Vue rodando: 1. Clique com o botão direito na página e selecione Inspecionar. 2. Procure a aba Vue no menu superior do console. 3. Agora você pode ver todas as suas refs e reactive em tempo real!

Setup 04 - Vite e Scaffolding ⚡

O Vite é a ferramenta que prepara todo o nosso ambiente de desenvolvimento, compila o código e permite que vejamos as mudanças no navegador instantaneamente.

🚀 Criando o Projeto

Abra o terminal na pasta onde deseja salvar seus estudos e digite:

npm create vite@latest

Siga os passos: 1. Project name: dê um nome (ex: meu-app-vue) 2. Select a framework: escolha Vue 3. Select a variant: escolha JavaScript (ou TypeScript, se preferir o desafio)

📦 Iniciando os trabalhos

Entre na pasta criada e instale as dependências:

cd meu-app-vue
npm install
npm run dev

Agora, acesse a URL que aparecerá no terminal (geralmente http://localhost:5173) e veja sua aplicação Vue rodando com performance de ponta!

Setup 05 - Git e GitHub Essentials 🐙

O controle de versão é obrigatório em qualquer projeto profissional. Através dele, você salva o histórico do seu código e compartilha com o mundo.

📥 Instalando o Git

  • Baixe em: git-scm.com
  • Durante a instalação, pode manter as opções padrão.

🔑 Configuração Inicial

Execute os comandos abaixo substituindo pelo seu nome e e-mail: 

git config --global user.name "Seu Nome"
git config --global user.email "seuemail@exemplo.com"

🚀 Fluxo de Trabalho Básico

  1. git init: Inicia o repositório.
  2. git add .: Prepara todos os arquivos para salvar.
  3. git commit -m "Mensagem": Salva o estado atual.
  4. git push: Envia para o servidor (GitHub).

Dica: Não esqueça de criar o arquivo .gitignore para não enviar a pasta node_modules para o GitHub! O Vite já cria um para você por padrão.

Setup 06 - Terminal Essentials ⌨️

O terminal (ou CLI) é a nossa principal interface com as ferramentas de build e automação no mundo frontend.

🏁 Terminais Recomendados

  • Windows: Windows Terminal (PowerShell 7) ou Git Bash.
  • Mac/Linux: iTerm2 ou o Terminal nativo com Zsh (Oh My Zsh).

🚀 Comandos de Sobrevivência

Aprenda estes comandos básicos para navegar livremente: - cd [pasta]: Entra em uma pasta. - cd ..: Volta uma pasta. - ls ou dir: Lista os arquivos da pasta atual. - mkdir [nome]: Cria uma nova pasta. - clear ou cls: Limpa a tela do terminal.

💡 Atalho do VS Code

Você não precisa sair do editor para usar o terminal! Use o atalho Ctrl + ` (crase) para abrir o terminal integrado diretamente no seu código.

Setup 07 - Tailwind CSS IntelliSense 🎨

Se você optar por usar o Tailwind CSS para estilizar seus aplicativos Vue, esta extensão no VS Code é indispensável.

🧩 Por que usar?

  • Autocompletar: Ela sugere todas as classes do Tailwind enquanto você digita no HTML.
  • Preview de cor: Mostra um quadradinho com a cor real ao lado do nome da classe (ex: bg-blue-500).
  • Dicas de sintaxe: Avisa se você estiver usando classes que conflitam entre si.

📥 Instalação

Procure por Tailwind CSS IntelliSense na loja de extensões do seu VS Code.

🛠️ Requisito do Projeto

Para que a extensão funcione, seu projeto precisa ter um arquivo de configuração do Tailwind (gerado via npx tailwindcss init -p). Sem esse arquivo na raiz, a extensão não saberá quais classes sugerir.

Setup 08 - Testando APIs (Postman/Insomnia) 📡

Antes de escrever o código Vue para consumir uma API, é uma boa prática testar se essa API está funcionando e o que ela retorna.

🛠️ Ferramentas

  • Postman: A mais completa e tradicional.
  • Insomnia: Mais leve, limpa e focada em UX.
  • Thunder Client: Uma extensão direta dentro do VS Code (fácil e rápida).

🚀 Como Testar

  1. Coloque a URL da API (ex: https://jsonplaceholder.typicode.com/users).
  2. Selecione o método (GET, POST, etc).
  3. Clique em Send.
  4. Veja o formato do JSON que o servidor responde. Isso ajuda muito na hora de tipar seus dados no Vue!

💡 Dica

Sempre teste suas rotas de POST (Criação) e DELETE nestas ferramentas antes de tentar debugar no código frontend.

Setup 09 - Deploy: Colocando no Ar 🚢

Não guarde seu código apenas no seu computador! Coloque seu projeto no ar para que o mundo (e recrutadores) possa ver.

🌐 Plataformas Recomendadas

As plataformas Vercel e Netlify são especialistas em hospedar aplicações Vue com processo de deploy automático.

🚀 Passo a Passo (Vercel/Netlify)

  1. Crie uma conta gratuita usando seu GitHub.
  2. Clique em Add New Project.
  3. Selecione o repositório do seu projeto Vue.
  4. Clique em Deploy.

🔄 Deploy Contínuo (CI/CD)

O melhor dessas ferramentas é que, de agora em diante, toda vez que você fizer um git push para o GitHub, o seu site será atualizado automaticamente no ar em poucos segundos!

🧪 Domínio Personalizado

Ambas oferecem um link gratuito no formato meu-app.vercel.app. Caso queira, futuramente você pode comprar um domínio .com.br e vincular nestas mesmas ferramentas.

Sobre

Sobre o Curso

🎓 Desenvolvimento Frontend com Vue.js 3

Este curso foi projetado para capacitar desenvolvedores na criação de aplicações web modernas do tipo SPA (Single Page Application), focando na reatividade, componentização e escalabilidade oferecidas pelo ecossistema Vue.js.

🎯 Objetivos do Curso

  • Framework Progressivo --- Compreender a filosofia do Vue.js e como ele se integra a sistemas existentes ou serve de base para SPAs robustas.

  • Componentização Extrema --- Dominar a criação de interfaces modulares, reutilizáveis e fáceis de manter utilizando Single File Components (SFC).

  • Reatividade & Estado --- Implementar sistemas reativos eficientes com Composition API e gerenciamento de estado global com Pinia.

  • Integração & Deploy --- Consumir APIs RESTful com Axios, gerenciar rotas complexas com Vue Router e realizar builds otimizados para produção.

📚 Módulos de Aprendizado

Módulo 1 – Fundamentos do Frontend Moderno

  • Evolução do Frontend e Conceito de SPA
  • Setup de Ambiente com Vite e Node.js
  • Sintaxe Declarativa e Data Binding (v-bind, v-model)
  • Diretivas e Renderização Condicional

Módulo 2 – Componentização e Arquitetura

  • Criação e Registro de Componentes
  • Comunicação via Props e Emitters (emit)
  • Ciclo de Vida do Componente (Lifecycle Hooks)
  • Organização de Projetos e Boas Práticas

Módulo 3 – Roteamento e Estado Global

  • Configuração do Vue Router e Rotas Dinâmicas
  • Consumo de APIs REST com Axios
  • Gerenciamento de Estado Global com Pinia
  • Integração de Dados em Tempo Real

Módulo 4 – Profissionalização e Ecossistema

  • Estilização com Scoped CSS e introdução ao Tailwind
  • Arquitetura de Camadas (Services, Stores, Views)
  • Otimização de Build e Variáveis de Ambiente
  • Deploy Contínuo em Vercel ou Netlify

🛠️ Metodologia

Foco 100% prático e orientado a projetos (Learning by Doing). Ao longo das 16 aulas, você desenvolverá desde pequenos componentes até um sistema de tarefas estilo Kanban integrado a uma API, consolidando seu portfólio como desenvolvedor frontend.

Pronto para criar interfaces incríveis? Começar Agora

Roadmap do Projeto: Vue.js 3 🚀

Este documento rastreia a evolução do curso e o status de implementação de cada fase.

🕒 Fase 1: Planejamento & Setup

  • Definição Syllabus (16 Aulas de Vue.js)
  • Configuração mkdocs.yml e Metadados
  • Reformulação de Páginas Globais (Sobre, Plano, Materiais, Roadmap)

✅ Fase 2: Conteúdo Pedagógico

  • Implementação das 16 Aulas (Padrão Mermaid/Termynal)
  • Criação dos 16 Conjuntos de Exercícios (5 itens/aula)
  • Criação dos 16 Quizzes Interativos (10 questões/aula)
  • Desenvolvimento dos 16 Mini-projetos

✅ Fase 3: Recursos Visuais & Slides

  • Geração de 16 Slides Reveal.js (Padrão Vue.js)
  • Padronização de Admonitions e Content Tabs
  • Validação Visual e UX no Material Theme

✅ Fase 4: Entrega & Deploy

  • Build Final mkdocs build
  • Configuração de Deployment automático (GitHub Actions)
  • Verificação final de links e integridade

Status Atual: Concluído (Refatoração) Última Atualização: 22/02/2026

Materiais Complementares 📚

Bem-vindo à seção de materiais complementares do curso de Desenvolvimento Frontend com Vue.js. Aqui você encontra recursos adicionais para apoiar seus estudos e aprofundar seu conhecimento técnico.

  • Slides

    • Acompanhe o conteúdo teórico com slides dinâmicos em Reveal.js.

  • Exercícios

    • Pratique a reatividade, componentização e consumo de APIs.

  • Quizzes

    • Valide seu aprendizado com 10 questões rápidas por aula.

  • Projetos

    • Construa um ecossistema frontend completo para seu portfólio.

  • Ambiente

    • Guias de instalação (Node.js, Vite, Vue DevTools).

🏷️ Índice de Tags Didáticas

Navegue pelas aulas, exercícios e projetos do curso organizados por temas, tecnologias e conceitos fundamentais:

tags.md:145-167/name

Versão para Impressão

Esta página foi gerada automaticamente para impressão.