Vue.js: Setup & Hello World

Última atualização: 2026-08-26

Configurar um ambiente de desenvolvimento do Vue 3 leva apenas quatro etapas: instalar o Node.js, usar a ferramenta de estruturação create-vue, iniciar o Vite e abrir o navegador. Esta aula irá guiá-lo desde o início para que você possa ter o Vue pronto e funcionando em cinco minutos.

Para desenvolver um aplicativo Vue, são necessários três elementos: Node.js (ambiente de execução) + gerenciador de pacotes (npm/pnpm) + editor de código (recomenda-se o VS Code). Depois de instalar os três, o restante é feito pela linha de comando.

1. O que você vai aprender

• O que é o Node.js e por que ele é necessário para o desenvolvimento front-end?
• Diferenças entre os gerenciadores de pacotes npm, pnpm e yarn e como escolher entre eles
• Como usar a ferramenta oficial de andaimes create-vue e suas opções
• Como funciona o servidor de desenvolvimento do Vite e suas vantagens em termos de velocidade
• Configurando o VS Code e a extensão Volar (essencial para o Vue 3)
• O processo padrão para colocar o “Hello World” em funcionamento em 5 minutos

2. Configurando um ambiente de desenvolvimento para um novo funcionário

(1) Desafio: Cinco ferramentas — levei o dia inteiro para instalá-las

Alice acabou de ingressar em uma equipe de Vue 3 como desenvolvedora sênior de front-end. No primeiro dia, ela passou 4 horas configurando seu ambiente de desenvolvimento:

• Node.js: A empresa exige a versão 20.x, mas ela instalou a 22.x → O projeto exibiu a mensagem de erro “motor incompatível”
• Gerenciador de pacotes: A equipe usa o pnpm, mas ela só tem o npm no computador → O código do colega dela não vai funcionar
• VS Code: Extensão Volar não instalada → .vue Todos os arquivos aparecem sublinhados em vermelho
• Vue DevTools: Extensão do navegador não instalada → Árvore de componentes não visível durante a depuração
• Configuração do Git: Nome de usuário e endereço de e-mail não definidos → aparece “desconhecido” nos registros de commit

O líder da equipe, Charlie, suspirou:

“Alice, é por isso que temos o documento setup.md. Cada novo funcionário leva um dia para configurar seu ambiente. Precisamos de uma configuração que seja feita com um único comando.”

(2) Solução oficial do Vue 3: 4 etapas, 5 minutos

# 1. Installation Node.js 20.x LTS(Recommended for use with nvm Multi-Version Management)
# Mac/Linux: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
# Windows: Download nvm-windows,https://github.com/coreybutler/nvm-windows

# 2. Install pnpm (2x faster than npm, Save Disk Space 50%)
npm install -g pnpm

# 3. Use create-vue Create a Project(Vue 3 Official Scaffolding)
pnpm create vue my-app
# Interaction Options:TypeScript? Yes / JSX? No / Router? Yes / Pinia? Yes / Vitest? No / E2E? No

# 4. Start the development server
cd my-app
pnpm install
pnpm dev
# → Open in a browser http://localhost:5173 See Vue Home Page

(3) Receita

Após a publicação do novo documento da equipe sobre “configuração em 5 minutos”, o tempo de integração caiu de 1 dia para 30 minutos:

• Tempo de configuração: 4 horas → 5 minutos (48 vezes mais rápido)
• Primeiro compromisso: Dia 2 → Manhã do Dia 1
• Primeiro PR incorporado: Semana 1 → Dia 3
• Satisfação dos novos contratados: 60% → 95% (fim da frustração com a configuração)

3. O que é o Node.js? Por que precisamos dele?

O Node.js é um ambiente de execução multiplataforma para JavaScript que permite que o JavaScript seja executado localmente, fora do navegador. Os desenvolvedores front-end precisam dele para executar ferramentas de compilação, como npm, Vite e Webpack.

