Compartilhar via

Tutorial: Vue.js para iniciantes

Se você for novo em usar Vue.js, este guia ajudará você a começar a usar algumas noções básicas.

Pré-requisitos

Experimentar o NodeJS com o Visual Studio Code

Se você ainda não tiver, instale VS Code. É recomendável instalar o VS Code no Windows, independentemente de você planejar usar o Vue no Windows ou no WSL.

  1. Abra sua linha de comando e crie um novo diretório: mkdir HelloVueem seguida, 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 o Vue 3 Preview ou selecionar manualmente os recursos desejados.

    Predefinição do Vue CLI

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

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

    Você deverá ver "Bem-vindo ao seu aplicativo Vue.js" em http://localhost:8080 no navegador. Você pode pressionar 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á garantir que você tenha a Extensão Remota – WSL instalada para a melhor experiência em execução e edição do código com o servidor remoto 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 iniciará e exibirá seu aplicativo Vue no Explorador de Arquivos. Execute seu aplicativo no terminal novamente com npm run serve e abra seu navegador no localhost para que você possa ver a página de boas-vindas do Vue exibida. Localize o App.vue arquivo no VS Code. Tente alterar "Bem-vindo ao seu aplicativo Vue.js" para "Bem-vindo à Selva!". Você verá seu aplicativo Vue fazer "hot reload" assim que salvar a alteração.

    recarga dinâmica do aplicativo Vue ao alterar o gif animado

Recursos adicionais