🧩 Exercícios Práticos: Ecossistema Vue 3, Vite e Single File Components

Spec Frontend Com Vue • Trilha Progressiva em 4 Níveis

🎯 Nível 1: Fundamentos

Problema 01.1 — Componente SFC Básico com

Contexto: Componente SFC Básico com

Requisitos de Execução:

  1. Criar componente CardSaudacao.vue exibindo título e mensagem formatada com reatividade básica.

Resultado Esperado

Componente Vue 3 renderizado com Composition API e tipagem TypeScript.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_01_1_SeuNome
  2. Envie na tarefa: Atividade Cap 01 - Ecossistema Vue 3, Vite e Single File Components
🔑 Gabarito de Código & Solução Comentada 
<!-- CardSaudacao.vue -->
<script setup lang="ts">
import { ref } from 'vue';

const mensagem = ref<string>('Bem-vindo ao Vue 3!');
const versao = ref<string>('3.4.0');
</script>

<template>
  <div class="card-box">
    <h2>{{ mensagem }}</h2>
    <p>Vue Versão: {{ versao }}</p>
  </div>
</template>

🔍 Nível 2: Prática

Problema 01.2 — Declaração de Métodos e Handlers de Eventos

Contexto: Declaração de Métodos e Handlers de Eventos no contexto de Ecossistema Vue 3, Vite e Single File Components.

Requisitos de Execução:

  1. Criar contador com botão de incremento e reset utilizando <script setup>.

Resultado Esperado

Contador reativo atualizado no clique do botão.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_01_2_SeuNome
  2. Envie na tarefa: Atividade Cap 01 - Ecossistema Vue 3, Vite e Single File Components
🔑 Gabarito de Código & Solução Comentada 
<!-- ContadorVue.vue -->
<script setup lang="ts">
import { ref } from 'vue';

const contagem = ref<number>(0);
const incrementar = () => { contagem.value += 1; };
const resetar = () => { contagem.value = 0; };
</script>

<template>
  <div>
    <p>Total: {{ contagem }}</p>
    <button @click="incrementar">+1</button>
    <button @click="resetar">Reset</button>
  </div>
</template>

⚡ Nível 3: Integração

Problema 01.3 — Configuração de Ambiente Vite e Plugins Oficiais

Contexto: Configuração de Ambiente Vite e Plugins Oficiais no contexto de Ecossistema Vue 3, Vite e Single File Components.

Requisitos de Execução:

  1. Configurar vite.config.ts com @vitejs/plugin-vue e aliases de importação @/.

Resultado Esperado

Vite configurado para compilação instantânea de SFCs Vue 3.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_01_3_SeuNome
  2. Envie na tarefa: Atividade Cap 01 - Ecossistema Vue 3, Vite e Single File Components
🔑 Gabarito de Código & Solução Comentada 
// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: { '@': path.resolve(__dirname, './src') },
  },
});

🏆 Nível 4: Desafio Corporativo

Problema 01.4 — Otimização de Build com Unplugin Auto Import para Vue APIs

Contexto: Otimização de Build com Unplugin Auto Import para Vue APIs no contexto de Ecossistema Vue 3, Vite e Single File Components.

Requisitos de Execução:

  1. Configurar auto-import de ref, computed e watch sem necessidade de imports manuais repetitivos.

Resultado Esperado

Auto-import configurado acelerando o desenvolvimento corporativo.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_01_4_SeuNome
  2. Envie na tarefa: Atividade Cap 01 - Ecossistema Vue 3, Vite e Single File Components
🔑 Gabarito de Código & Solução Comentada 
// auto-import.config.ts
import AutoImport from 'unplugin-auto-import/vite';

export const autoImportPlugin = AutoImport({
  imports: ['vue', 'vue-router', 'pinia'],
  dts: 'src/auto-imports.d.ts',
});