Início Rápido: Usar o Visual Studio para criar seu primeiro aplicativo Vue.js
Nesta introdução de 5 a 10 minutos do IDE (ambiente de desenvolvimento integrado) do Visual Studio, você criará e executará um aplicativo Web Vue.js simples.
Pré-requisitos
Você precisa ter o Visual Studio instalado e a carga de trabalho de desenvolvimento de Node.js.
Se você ainda não tiver instalado o Visual Studio 2019, acesse a página Downloads do Visual Studio para instalá-lo gratuitamente.
Caso precise instalar a carga de trabalho, mas já tiver o Visual Studio, acesse Ferramentas>Obter Ferramentas e Funcionalidades..., que abre o Instalador do Visual Studio. Escolha a carga de trabalho Desenvolvimento de Node.js e, em seguida, selecione Modificar.
Você precisa ter o runtime do Node.js instalado.
Se você não o tiver instalado, recomendamos que você instale a versão LTS do site do Node.js para melhor compatibilidade com estruturas e bibliotecas externas. O Node.js é criado para arquiteturas de 32 bits e 64 bits. As ferramentas de Node.js no Visual Studio, incluídas na carga de trabalho do Node.js, dão suporte a ambas as versões. Apenas uma é necessária, e o instalador do Node.js dá suporte apenas a instalação de uma delas por vez.
Em geral, o Visual Studio detecta automaticamente o runtime do Node.js instalado. Se ele não detectar um runtime instalado, você poderá configurar seu projeto para fazer referência ao runtime instalado na página de propriedades (depois de criar um projeto, clique com botão direito do mouse no nó do projeto, escolha Propriedades e defina o caminho de Node.exe). Você pode usar uma instalação global do Node.js ou pode especificar o caminho para um interpretador local em cada um de seus projetos do Node.js.
Criar um projeto
Primeiro, você criará um projeto de aplicativo Web Vue.js.
Se não tiver o runtime do Node.js instalado, instale a versão LTS do site do Node.js.
Para obter mais informações, confira os pré-requisitos.
Abra o Visual Studio.
Criar um novo projeto.
Pressione Esc para fechar a janela de início. Digite Ctrl + Q para abrir a caixa de pesquisa, digite Basic Vue.js e, em seguida, escolha Aplicativo Web básico do Vue.js (JavaScript ou TypeScript). Na caixa de diálogo que aparece, digite o nome basic-vuejs e, em seguida, escolha Criar.
Se não vir o modelo de projeto Aplicativo Web Vue.js básico, você deverá instalar a carga de trabalho de desenvolvimento de Node.js. Confira instruções detalhadas nos Pré-requisitos.
O Visual Studio cria o projeto. O novo projeto é aberto no Gerenciador de Soluções (painel direito).
Verifique a janela de Saída (painel inferior) para ver o progresso da instalação dos pacotes npm necessários para o aplicativo.
No Gerenciador de Soluções, abra o nó npm e verifique se todos os pacotes npm listados estão instalados.
Se um pacote estiver ausente (ícone de ponto de exclamação), clique com o botão direito do mouse no nó npm e escolha Instalar Pacotes npm Ausentes.
Explorar o IDE
Observe o Gerenciador de Soluções no painel direito.
O seu projeto está realçado em negrito, usando o nome que você forneceu na caixa de diálogo Novo Projeto. No disco, esse projeto é representado por um arquivo .njsproj na pasta do projeto.
No nível superior está uma solução que, por padrão, tem o mesmo nome que o projeto. Uma solução, representada por um arquivo .sln no disco, é um contêiner para um ou mais projetos relacionados.
O nó npm mostra os pacotes npm instalados. Você pode clicar com o botão direito do mouse no nó de npm para pesquisar e instalar pacotes de npm usando uma caixa de diálogo.
Caso deseje instalar pacotes npm ou executar comandos do Node.js em um prompt de comando, clique com o botão direito do mouse no nó do projeto e escolha Abrir Prompt de Comando Aqui.
Adicionar um arquivo .vue ao projeto
No Gerenciador de Soluções, clique com o botão direito do mouse em qualquer pasta, como a pasta src/components e, em seguida, escolha Adicionar>Novo Item.
Caso você não veja todos os modelos de item, escolha Mostrar todos os modelos e escolha o modelo de item.
Selecione Componente de Arquivo Único JavaScript Vue ou Componente de Arquivo Único TypeScript Vue e, em seguida, clique em Adicionar.
O Visual Studio adiciona o novo arquivo ao projeto.
Compilar o projeto
Em seguida, escolha Compilar>Compilar Solução para criar o projeto.
Verifique a janela de Saída para ver os resultados do build e escolha Build na lista Mostrar saída de.
O modelo de projeto Vue.js do JavaScript (e versões mais antigas do modelo TypeScript) usa o script npm build configurando um evento pós-build. Caso deseje modificar essa configuração, abra o arquivo de projeto (<projectname>.njsproj) no Windows Explorer e localize esta linha de código:
<PostBuildEvent>npm run build</PostBuildEvent>
Executar o aplicativo
Pressione Ctrl+F5 (ou Depurar > Iniciar sem Depuração) para executar o aplicativo.
No console, você verá a mensagem Iniciando Development Server.
Em seguida, o aplicativo será aberto em um navegador.
Se você não vir o aplicativo em execução, atualize a página.
Feche o navegador da web.
Parabéns por concluir este Guia de Início Rápido! Esperamos que você tenha aprendido um pouco sobre como usar o IDE do Visual Studio e com o Vue.js. Caso deseje se aprofundar mais nas funcionalidades, continue com um tutorial na seção Tutoriais do sumário.