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

Explore a pasta src/components e identifique o componente HelloWorld.vue.
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!