Criar um aplicativo Vue.js usando o Node.js Tools for Visual Studio

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

Os novos recursos a seguir oferecem suporte ao desenvolvimento de aplicativos Vue.js no Visual Studio:

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

Pré-requisitos

Você deve ter o Visual Studio 2017 versão 15.8 ou posterior instalado e a carga de trabalho de desenvolvimento 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, 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.
Para criar o projeto ASP.NET Core, você deve ter as cargas de trabalho de desenvolvimento ASP.NET e web e desenvolvimento entre plataformas .NET Core instaladas.
Você deve ter o runtime Node.js instalado.

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

Criar um projeto 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 passos detalhados, consulte Utilize o Visual Studio para criar a sua primeira aplicação Vue.js.

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

Vue.js fornece uma CLI oficial para configurar projetos rapidamente. Se você quiser usar a CLI para criar seu aplicativo, siga as etapas neste artigo para configurar seu ambiente de desenvolvimento.

Importante

Estas 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 ASP.NET Core

Neste exemplo, você usa um ASP.NET Core Application (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 de início. Se a janela Iniciar não estiver aberta, escolha Arquivo>Janela Iniciar. Digite web app, escolha C# como o idioma, escolha ASP.NET Core Emptye, em seguida, escolha seguinte. Na próxima tela, nomeie o projeto aplicativo clientee escolha Avançar.

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

Se não vir o modelo de projeto ASP.NET Core Web Application, deve primeiro instalar a carga de trabalho de ASP.NET e desenvolvimento da Web e a carga de trabalho de desenvolvimento do .NET Core. Para instalar a(s) carga(s) de trabalho, clique no link Open Visual Studio Installer no painel esquerdo da caixa de diálogo New Project (selecione File>New>Project). 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.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).

Scaffold um novo aplicativo cliente usando a CLI Vue

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 a perguntas adicionais.

Observação

Para arquivos .vue, você precisa usar o webpack ou uma estrutura semelhante com um carregador para fazer a conversão. TypeScript e Visual Studio não sabe como compilar arquivos .vue. O mesmo se aplica à agregação; O TypeScript não sabe como converter módulos ES2015 (ou seja, instruções import e export) em um único arquivo .js final para carregar no navegador. Mais uma vez, webpack é a melhor escolha aqui. Para conduzir esse processo de dentro do Visual Studio usando MSBuild, você precisa iniciar a partir de um modelo do Visual Studio. Atualmente, não há nenhum modelo ASP.NET disponível para desenvolvimento Vue.js.

Modifique a configuração do webpack para exportar os arquivos construídos 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 uma compilação for acionada

No Visual Studio, vá para Project>Properties>Build Events.
Na linha de comando de evento Pre-build , digite npm --prefix ./client-app run build.

Configurar nomes de módulos de saída do webpack

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

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

Adicione suporte a TypeScript com a CLI do Vue

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

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

Configurar um projeto Vue.js para TypeScript

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

Ao definir esta opção, evita-se a confusão do projeto cada vez que construir no Visual Studio.

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.

Construa com vue-cli 3.0

Um problema desconhecido com o vue-cli 3.0 pode impedir a automatização do processo de compilação. Cada vez que você tenta atualizar a pasta wwwroot, você precisa 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é-compilação usando as propriedades do projeto ASP.NET. Clique com o botão direito do mouse no projeto, escolha Propertiese inclua os seguintes comandos na guia Build, na caixa de texto linha de comando evento Pre-build.

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

Limitações

lang atributo suporta apenas as linguagens JavaScript e TypeScript. Os valores aceitos são: js, jsx, ts e tsx.
O atributo lang não funciona com tags de template ou style.
A depuração de blocos de script em arquivos .vue não é suportada devido à sua natureza pré-processada.
O TypeScript não reconhece arquivos .vue como módulos. Você precisa de um arquivo que contenha código como o seguinte para informar ao TypeScript como arquivos .vue aparência (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é-compilação nas propriedades do projeto não funciona ao usar vue-cli 3.0.

Comentários

Esta página foi útil?

Last updated on 2025-01-27