Observação
O acesso a essa página exige autorização. Você pode tentar entrar ou alterar diretórios.
O acesso a essa página exige autorização. Você pode tentar alterar os diretórios.
Nesta introdução de 5 a 10 minutos ao IDE (ambiente de desenvolvimento integrado) do Visual Studio, você criará e executará um aplicativo Web Vue.js simples.
Pré-requisitos
Você deve ter o Visual Studio instalado e o pacote de desenvolvimento Node.js.
Se você ainda não instalou o Visual Studio 2019, acesse a página de downloads do Visual Studio para instalá-lo gratuitamente.
Se você precisar instalar a carga de trabalho, mas já tiver o Visual Studio, vá para Ferramentas>Obter Ferramentas e Recursos..., que abre o Instalador do Visual Studio. Escolha a carga de trabalho de desenvolvimento Node.js e escolha Modificar.
Você deve ter o Node.js runtime instalado.
Se você não o tiver instalado, recomendamos que você instale a versão lts do site doNode.js para melhor compatibilidade com estruturas e bibliotecas externas. 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 Node.js, dão suporte a ambas as versões. Apenas um é necessário e o instalador do Node.js suporta apenas uma instalação de cada vez.
Em geral, o Visual Studio detecta automaticamente o runtime de 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 o botão direito do mouse no nó do projeto, escolha Propriedades e defina o caminhoNode.exe). Você pode usar uma instalação global de Node.js ou especificar o caminho para um interpretador local em cada um de seus projetos de Node.js.
Criar um projeto
Primeiro, você criará um projeto de aplicativo Web Vue.js.
Se você ainda não tiver o runtime do Node.js instalado, instale a versão LTS a partir do site do Node.js.
Para obter mais informações, consulte os pré-requisitos.
Abra o Visual Studio.
Crie um novo projeto.
Pressione Esc para fechar a janela inicial. Digite Ctrl + Q para abrir a caixa de pesquisa, digite Basic Vue.jse escolha Basic Vue.js Aplicativo Web (JavaScript ou TypeScript). Na caixa de diálogo exibida, digite o nome basic-vuejs e, em seguida, escolha Criar.
Se você não vir o modelo de projeto de aplicativo Web Vue.js Básico, deverá adicionar o workload de desenvolvimento do Node.js. Para obter instruções detalhadas, consulte os pré-requisitos.
O Visual Studio cria o novo projeto. O novo projeto é aberto no Gerenciador de Soluções (painel direito).
Verifique a janela Saída (painel inferior) para obter progresso na 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 algum 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
Dê uma olhada no Gerenciador de Soluções no painel direito.
Realçado em negrito é o seu projeto, usando o nome que você deu 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 do seu projeto. Uma solução, representada por um . o arquivo sln no disco é um contêiner para um ou mais projetos relacionados.
O nó npm mostra todos os pacotes npm instalados. Você pode clicar com o botão direito do mouse no nó npm para pesquisar e instalar pacotes npm usando uma caixa de diálogo.
Se você quiser instalar pacotes npm ou executar comandos 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 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 o Componente de Arquivo Único do JavaScript Vue ou o Componente de Arquivo Único TypeScript Vue e clique em Adicionar.
O Visual Studio adiciona o novo arquivo ao projeto.
Compilar o projeto
Em seguida, escolha Compilar>Compilar Solução para construir o projeto.
Verifique a janela de Saída para ver os resultados da compilação e escolha Compilar na lista Mostrar saída de.
O modelo de projeto JavaScript Vue.js (e versões mais antigas do modelo TypeScript) usa o script npm build configurando um evento de pós-construção. Se você quiser 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á uma mensagem iniciando o servidor de desenvolvimento.
Em seguida, o aplicativo é 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 Início Rápido! Esperamos que você tenha aprendido um pouco sobre como usar o IDE do Visual Studio com Vue.js. Se você quiser se aprofundar em suas funcionalidades, continue com um tutorial na seção Tutoriais do sumário.