(1) O papel do Node.js no desenvolvimento com Vue

graph LR
    subgraph Node.jsEcology
        N[Node.js 20+]
        P[npm/pnpm/yarn]
        V[Vite/Webpack]
        T[TypeScript Compiler]
    end
    
    subgraph Developer Workflow
        D[Developer]
        I[VS Code + Volar]
        B[Browser]
    end
    
    N --> P
    P --> V
    V --> T
    D --> I
    D --> B
    
    style N fill:#339933,color:#fff
    style P fill:#cb3837,color:#fff
    style V fill:#646cff,color:#fff

graph LR
    subgraph Node.jsEcology
        N[Node.js 20+]
        P[npm/pnpm/yarn]
        V[Vite/Webpack]
        T[TypeScript Compiler]
    end
    
    subgraph Developer Workflow
        D[Developer]
        I[VS Code + Volar]
        B[Browser]
    end
    
    N --> P
    P --> V
    V --> T
    D --> I
    D --> B
    
    style N fill:#339933,color:#fff
    style P fill:#cb3837,color:#fff
    style V fill:#646cff,color:#fff

(2) Escolhendo uma versão do Node.js

(3) Ferramenta recomendada: nvm (Node Version Manager)

O nvm permite instalar várias versões do Node.js em um único computador e alternar entre elas, dependendo do projeto.

# Installation nvm
# Mac/Linux:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# Windows:
# Download nvm-windows: https://github.com/coreybutler/nvm-windows

# Use nvm to install Node 20
nvm install 20
nvm use 20

# Verification
node --version  # v20.x.x
npm --version   # 10.x.x

4. Gerenciadores de pacotes: npm x pnpm x yarn

(1) Comparação dos três principais gerenciadores de pacotes

(2) Recomendado: pnpm

O pnpm é o padrão de fato em 2026, pelas seguintes razões:

• 2 a 3 vezes mais rápido: links físicos compartilhados + instalação paralela
• Economize 50% de espaço: Use links físicos para node_modules para evitar duplicação
• Dependências estritas: As dependências fantasmas (dependências de pacotes não declarados) estão desativadas por padrão.
• Compatível com monorepo: pnpm-workspace.yaml Configuração simples

# Installation pnpm
npm install -g pnpm

# Verification
pnpm --version  # 9.x.x

# Install project dependencies
pnpm install    # 2-3x faster than npm install

(3) Comparação dos comandos de instalação de três gerenciadores de pacotes

5. A ferramenta oficial de geração de estrutura do create-vue

O Vue 3 recomenda oficialmente o uso do create-vue para criar projetos (em substituição ao antigo vue-cli).

(1) Comandos para criar um projeto

# Use pnpm (Recommended)
pnpm create vue my-vue-app

# Use npm
npm create vue@latest my-vue-app

# Use yarn
yarn create vue my-vue-app

(2) Descrição das opções de interação

(3) Estrutura de diretórios após a criação

my-vue-app/
├── public/                  # Static Resources
│   └── favicon.ico
├── src/                     # Source Code
│   ├── assets/              # Image、Font
│   ├── components/          # Public Components
│   │   ├── HelloWorld.vue
│   │   ├── TheWelcome.vue
│   │   └── icons/
│   ├── router/              # Vue Router Layout
│   │   └── index.ts
│   ├── stores/              # Pinia stores
│   │   └── counter.ts
│   ├── views/               # Page Components
│   │   ├── HomeView.vue
│   │   └── AboutView.vue
│   ├── App.vue              # Root Component
│   └── main.ts              # Input File
├── index.html               # HTML Entrance
├── package.json             # Project Metadata
├── tsconfig.json            # TypeScript Layout
├── vite.config.ts           # Vite Layout
└── README.md

6. O que é o Vite? Por que ele é mais rápido que o Webpack?

