Partilhar via

Criar um projeto Vue.js

Nesta introdução de 5 a 10 minutos ao ambiente de desenvolvimento integrado (IDE) do Visual Studio, você cria e executa um aplicativo Web frontend Vue.js simples.

Pré-requisitos

Certifique-se de instalar o seguinte software:

Crie seu aplicativo

  1. Na janela de Início (escolha Ficheiro>Janela de Início para abrir), selecione Crie um novo projeto.

    Captura de tela mostrando Criar um novo projeto

  2. Procure Vue na barra de pesquisa na parte superior e, em seguida, selecione Vue App para JavaScript ou TypeScript.

    Captura de ecrã a mostrar a escolha de um modelo

    A partir da versão 11 do Visual Studio 2022, o nome do modelo foi alterado de Standalone JavaScript Vue Project para Vue App.

  3. Dê um nome ao seu projeto e solução e, em seguida, escolha Avançar.

  4. Escolha Criare, em seguida, aguarde até 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. Mas, se você precisar alterar as configurações, clique com o botão direito do mouse no projeto no Gerenciador de Soluções, selecione Propriedadese, em seguida, vá para o Linting, Build ou seção Implantar.

Para a configuração do depurador, use launch.json.

Observação

launch.json armazena as configurações de inicialização associadas ao botão Iniciar na toolbar de depuração. Atualmente, launch.json deve estar localizado na pasta .vscode.

Construa o seu projeto

Escolha >Build Solution para criar o projeto.

Inicie o seu projeto

Pressione F5 ou selecione o botão Iniciar na parte superior da janela e você verá um prompt de comando, como:

  • VITE v4.4.9 pronto em 780 ms

    Observação

    Verifique a saída do console em busca de mensagens, como uma mensagem instruindo você a atualizar sua versão do Node.js.

Em seguida, deverás ver o aplicativo base Vue.js aparecer!

Próximos passos

Para integração ASP.NET Core:

Crie um aplicativo ASP.NET Core com o Vue