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

Aula 02 - Svelte e Vite ⚡

O Setup Profissional

Agenda de Hoje 📅

  1. O que é o Vite?
  2. ES Modules e Performance
  3. Anatomia de um projeto Svelte
  4. O arquivo package.json
  5. Ponto de entrada: main.js
  6. Criando nosso primeiro componente

1. Por que o Vite? 🏎️

  • Criado por Evan You (o pai do Vue.js).
  • Substituiu o antigo Rollup e Webpack.
  • Revolucionou o tempo de inicialização do servidor.

2. O segredo da velocidade: ESM 💨

  • O Vite não faz o "bundle" completo em desenvolvimento.
  • Ele usa ES Modules nativos do navegador.
  • Carrega apenas os arquivos que você está editando.

3. Criando o Projeto 🏗️

npm create vite@latest
  • Escolha um nome para a pasta.
  • Selecione o framework: Svelte.
  • Selecione a variante: JavaScript (ou TypeScript).

4. O Coração: package.json 📦

  • dependencies: O que o site precisa para rodar (Svelte).
  • devDependencies: Ferramentas de auxílio (Vite).
  • scripts: Comandos de atalho (dev, build, preview).

5. Estrutura de Pastas 📂

5.1 A Raiz do Projeto

  • index.html: O único arquivo HTML real.
  • vite.config.js: Onde configuramos plugins.
  • node_modules/: Onde ficam guardadas as ferramentas.

5.2 A pasta src/

src/
├── assets/      # Imagens e Estilos globais
├── lib/         # Nossos componentes reutilizáveis
├── App.svelte   # O componente raiz (Root)
└── main.js      # Onde o Svelte é montado no HTML

6. Como o Svelte é montado? 🏗️

No index.html:

<div id="app"></div>
<script type="module" src="/src/main.js"></script>

No main.js:

import App from './App.svelte'

const app = new App({
  target: document.getElementById('app'),
})

export default app

7. O Componente App.svelte 🧩

  • É o primeiro componente que o usuário vê.
  • Ele organiza todos os outros componentes do site.

8. Hot Module Replacement (HMR) 🔥

  • Edite o código e salve.
  • A tela atualiza instantaneamente sem perder o estado.
  • Produtividade máxima!

9. Prática Sugerida: O Cartão de Perfil 👤

  • Vamos alterar o App.svelte.
  • Adicionar um título, uma imagem e um parágrafo.
  • Estilizar o cartão no bloco <style>.

10. Dicas de Ferramental 🛠️

  • Use a extensão Svelte for VS Code.
  • Ative o tema de ícones para identificar arquivos .svelte.
  • Use o console do navegador para debugar.

Resumo da Aula ✅

  • Vite = Velocidade extrema.
  • main.js = A ponte entre HTML e Svelte.
  • src/ = Onde escrevemos código.

Próxima Aula: Estrutura e Sintaxe 📝

  • Tags HTML.
  • Variáveis dinâmicas.
  • Estilização de componentes.

Dúvidas? 🤔

"A melhor maneira de aprender a programar é programando."