O Vite (que significa “rápido” em francês) é uma ferramenta de compilação front-end de última geração lançada pela equipe do Vue 3, tendo como principal vantagem inicializações a frio extremamente rápidas.

(1) Comparação de velocidade entre Vite e Webpack

(2) Por que o Vite é tão rápido?

graph TB
    subgraph Traditional Tools Webpack
        W1[Bundle all modules at startup]
        W2[The browser received bundle.js]
        W3[Parse and execute the entire bundle]
    end
    
    subgraph New Tool Vite
        V1[Do not package at startup]
        V2[Direct browser request ESM Module]
        V3[Compile Individual Modules on Demand]
    end
    
    W1 --> W2 --> W3
    V1 --> V2 --> V3
    
    style W1 fill:#ff6b6b
    style V3 fill:#42b883,color:#fff

graph TB
    subgraph Traditional Tools Webpack
        W1[Bundle all modules at startup]
        W2[The browser received bundle.js]
        W3[Parse and execute the entire bundle]
    end
    
    subgraph New Tool Vite
        V1[Do not package at startup]
        V2[Direct browser request ESM Module]
        V3[Compile Individual Modules on Demand]
    end
    
    W1 --> W2 --> W3
    V1 --> V2 --> V3
    
    style W1 fill:#ff6b6b
    style V3 fill:#42b883,color:#fff

O segredo do Vite:

1. Use o ESM nativo no modo de desenvolvimento: o navegador carrega o JS diretamente <script type="module">, sem a necessidade de empacotamento
2. Compilação sob demanda: compilar apenas os módulos utilizados na página atual
3. Dependências de pré-compilação do esbuild: o esbuild, escrito em Go, é 100 vezes mais rápido que o Babel, que é escrito em JavaScript.
4. Utilização do Rollup em ambiente de produção: Manutenção da compatibilidade do ecossistema e otimização dos resultados da compilação

(3) Comandos comuns do Vite

# Start the development サーバー(Hotfix)
pnpm dev

# Production Build(Output to dist/ Table of Contents)
pnpm build

# Preview the production build locally
pnpm preview

# Type Checking(Vue 3 + TS)
pnpm type-check

7. Configuração do VS Code + Volar

(1) Extensões obrigatórias

(2) Configurações recomendadas para o VS Code

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  "eslint.validate": ["javascript", "typescript", "vue"],
  "typescript.tsdk": "node_modules/typescript/lib"
}

(3) 5 atalhos recomendados para o VS Code

8. Exemplo completo: como colocar o Vue 3 em funcionamento em 5 minutos

▶ Exemplo: Etapa 1 – Instalar o Node.js 20

# Mac/Linux Use nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install 20
nvm use 20

# Windows Use nvm-windows,Download:https://github.com/coreybutler/nvm-windows
# Open after installation PowerShell:
nvm install 20
nvm use 20

# Verification
node --version  # v20.x.x
npm --version   # 10.x.x

▶ Exemplo: Etapa 2 – Instalar o pnpm globalmente

npm install -g pnpm

# Verification
pnpm --version  # 9.x.x or higher

▶ Exemplo: Etapa 3 – Criação de um projeto Vue 3

# Navigate to the directory where you want to create the project.
cd ~/projects

# Create a Project(Interaction Mode)
pnpm create vue my-first-vue-app

# Follow the prompts:
# ✅ TypeScript? Yes
# ✅ JSX? No
# ✅ Vue Router? Yes
# ✅ Pinia? Yes
# ✅ Vitest? No
# ✅ E2E? No
# ✅ ESLint? Yes
# ✅ Prettier? Yes

▶ Exemplo: Etapa 4 – Iniciar e verificar

# Go to the project directory
cd my-first-vue-app

# Install Dependencies
pnpm install

# Start the development server
pnpm dev

# Terminal Output:
#   VITE v5.4.0  ready in 500 ms
#   ➜  Local:   http://localhost:5173/
#   ➜  press h + enter to show help

