[Pt-br] Template — Vue JS 3.0 + Asp.Net Core 5.0 — Visual Studio 2019

Estou um grande fã de Vue JS e da plataforma .NET ao mesmo tempo. Eu obtive ótimos resultados utilizando os dois de forma combinada, para vários projetos de diversos tamanho e diferentes complexidades.

Po padrão, o Visual Studio não possui um template nativo específico para Vue JS e Asp.Net Core, como acontece com Angular + Asp.Net Core. Configurar desde o início uma aplicação Vue JS incluindo rotas, componentes iniciais, chamadas de API e configuração de bibliotecas CSS muitas vezes exige um tempo relevante. Adicionalmente, a integração com Asp.Net Core no mesmo projeto necessita do uso de um middleware customizado e configurações extras no Startup.cs.

Por conta disso, eu criei, para ajudar a comunidade técnica, meu próprio template de projeto, que consiste na utilização de Vue JS 3.0 e Asp.Net Core 5.0 Web API. Você pode fazer o download da extensão para Visual Studio 2019 no seguinte link:

Vue JS 3.0 with .NET 5 Web API - Visual Studio Marketplace

Instalação

Para usar o template, depois de realizar o download, basta seguir o passo a passo da instalação após clicar no executável:

Usage

Depois de completar a instalação, o novo template já estár disponível no Visual Studio. Escolha a opção correspodente na opção “Criar Novo Projeto” no Visual Studio. Caso não esteja aparecendo já na primeira opção, é só pesquisar Vue no campo de busca:

A estrutura do projeto é similar à seguinte imagem, contendo os seguintes itens:

ClientApp folder

Pasta ClientApp com a aplicaão Vue JS 3.0, incluindo:

1. Componentes Counter, Fetch Data, Nav Menu e Home
2. Vue Router e Axios já configurados para Vue JS 3.0)
3. Pasta “router” contendo as configurações iniciais para trabalhar com rotas no Vue JS

Asp.Net Core 5.0 Web API

API Controller com o método padrão de previsão de tempo já disponibilizada em outros templates Asp.Net Core no Visual Studio.

Todas as configurações extras no arquivo Startup.cs já foram feitas também, incluindo a configuração do middleware para Vue JS e SPA para Asp.Net Core:

Método ConfigureServices

Configure method

Rodar o projeto

Depois de criar o projeto, a única coisa que é necessário fazer é rodá-lo. Caso os pacotes do NodeJS não estejam ainda instalados, a aplicação rodará no processo do build o comando “npm install” na pasta ClientApp, como pode ser visto na imagem abaixo:

Depois de concluir a instalação dos pacotes, a aplicação abrirá no navegador automaticamente:

Conteúdo extra

Para mais informações a respeito do .NET 5, consulte a documentação oficial:

Announcing .NET 5.0 | .NET Blog

Meu Livro

Fico muito feliz em anunciar que tive a felicidade de escrever meu primeiro livro. É um conteúdo muito bem detalhado sobre Design Patterns, orientação a objeto, princípios SOLID, .NET 5 e C# no geral. Você pode adquirir o livro no link abaixo:

Implementing Design Patterns in C# and .NET 5: Build Scalable, Fast, and Reliable .NET Applications…

Conclusão

Eu espero que este template/extensão para Visual Studio 2019 ajude o seu dia a dia como desenvolvedor, poupando tempo na criação de aplicações Vue JS + Asp.Net Core.

Caso tenha alguma dúvida, ficarei feliz em responder por aqui ou em qualquer uma das redes sociais no links abaixo:

Twitter: https://twitter.com/alemalavasi
Linkedin: https://www.linkedin.com/in/alexandremalavasi/
Youtube: https://www.youtube.com/channel/UC-KFGgYiot1eA8QFqIgLmqA
Facebook: https://www.facebook.com/alexandre.malavasi.dev

Obrigado por ler este artigo até o final. Até a próxima.