Criar um aplicativo Vue.js usando as Ferramentas Node.js para Visual Studio

O Visual Studio é compatível com o 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
• Modelos de projeto e de arquivo Vue.js

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 exige recursos que estão disponíveis apenas a partir do Visual Studio 2017 versão 15.8.

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

  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.

• Para criar o projeto ASP.NET Core, é necessário ter instaladas as cargas de trabalho de desenvolvimento do ASP.NET e para a Web e de desenvolvimento multiplataforma do .NET Core.

• Você precisa ter o runtime do Node.js instalado.

  Se não o tiver instalado, instale a versão LTS do site do Node.js. 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 o botão direito do mouse no nó do projeto e escolha Propriedades).

Criar um projeto Vue.js usando Node.js

Use os novos modelos do Vue.js para criar um projeto. O uso do modelo é a maneira mais fácil de começar. Para obter etapas detalhadas, confira Usar o Visual Studio para criar seu primeiro aplicativo Vue.js.

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

O Vue.js fornece uma CLI oficial para o scaffolding rápido de projetos. Caso deseje usar a CLI para criar seu aplicativo, siga as etapas deste artigo para configurar o ambiente de desenvolvimento.

Criar um projeto ASP.NET Core

Neste exemplo, você usará um aplicativo ASP.NET Core vazio (C#). 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 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, dê o nome client-app ao projeto e 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 é iniciado. Selecione as cargas de trabalho necessárias.

Configurar o arquivo de inicialização do projeto

• Abra o arquivo ./Startup.cs e 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 npm vue-cli, 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).

Gerar um novo aplicativo cliente por scaffolding usando a CLI do Vue

1. Vá para o prompt de comando e altere o diretório atual para a pasta raiz do projeto.

2. Digite vue init webpack client-app e siga as etapas quando solicitado a responder perguntas adicionais.

   Observação

   Para arquivos .vue, você precisa usar o 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 arquivo único final .js a ser carregado no navegador. Novamente, o Webpack é a melhor opção aqui. Para conduzir esse processo a partir do Visual Studio usando o MSBuild, você precisa começar com um modelo do Visual Studio. No momento, não há nenhum modelo do ASP.NET para desenvolvimento integrado do Vue.js.

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

• Abra o arquivo ./client-app/config/index.js e altere o build.index e o 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 disparado

1. No Visual Studio, acesse Projeto>Propriedades>Eventos de Build.

2. 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.js e adicione as seguintes propriedades à propriedade de saída:

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

Adicionar suporte a TypeScript com a CLI do Vue

Essas etapas exigem a vue-cli 3.0 que, atualmente, está em versão beta.

1. Vá para o prompt de comando e altere o diretório atual para a pasta raiz do projeto.

2. Digite vue create client-app e, em seguida, escolha Selecionar os recursos manualmente.

3. Escolha TypeScript e, em seguida, selecione outras opções desejadas.

4. Siga as etapas restantes e responda às perguntas.

Configurar um projeto Vue.js para TypeScript

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

   Definindo essa opção, você impede que o projeto fique desorganizado sempre que criar no Visual Studio.

2. Em seguida, crie um arquivo vue.config.js no ./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. Cada vez que tentar atualizar a pasta wwwroot, será preciso executar o comando npm run build na pasta do aplicativo cliente.

Como alternativa, você pode compilar o projeto vue-cli 3.0 como um evento pré-build usando as propriedades de 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

• O atributo lang só é compatível com as linguagens JavaScript e TypeScript. Os valores aceitos são: js, jsx, ts e tsx.

• O atributo lang não funciona com marcas de modelo ou de 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. Você precisa de um arquivo que contém um código como o mostrado a seguir para informar a aparência dos arquivos .vue ao TypeScript (o modelo da vue-cli 3.0 já inclui esse arquivo).

  // ./client-app/vue-shims.d.ts
  declare module "*.vue" {
      import Vue from "vue";
      export default Vue;
  }
  

• A execução do comando npm run build como um evento pré-build nas propriedades do projeto não funciona ao usar a vue-cli 3.0.

Conteúdo relacionado

• Guia de introdução do Vue.
• Projeto da CLI do Vue.
• Documentação de configurações do Webpack.