Abra seu navegador e acesse http://localhost:5173/. Você verá a página inicial padrão do Vue: Concluído com sucesso em 5 minutos ✅

▶ Exemplo: Etapa 5 – Modifique a primeira linha de código

Abra o arquivo src/components/HelloWorld.vue, localize a variável msg e altere-a para o seu próprio nome:

<script setup>
import { ref } from 'vue'

// Change it to your name
const msg = ref('Hello Alice! Welcome to Vue 3!')
</script>

Após salvar, o navegador será atualizado automaticamente, e você verá o novo conteúdo. Essas 5 linhas de código concluem sua primeira modificação no Vue.

▶ Exemplo: Fluxograma de 5 etapas para “Hello World”

sequenceDiagram
    participant D as Developer
    participant N as Node.js
    participant C as create-vue
    participant V as Vite
    participant B as Browser
    
    D->>N: 1. Installation Node 20
    N-->>D: v20.x.x
    D->>C: 2. pnpm create vue my-app
    C-->>D: Generate a Project Skeleton
    D->>N: 3. pnpm install
    N-->>D: Install Dependencies(30s)
    D->>V: 4. pnpm dev
    V-->>B: 5. http://localhost:5173
    B-->>D: Vue Home Page
    D->>D: Change 1, Run the code
    D->>B: Automatically refresh after saving

sequenceDiagram
    participant D as Developer
    participant N as Node.js
    participant C as create-vue
    participant V as Vite
    participant B as Browser
    
    D->>N: 1. Installation Node 20
    N-->>D: v20.x.x
    D->>C: 2. pnpm create vue my-app
    C-->>D: Generate a Project Skeleton
    D->>N: 3. pnpm install
    N-->>D: Install Dependencies(30s)
    D->>V: 4. pnpm dev
    V-->>B: 5. http://localhost:5173
    B-->>D: Vue Home Page
    D->>D: Change 1, Run the code
    D->>B: Automatically refresh after saving

▶ Exemplo: Lista de comandos para verificação do ambiente

# Check if the development environment is ready with a single click
node --version      # The output should be v18+ or v20+
npm --version       # The output should be 9+ or 10+
pnpm --version      # The output should be 8+ or 9+ (If not installed: npm i -g pnpm)
git --version       # The output should be 2.30+
code --version      # The output should be 1.80+(If not installed:https://code.visualstudio.com)

# View Global Packages
npm list -g --depth=0

❓ Perguntas Frequentes

P: Preciso usar o Node.js? Posso usar o Deno ou o Bun em vez disso? R: Você pode usar o Bun (que é três vezes mais rápido que o Node), e o Deno também funciona, mas o Bun oferece melhor compatibilidade com a cadeia de ferramentas do Vue. Para ambientes de produção, ainda recomendamos o Node.js LTS (pois ele possui o ecossistema mais estável). Este tutorial usa o Node 20, mas os usuários do Bun podem migrar para ele sem problemas.

P: Eu preciso usar o pnpm? Não posso simplesmente usar o npm? R: Sim, você pode. O npm já vem integrado ao Node.js e não requer instalação separada. A vantagem do pnpm é que ele é 2 a 3 vezes mais rápido e economiza espaço em disco, mas o npm 10+ também é suficiente. Este tutorial usa o pnpm para fins de demonstração, mas os comandos do npm são idênticos (npm install / npm run dev).

P: O que devo escolher, Vite ou Webpack? R: Use o Vite para todos os novos projetos (conforme recomendado pela equipe do Vue 3). O Webpack é reservado para a manutenção de projetos legados. O Vite é 30 vezes mais rápido na inicialização a frio e 60 vezes mais rápido para HMR, oferecendo uma experiência de desenvolvimento muito superior. Use o Rollup para compilações de produção a fim de garantir resultados de alta qualidade.

