Nota
O acesso a esta página requer autorização. Pode tentar iniciar sessão ou alterar os diretórios.
O acesso a esta página requer autorização. Pode tentar alterar os diretórios.
Nesta introdução de 5 a 10 minutos ao ambiente de desenvolvimento integrado (IDE) do Visual Studio, você criará e executará um aplicativo Web Vue.js simples.
Pré-requisitos
Você deve ter o Visual Studio instalado e a carga de trabalho de desenvolvimento do Node.js.
Se você ainda não instalou o Visual Studio 2019, vá para 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 Visual Studio Installer. Escolha a carga de trabalho de desenvolvimento Node.js e, em seguida, escolha Modificar.
Você deve ter o runtime Node.js instalado.
Se você não o tiver instalado, recomendamos que instale a versão LTS a partir do site daNode.js para melhor compatibilidade com estruturas e bibliotecas externas. Node.js foi 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, oferecem suporte a ambas as versões. Apenas um é necessário e o instalador Node.js suporta apenas um que está sendo instalado de cada vez.
Em geral, o Visual Studio deteta automaticamente o tempo de execução do Node.js instalado. Se ele não detetar um tempo de execução instalado, você poderá configurar seu projeto para fazer referência ao tempo de execução 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 do Node.js ou especificar o caminho para um intérprete local em cada um dos seus projetos Node.js.
Criar um projeto
Primeiro, você criará um projeto de aplicativo Web Vue.js.
Se não tiver o ambiente de execução Node.js instalado, instale a versão LTS a partir do site 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, em seguida, escolha Basic Vue.js Web application (JavaScript ou TypeScript). Na caixa de diálogo exibida, digite o nome basic-vuejs e escolha Criar.
Se não vires o modelo de projeto aplicação Web Básica Vue.js, deverás adicionar a carga de trabalho de desenvolvimento Node.js. Para obter instruções detalhadas, consulte os Pré-requisitos.
Visual Studio cria o novo projeto. O novo projeto é aberto no Gerenciador de Soluções (painel direito).
Verifique na janela Saída (painel inferior) o 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 faltando (ícone de ponto de exclamação), você pode clicar com o botão direito do mouse no nó npm e escolher Instalar pacotes npm ausentes.
Explore a IDE
Dê uma olhada no Gerenciador de Soluções no painel direito.
Destacado em negrito está o seu projeto, usando o nome que você deu na caixa de diálogo Novo Projeto . No disco, este 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 sln no disco, é um contentor 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 procurar e instalar pacotes npm usando uma caixa de diálogo.
Se você quiser instalar pacotes npm ou executar comandos Node.js a partir de 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.
Se não vir todos os modelos de item, escolha Mostrar Todos os Modelose, em seguida, escolha o modelo de item.
Selecione JavaScript Vue Single File Component ou TypeScript Vue Single File Component e clique em Add.
O Visual Studio adiciona o novo arquivo ao projeto.
Compilar o projeto
Em seguida, escolha Build>Build Solution para criar o projeto.
Verifique a janela Saída para ver os resultados da compilação e escolha Construir na lista Mostrar saída de .
O modelo de projeto JavaScript Vue.js (e versões mais antigas do modelo TypeScript) usam o build script npm configurando um evento pós-compilação. Se você quiser modificar essa configuração, abra o arquivo de projeto (<projectname.njsproj>) do Windows Explorer e localize esta linha de código:
<PostBuildEvent>npm run build</PostBuildEvent>
Execute o aplicativo
Pressione Ctrl+F5 (ou Depurar > Iniciar Sem Depuração) para executar o aplicativo.
No console, você verá uma mensagem Iniciando o Development Server.
Em seguida, o aplicativo é aberto em um navegador.
Caso não veja a aplicação em execução, atualize a página.
Feche o navegador da Web.
Parabéns por completar este Guia de 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 seus recursos, continue com um tutorial na seção Tutoriais do sumário.