Início rápido: Crie um projeto Vue.js

Neste guia de iniciação rápida, vai criar e executar uma aplicação Web de front-end básica em Vue.js. Este artigo oferece uma introdução de 5 a 10 minutos ao ambiente integrado de desenvolvimento (IDE) do Visual Studio.

Pré-requisitos

Prepare a sua configuração com os seguintes pré-requisitos:

Crie a sua aplicação Vue

Crie uma Vue.js aplicação web seguindo estes passos:

  1. Na janela Visual Studio Start (selecione File>Start Window), selecione Criar um novo projeto.

    Captura de ecrã a mostrar como selecionar a opção 'Criar um novo projeto'.

    Captura de ecrã a mostrar como selecionar a opção 'Criar um novo projeto'.

  2. No diálogo Criar um novo projeto , introduza Vue na caixa de pesquisa. Selecione o modelo da aplicação Vue para JavaScript ou TypeScript e selecione Próximo.

    Captura de ecrã a mostrar como escolher um modelo Vue para JavaScript ou TypeScript.

    Captura de ecrã a mostrar como escolher um modelo Vue para JavaScript ou TypeScript.

    Em Visual Studio versão 11 de 2022 e posteriores, o nome do modelo Standalone JavaScript Vue Project foi alterado para Vue App.

  3. Introduza um nome para o seu projeto e solução, e selecione Criar.

Aguarda que o Visual Studio crie o projeto.

Ver as propriedades do projeto

As configurações padrão do projeto permitem que você crie e depure o projeto.

Se quiser alterar alguma definição, siga estes passos:

  1. Clique com o botão direito no projeto em Explorador de Soluções e selecione Properties.

  2. No painel de propriedades do projeto, selecione Debug, Linting, Build ou Deploy para ver as propriedades correspondentes.

Para configurar o depurador, utilize o ficheiro launch.json.

Observação

O launch.json ficheiro de configuração do depurador armazena as definições de arranque associadas à ação Start na barra de ferramentas Debug. O launch.json ficheiro deve estar localizado na .vscode pasta do seu projeto.

Construa o seu projeto

Para construir o seu novo projeto, selecione Construir>Construir Solução.

Comece o seu projeto

Selecione F5 ou use a ação Start no topo da janela.

O projeto abre um prompt de comandos com o seguinte texto (ou semelhante):

VITE v4.4.9 ready in 780 ms

Observação

Verifique a saída da consola para mensagens, como instruções para atualizar a sua versão do Node.js.

Quando o processo tem sucesso, a aplicação Vue.js base abre-se.

Próximo passo