P: Qual é a diferença entre o create-vue e o create-vite? R: O create-vue é a ferramenta oficial de gerenciamento de projetos do Vue (para criar projetos Vue), enquanto o create-vite é a ferramenta oficial de gerenciamento de projetos do Vite (para criar qualquer projeto de front-end). Quando você usa o create-vue para um projeto Vue, ele configura automaticamente o ecossistema do Vue, incluindo o Vue Router, o Pinia e o Vitest.

P: Preciso usar TypeScript? Posso usar JavaScript puro? R: Sim, você pode. Se você selecionar “Não” no create-vue, ele gerará um projeto em JavaScript puro. O TypeScript é recomendado para projetos corporativos; a inferência de tipos pode reduzir os bugs em 50%. A Fase 4.6 deste tutorial aborda a integração do TypeScript em detalhes; você pode começar com JavaScript puro e aprender TypeScript mais tarde.

P: Depois de iniciar o Vite dev, por que não consigo ver a página ao acessar a porta 5173? R: Verifique estes três pontos: (1) O terminal exibe Local: http://localhost:5173/?; (2) O JavaScript está desativado no seu navegador? (3) Há algum outro processo usando a porta 5173? (Use lsof -i :5173 para verificar; no Mac, use sudo lsof -iTCP:5173 -sTCP:LISTEN).

P: Por que os arquivos .vue ainda apresentam erros após a instalação do Volar no VS Code? R: Você precisa (1) recarregar a janela Ctrl+Shift+P → “Reload Window”; (2) verificar se o diretório raiz do projeto contém tsconfig.json; (3) verificar se a extensão do Volar é “Vue - Official” (e não o antigo Vetur, que foi descontinuado).

📖 Resumo

• Você precisará de quatro ferramentas para desenvolver com o Vue 3: Node.js 20 ou superior, um gerenciador de pacotes (recomenda-se o pnpm), a ferramenta de geração de estrutura create-vue e o VS Code + Volar
• O Node.js 20.x LTS é a opção preferida para novos projetos em 2026
• O pnpm é 2 a 3 vezes mais rápido que o npm, ocupa 50% menos espaço em disco e é o padrão de fato para 2026
• O create-vue é a ferramenta oficial de geração de esqueletos do Vue 3, substituindo o antigo vue-cli
• O Vite é uma ferramenta de compilação de última geração lançada pela equipe do Vue; ele inicia 30 vezes mais rápido que o Webpack
• O VS Code com a extensão Volar é a configuração padrão para o desenvolvimento com Vue 3
• “Hello World” em 5 minutos: Instalar o Node → Instalar o pnpm → create-vue → pnpm install → pnpm dev

📝 Exercícios

1. Questões básicas (Dificuldade: ⭐)

   Siga as etapas desta lição para configurar um projeto Vue 3 do zero my-first-vue, executá-lo com sucesso pnpm dev e visualizar a página de boas-vindas. Faça uma captura de tela da saída do terminal (incluindo as versões do Node, do pnpm e do Vite).

2. Problemas avançados (Dificuldade: ⭐⭐)

   Use create-vue para criar um projeto com as seguintes opções my-fullstack-vue:

   • TypeScript: Sim
   • Visualização do roteador: Sim
   • Pinia: Sim
   • Vitest: Sim
   • ESLint: Sim
   • Mais bonito: Sim

   Assim que o programa for executado com sucesso, altere o título de src/views/HomeView.vue para “Hello Alice!” e anote quais linhas foram modificadas.

3. Problema de desafio (Dificuldade: ⭐⭐⭐)

   Comparando as experiências de desenvolvimento do Vite e do Webpack:

   1. Medição do tempo de inicialização a frio (Vite x Webpack 5)
   2. Meça o tempo de recarga dinâmica (o tempo que o navegador leva para atualizar a página após a modificação de uma linha de código)
   3. Crie um quadro comparativo usando o Mermaid e escreva um relato de experiência com 500 caracteres.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós