Vue Academy · Aula

Instalação do Vue CLI

Instale e use o Vue CLI para criar novos projetos.

Aula 1 de 313 etapas

Instalação do Vue CLI é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 3 aulas no total.

O que é o Vue CLI?

O Vue CLI é a ferramenta clássica de linha de comando para criar a estrutura inicial e gerenciar projetos Vue.

Cria projetos com configurações padrão sensatas
Gerencia a configuração da compilação por meio de plug-ins
É baseado no webpack

Ele foi o padrão durante anos, embora o Vue moderno agora prefira o Vite.

Instalando o Vue CLI globalmente

Instale o CLI globalmente para que o comando vue fique disponível em qualquer lugar.

# Install globally with npm
npm install -g @vue/cli

# Verify the installation
vue --version
# @vue/cli 5.0.8

Criando um projeto

Use vue create para criar a estrutura inicial de um novo projeto. Você informa o nome do projeto.

# Create a new project
vue create my-project

# The CLI launches an interactive prompt

Escolhendo predefinições

O CLI solicita que você escolha uma predefinição:

Padrão fornece Babel e ESLint, sendo o caminho mais rápido
Selecionar recursos manualmente permite adicionar Router, Vuex, TypeScript, testes e muito mais

As predefinições podem ser salvas e reutilizadas em projetos futuros.

Seleção manual de recursos

Ao escolher a seleção manual, você ativa ou desativa os recursos que deseja.

# Example feature checklist
? Check the features needed for your project:
  (*) Babel
  ( ) TypeScript
  (*) Router
  (*) Vuex
  (*) CSS Pre-processors
  (*) Linter / Formatter

Executando o projeto

Após a criação, o CLI exibe os comandos para iniciar sua aplicação.

# Move into the project
cd my-project

# Start the dev server
npm run serve

# App runs at http://localhost:8080

Conheça o Vite

O Vite é a ferramenta moderna de compilação criada pela equipe do Vue.

Usa módulos ES nativos para iniciar instantaneamente
Substituição de módulos extremamente rápida
Muito mais rápido que o Vue CLI baseado no webpack

Atualmente, o Vite é a ferramenta recomendada para novos projetos Vue.

Vite x Vue CLI

Veja como as duas ferramentas se comparam:

Vue CLI usa webpack, tem uma inicialização a frio mais lenta, mas é maduro e configurável
Vite usa esbuild e ESM nativo, inicia quase instantaneamente e é a opção padrão daqui em diante

O Vue CLI está agora em modo de manutenção. Prefira o Vite, a menos que você mantenha um projeto legado.

npm create vue@latest

A maneira oficial de iniciar um novo projeto Vue baseado no Vite é usar a ferramenta create-vue.

# Scaffold a Vite + Vue project
npm create vue@latest

# Prompts for name and features:
#   TypeScript, JSX, Vue Router, Pinia,
#   Vitest, ESLint, Prettier

Executando um projeto create-vue

O create-vue usa os scripts padrão do Vite.

# After scaffolding
cd my-vue-app
npm install
npm run dev

# Dev server: http://localhost:5173

Qual você deve usar?

Orientações para escolher:

Está começando do zero em 2024 ou depois? Use npm create vue@latest (Vite)
Está mantendo um projeto antigo criado com o Vue CLI? Continue usando-o
Quer a experiência de desenvolvimento mais rápida? O Vite vence

Verificação rápida

Teste sua compreensão sobre as opções de ferramentas do Vue.

Responda na aula interativa

Recapitulação: instalação do Vue CLI

Você aprendeu sobre as ferramentas de criação da estrutura inicial do Vue:

Vue CLI instalado com npm install -g @vue/cli
vue create cria a estrutura inicial usando predefinições
Vite é a alternativa moderna e rápida
npm create vue@latest é a forma moderna recomendada de começar

A seguir: exploraremos a estrutura do projeto gerado.

Grátis para começar

Aprenda HTML com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 42
Aulas: 156

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “Instalação do Vue CLI” é grátis?

Sim — o texto completo de “Instalação do Vue CLI” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 3 aulas no total.

O que vou aprender em “Instalação do Vue CLI”?

Instale e use o Vue CLI para criar novos projetos. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 3.

Quanto tempo leva a aula “Instalação do Vue CLI”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Vue Academy