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.