Criar um aplicativo Vue.js usando Node.js Tools para Visual Studio

2025-02-10

O Visual Studio dá suporte ao desenvolvimento de aplicativos com a estrutura Vue.js em JavaScript ou TypeScript.

Os seguintes novos recursos dão suporte ao desenvolvimento de aplicativos Vue.js no Visual Studio:

Suporte para blocos de Script, Estilo e Modelo em arquivos .vue
Reconhecimento do atributo lang em arquivos .vue
Vue.js modelos de projeto e arquivo

Pré-requisitos

É necessário ter o Visual Studio 2017 versão 15.8 ou posterior instalado e a carga de trabalho Desenvolvimento do Node.js.

Importante

Este artigo requer recursos que só estão disponíveis a partir do Visual Studio 2017 versão 15.8.

Se uma versão necessária ainda não estiver instalada, instale Visual Studio 2019.

Se você precisar instalar a carga de trabalho, mas já tiver o Visual Studio, acesse Ferramentas>Obter Ferramentas e Recursos..., que abre o Instalador do Visual Studio. Escolha a carga de trabalho Desenvolvimento de Node.js e, em seguida, selecione Modificar.
Para criar o projeto ASP.NET Core, você deve ter as cargas de trabalho de desenvolvimento multiplataforma do ASP.NET e do desenvolvimento da Web e do .NET Core instaladas.
Você deve ter o Node.js runtime instalado.

Se você não o tiver instalado, instale a versão LTS no site Node.js. 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 e escolha Propriedades).

Criar um projeto de Vue.js usando Node.js

Você pode usar os novos modelos de Vue.js para criar um novo projeto. O uso do modelo é a maneira mais fácil de começar. Para ver etapas detalhadas, consulte Usando o Visual Studio para criar seu primeiro aplicativo Vue.js.

Criar um projeto Vue.js com o ASP.NET Core e a CLI do Vue

Vue.js fornece uma CLI oficial para estruturação rápida de projetos. Se você quiser usar a CLI para criar seu aplicativo, siga as etapas neste artigo para configurar seu ambiente de desenvolvimento.

Importante

Essas etapas pressupõem que você já tenha alguma experiência com a estrutura Vue.js. Caso contrário, visite Vue.js para saber mais sobre a estrutura.

Criar um novo projeto do ASP.NET Core

