Tutorial: Vue.js para iniciantes

  • Artigo

Se você estiver começando a usar o Vue.js agora, este guia ajudará você a se familiarizar com alguns conceitos básicos.

Pré-requisitos

Experimentar o NodeJS com o Visual Studio Code

Caso ainda não o tenha, instale o VS Code. Recomendamos instalar o VS Code no Windows, independentemente de você pretender usar o Vue no Windows ou no WSL.

  1. Abra a linha de comando, crie um diretório mkdir HelloVue e insira o diretório: cd HelloVue

  2. Instale a CLI do Vue: npm install -g @vue/cli

  3. Crie seu aplicativo Vue: vue create hello-vue-app

    Você precisará escolher se deseja usar o Vue 2 ou a versão prévia do Vue 3 ou selecionar manualmente os recursos desejados.

    Predefinição da CLI do Vue

  4. Abra o diretório do novo hello-vue-app: cd hello-vue-app

  5. Tente executar o novo aplicativo Vue no navegador da Web: npm run serve

    Você verá "Bem-vindo(a) ao seu aplicativo Vue.js" no http://localhost:8080 em seu navegador. Pressione Ctrl+C para interromper o servidor vue-cli-service.

    Observação

    Se estiver usando o WSL (com o Ubuntu ou sua distribuição favorita do Linux) para este tutorial, você precisará verificar se tem a Extensão do WSL Remoto instalada para obter a melhor experiência de execução e edição do seu código com o servidor remoto do VS.

  6. Tente atualizar a mensagem de boas-vindas abrindo o código-fonte do aplicativo Vue no VS Code, insira: code .

  7. O VS Code será iniciado e exibirá o aplicativo Vue no Explorador de Arquivos. Execute seu aplicativo no terminal novamente com o npm run serve e abra o navegador da Web no localhost para ver a página inicial da página do Vue exibida. Encontre o arquivo App.vue no VS Code. Tente alterar "Bem-vindo(a) ao seu aplicativo Vue.js" para "Bem-vindo(a) à selva!". Você verá a "recarga dinâmica" do aplicativo Vue assim que salvar a alteração.

    GIF animado da recarga dinâmica do aplicativo Vue após a alteração

Recursos adicionais