Instalar o Vue.js no Subsistema do Windows para Linux

  • Artigo

Um guia para ajudar você a configurar um ambiente de desenvolvimento do Vue.js no Windows instalando a estrutura da Web Vue.js no WSL (Subsistema do Windows para Linux). Saiba mais na página de visão geral do Vue.js.

O Vue pode ser instalado diretamente no Windows ou no WSL. Em geral, recomendamos que você o instale no WSL se pretende interagir com um back-end do NodeJS, deseja obter paridade com um servidor de produção Linux ou pretende acompanhar um tutorial que utilize comandos do Bash. Talvez você também queira considerar o Vite como uma alternativa ao Vue.js.

Pré-requisitos

  • Instalar o WSL (Subsistema do Windows para Linux), incluindo uma distribuição do Linux (como o Ubuntu), e verificar se ele está sendo executado no modo WSL 2. Para verificar isso, abra o PowerShell e digite: wsl -l -v
  • Instalar o Node.js no WSL 2: isso inclui um gerenciador de versões, um gerenciador de pacotes, o Visual Studio Code e a extensão de desenvolvimento remoto. O npm (Gerenciador de Pacotes do Node) é usado para instalar o Vue.js.

Importante

A instalação de uma distribuição do Linux com o WSL criará um diretório para armazenar os arquivos: \\wsl\Ubuntu-20.04 (substitua o Ubuntu-20.04 por qualquer distribuição do Linux que esteja usando). Para abrir esse diretório no Explorador de Arquivos do Windows, abra a linha de comando do WSL, selecione o diretório base usando cd ~ e insira o comando explorer.exe .. Tome cuidado para não instalar nem armazenar arquivos com os quais você trabalhará na unidade C montada (/mnt/c/Users/yourname$). Essa ação deixará a instalação e os tempos de build significativamente lentos.

Instalar o Vue.js

Para instalar o Vue.js no WSL:

  1. Abra uma linha de comando do WSL (ou seja, o Ubuntu).

  2. Crie uma pasta de projeto, mkdir VueProjects, e insira este diretório: cd VueProjects.

  3. Instale o Vue.js usando o npm (Gerenciador de Pacotes do Node):

npm install vue

Verifique o número de versão que você instalou usando o comando vue --version.

Observação

Para instalar o Vue.js usando uma CDN em vez do npm, confira a documentação de instalação do Vue.js.

Instalar a CLI do Vue

A CLI do Vue é um kit de ferramentas usado para trabalhar com o Vue na linha de comando/no terminal. Com ela, você pode fazer um scaffold rápido de um novo projeto (vue create), criar protótipos de novas ideias (vue serve) ou gerenciar projetos usando uma interface gráfica do usuário (vue ui). A CLI do Vue é um pacote npm instalado globalmente que lida com algumas das complexidades do build (como o uso do Babel ou do webpack) para você. Se você não está criando um aplicativo de página única, talvez não precise nem queira usar a CLI do Vue.

Para instalar a CLI do Vue, use o npm. Você precisará usar o sinalizador -g para a instalação global a fim de atualizá-lo (vue upgrade --next):

npm install -g @vue/cli

Para saber mais sobre outros plug-ins que podem ser adicionados (como o lint ou o Apollo para a integração do GraphQL), acesse Plug-ins da CLI do Vue na documentação da CLI do Vue.

Recursos adicionais