Para este exemplo, você usa um aplicativo ASP.NET Core (C#) vazio. No entanto, você pode escolher entre vários projetos e linguagens de programação.

Criar um projeto vazio

Abra o Visual Studio e crie um novo projeto.

No Visual Studio 2019, escolha Criar um novo projeto na janela inicial. Se a janela inicial não estiver aberta, escolha Arquivo>Janela Inicial. Digite aplicativo Web, escolha C# como a linguagem, escolha ASP.NET Core Vazio e, em seguida, escolha Avançar. Na próxima tela, nomeie o projeto como client-app, e então escolha Avançar.

Escolha a estrutura de destino recomendada ou o .NET 6 e escolha Criar.

Se o modelo de projeto Aplicativo Web ASP.NET Core não for exibido, instale as cargas de trabalho desenvolvimento do ASP.NET e para a Web e Desenvolvimento do .NET Core primeiro. Para instalar as cargas de trabalho, clique no link Abrir Instalador do Visual Studio no painel esquerdo da caixa de diálogo Novo Projeto (selecione Arquivo>Novo>Projeto). O Instalador do Visual Studio iniciou. Selecione as cargas de trabalho necessárias.

Configurar o arquivo de inicialização do projeto

Abra o arquivo ./Startup.cse adicione as seguintes linhas ao método Configure:

app.UseDefaultFiles(); // Enables default file mapping on the web root.
app.UseStaticFiles(); // Marks files on the web root as servable.

Instalar a CLI do Vue

Para instalar o módulo vue-cli npm, abra um prompt de comando e digite npm install --g vue-cli ou npm install -g @vue/cli para a versão 3.0 (atualmente em beta).

Crie a estrutura de um novo aplicativo cliente usando o Vue CLI

Vá para o prompt de comando e altere o diretório atual para a pasta raiz do projeto.
Digite vue init webpack client-app e siga as etapas quando solicitado a responder perguntas adicionais.

Nota

Para arquivos .vue, você precisa usar webpack ou uma estrutura semelhante com um carregador para fazer a conversão. O TypeScript e o Visual Studio não sabem como compilar arquivos .vue. O mesmo é verdadeiro para agrupamento; O TypeScript não sabe como converter módulos ES2015 (ou seja, instruções import e export) em um único arquivo .js final a ser carregado no navegador. Novamente, o webpack é a melhor opção aqui. Para conduzir esse processo de dentro do Visual Studio usando o MSBuild, você precisa iniciar a partir de um modelo do Visual Studio. No momento, não há modelo de ASP.NET pronto para uso para o desenvolvimento Vue.js.

Modificar a configuração do webpack para gerar os arquivos compilados para wwwroot

Abra o arquivo ./client-app/config/index.jse altere o build.index e build.assetsRoot para o caminho wwwroot:

// Template for index.html
index: path.resolve(__dirname, '../../wwwroot/index.html'),

// Paths
assetsRoot: path.resolve(__dirname, '../../wwwroot'),

Indique o projeto para criar o aplicativo cliente sempre que um build for iniciado

No Visual Studio, acesse Projeto>Propriedades>Eventos de Build.
Na Linha de comando do evento pré-build, digite npm --prefix ./client-app run build.

Configurar os nomes do módulo de saída do webpack

Abra o arquivo ./client-app/build/webpack.base.conf.jse adicione as seguintes propriedades à propriedade de saída:

devtoolModuleFilenameTemplate: '[absolute-resource-path]',
devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'

Adicionar suporte ao TypeScript com a CLI do Vue

Essas etapas exigem vue-cli 3.0, que está atualmente em beta.

Vá para o prompt de comando e altere o diretório atual para a pasta raiz do projeto.
Digite vue create client-appe escolha Selecionar manualmente os recursos.
Escolha TypeScripte, em seguida, selecione outras opções desejadas.
Siga as etapas restantes e responda às perguntas.

Configurar um projeto de Vue.js para TypeScript

Abra o arquivo ./client-app/tsconfig.json e adicione noEmit:true às opções do compilador.

Ao definir essa opção, você evita desordenar seu projeto sempre que compilar no Visual Studio.

Em seguida, crie um arquivo vue.config.js em ./client-app/ e adicione o código a seguir.

module.exports = {
    outputDir: '../wwwroot',

    configureWebpack: {
        output: {
            devtoolModuleFilenameTemplate: '[absolute-resource-path]',
            devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
        }
    }
};

O código anterior configura o webpack e define a pasta wwwroot.

Compilar com a vue-cli 3.0

Um problema desconhecido com a vue-cli 3.0 pode impedir a automatização do processo de build. Sempre que você tentar atualizar a pasta wwwroot, será necessário executar o comando npm run build na pasta cliente-aplicativo.

Como alternativa, você pode criar o projeto vue-cli 3.0 como um evento de pré-build usando as propriedades do projeto ASP.NET. Clique com o botão direito no projeto, escolha Propriedades e inclua os seguintes comandos na guia Compilar, na caixa de texto Linha de comando do evento de pré-build.

cd ./client-app
npm run build
cd ../

Limitações

lang atributo só dá suporte a linguagens JavaScript e TypeScript. Os valores aceitos são: js, jsx, ts e tsx.
O atributo lang não funciona com tags de modelo ou estilo.
Não há suporte para blocos de script de depuração em arquivos .vue devido à sua natureza pré-processada.
O TypeScript não reconhece arquivos .vue como módulos. É necessário um arquivo que contenha código similar ao seguinte para informar ao TypeScript como são os arquivos .vue (o modelo vue-cli 3.0 já inclui esse arquivo).
```
// ./client-app/vue-shims.d.ts
declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}
```
Executar o comando npm run build como um evento de pré-build nas propriedades do projeto não funciona ao usar o vue-cli 3.0.

Compartilhar via