Pular para conteúdo

Aula 01 – Introdução ao Frontend Moderno 🚀

Seja bem-vindo à primeira aula do curso de Desenvolvimento Frontend com Vue.js! Hoje vamos entender o que torna o frontend moderno tão poderoso e por que o Vue.js é uma das melhores escolhas para desenvolvedores hoje.

🧠 Conceitos Fundamentais

A Evolução do Frontend

Antigamente, a web era composta por páginas estáticas (HTML) enviadas pelo servidor. Hoje, trabalhamos com aplicações dinâmicas que rodam quase inteiramente no navegador do usuário.

Era Característica Tecnologia
Página Estática Documentos simples HTML/CSS
Web 2.0 Interatividade básica jQuery/AJAX
Modern Web Componentização e Reatividade Vue/React/Angular

SPA vs MPA

É crucial entender a diferença entre Single Page Application (SPA) e Multi Page Application (MPA).

graph TD
    A[Usuário clica em link] --> B{Tipo de App}
    B -- MPA --> C[Servidor recarrega página inteira]
    B -- SPA --> D[JavaScript atualiza apenas o conteúdo necessário]
    C --> E[Interface "pisca" e demora]
    D --> F[Experiência fluida e instantânea]

[!NOTE] No Vue.js, focamos na construção de SPAs, onde o roteamento e a renderização acontecem no lado do cliente (Client-side Rendering).

📦 O que é Vue.js?

O Vue é um framework progressivo. Isso significa que você pode usá-lo apenas para uma pequena parte do seu site ou para construir uma aplicação inteira do zero.

Pilares do Vue 3:

  1. Reatividade: Os dados e a interface estão sempre sincronizados.
  2. Componentização: A interface é dividida em pequenas peças reutilizáveis.
  3. Fácil Aprendizado: Curva de aprendizado suave comparada a outros frameworks.

💻 Setup do Ambiente

Para começar, precisamos preparar nossa máquina.

# 1. Verifique se o Node.js está instalado
$ node -v
v20.x.x

# 2. Crie seu primeiro projeto usando Vite
$ npm create vite@latest meu-projeto-vue -- --template vue

# 3. Entre na pasta e instale as dependências
$ cd meu-projeto-vue
$ npm install

# 4. Inicie o servidor de desenvolvimento
$ npm run dev

[!IMPORTANT] Certifique-se de ter o Node.js (LTS) instalado em sua máquina antes de prosseguir.

📝 Exercício de Fixação

  1. Explique com suas palavras a principal vantagem de uma SPA sobre uma MPA.
  2. Instale o Node.js em sua máquina e execute os comandos acima para criar seu primeiro projeto "Hello World" com Vite.

🚀 Dica: No próximo encontro, vamos explorar a fundo a estrutura de pastas desse projeto que acabamos de criar!