Pular para conteúdo
🖥️ Abrir Apresentação Interativa em Tela Cheia

Estrutura do Projeto Vue 3 🏗️

Aula 02 - Criando e Navegando na Estrutura

🚀 Iniciando com Vite

  • Por que Vite? (Rápido, Moderno, Leve)
  • O comando mágico: npm create vite@latest
  • Escolhendo o Template Vue

📁 Estrutura de Pastas Padrão

  • node_modules/: Bibliotecas externas
  • public/: Arquivos estáticos puros
  • src/: Nosso código fonte (Onde a mágica acontece!)
  • package.json: Configurações e scripts

🔍 Dentro da pasta src/

  • assets/: Estilos, imagens e fontes
  • components/: Peças reutilizáveis da UI
  • App.vue: O componente raiz (Root)
  • main.js: Ponto de entrada da aplicação

📍 Ponto de Entrada: main.js

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

const app = createApp(App)
app.mount('#app')
- Cria a instância da aplicação - Conecta o Vue ao HTML (#app)

🐚 O esqueleto: index.html

  • Arquivo simples na raiz do projeto
  • Contém a <div id="app"></div>
  • O Vite injeta o main.js automaticamente

🧩 Single File Components (SFC)

  • Arquivos com extensão .vue
  • Reunimos 3 tecnologias em um só lugar:
  • Script: Lógica (JS)
  • Template: Estrutura (HTML)
  • Style: Estilo (CSS)

📝 A tag <script setup>

  • A forma mais moderna de usar Vue 3
  • Reduz o código repetitivo
  • Variáveis declaradas aqui são exportadas automaticamente para o template

🖼️ A tag <template>

  • Define o que será visto na tela
  • Suporta sintaxe especial do Vue (diretivas)
  • Deve conter a estrutura HTML do componente

🎨 A tag <style>

  • Estilos CSS para o componente
  • Atributo scoped: Impede que o CSS afete outros componentes
  • Suporte a pré-processadores (Sass, Less)

📦 Gerenciando Dependências

  • npm install: Instala tudo do package.json
  • npm install nome-da-lib: Adiciona nova biblioteca
  • Cuidado com o tamanho da node_modules!

🔄 O Ciclo de Build

graph LR
    A[Código .vue] --> B[Vite Compiler]
    B --> C[JS/CSS Nativo]
    C --> D[Browser]

⚡ Hot Module Replacement (HMR)

  • Você salva o código -> A tela atualiza na hora
  • Sem perder o estado da aplicação
  • Característica fundamental do Vite

🛠️ Configurações: vite.config.js

  • Definir apelidos de pastas (Aliases)
  • Adicionar plugins
  • Configurar o servidor de desenvolvimento

🕵️ Vue DevTools

  • Extensão para Chrome/Firefox
  • Essencial para depuração
  • Visualize o estado e a árvore de componentes em tempo real

📂 Organização sugerida (src/)

  • /components: Botões, Inputs, Cards
  • /views ou /pages: Telas da aplicação
  • /assets: CSS global e imagens
  • /router: Configuração de navegação

🚀 Rodando o Projeto

npm run dev
- Acesse localhost:5173 - Acompanhe os logs no terminal

⚠️ .gitignore

  • O que NÃO deve ir para o GitHub?
  • node_modules (gigante)
  • .env (credenciais)
  • dist (arquivos de build)

🏗️ Desafio da Aula

  • Criar o projeto via Vite
  • Limpar o App.vue
  • Criar uma estrutura simples com Header e Main

🏁 Resumo

  • Vite é a ferramenta, Vue é o framework
  • SFC unifica HTML/JS/CSS
  • src/ é o centro do desenvolvimento

🏁 Dúvidas?

Bom desenvolvimento! Próxima aula: Reatividade e Data Binding.