🚀 Capítulo 01: O Despertar do Vue
🎯 Objetivo da Aula
Ao final desta aula, você entenderá o que é o Vue.js, por que ele é chamado de framework progressivo, e terá criado o seu primeiro projeto usando a ferramenta moderna Vite.
🏢 O Cenário Prático (Seu Desafio)
Você acaba de ser recrutado pela Aliança Rebelde! O antigo sistema de comunicação do império é lento e pesado. Seu desafio é usar o Vue.js para criar uma interface ultra-rápida e amigável que ajude os rebeldes a se comunicarem pela galáxia.
🧠 Fundamentos: A Teoria Traduzida
O Vue.js é um framework JavaScript para criar interfaces de usuário. Ele é conhecido por ser muito fácil de aprender e por ser “progressivo”, o que significa que você pode usar só um pouquinho dele ou criar um sistema gigante!
Por que usar o Vue?
- Curva de Aprendizado Suave: É muito parecido com o HTML e CSS que você já conhece.
- Reatividade: Quando você muda um dado no JavaScript, a tela atualiza sozinha na mesma hora!
- SFC (Single File Components): Você escreve o HTML, o CSS e o JS tudo no mesmo arquivo
.vue. Muito organizado!
📖 Exemplo Guiado: Criando o Projeto com Vite
O Vite também é a ferramenta recomendada pelo time do Vue para criar projetos.
🛠️ Passo a Passo
- Abra o terminal na pasta onde quer guardar o projeto.
- Digite o comando:
npx create-vite@latest alianca-vue --template vue - O Vite criará uma pasta chamada
alianca-vue. - Entre na pasta e instale as dependências:
cd alianca-vue npm install - Rode o projeto:
npm run dev - Abra o link que aparecer no terminal (geralmente
http://localhost:5173).
🛠️ Prática Obrigatória 1
Abra o arquivo src/App.vue do seu novo projeto, apague o conteúdo e coloque um título <h1> escrito: “Base Rebelde com Vue”.
🛠️ Prática Obrigatória 2
Adicione um parágrafo abaixo do título dizendo: “Que a Força esteja com você!“.
🔑 Gabarito de Código/Fórmulas
Prática 1 e 2:
No arquivo src/App.vue:
<template>
<div>
<h1>Base Rebelde com Vue</h1>
<p>Que a Força esteja com você!</p>
</div>
</template>
<script setup>
// Aqui ficaria a lógica
</script>
<style scoped>
/* Aqui ficaria o CSS */
</style>