aspdotnet vuejs
v3.0.0
DOTNET CORE 3.0 + VUEJSEssa idéia principal do projeto é fornecer uma maneira fácil de iniciar um novo projeto usando o .NET Core Webapi no lado do servidor e Vuejs no lado do cliente. Para essa meta, configuramos a configuração principal para permitir essa integração usando alguns utilitários como recarregamento a quente e algumas bibliotecas de front-end como elemento-Ui e Fontawesome.
Nosso objetivo é fornecer um spa simples com dependências mínimas e problemas de desempenho. O VueJS está configurado com o roteador Vuex e Vue, mas isso pode ser removido se você não sentir que atende a sua exigência. O mesmo vale para a biblioteca de componentes. Neste modelo, também fornecemos exemplos com os principais funcionalits.
Este modelo é inspirado e adaptado do projeto de Mark Pieszak e do projeto de Nordes.
* Trabalho em andamento. Disponível em lançamentos futuros.
Para baixar e instalar o modelo, basta digitar:
> dotnet new -i aspdotnet-vuejsVocê pode ver uma lista de modelos instalados usando o comando
dotnet new -l.
Então, para criar seu projeto, você simplesmente usará o comando abaixo do diretório:
> dotnet new vue Isso executará automaticamente dotnet restore . Mas pode ser alterado nas configurações de modelo. Consulte dotnet new vue -h antes de usar o comando anterior.
A solução e o nome do projeto serão o nome do diretório.
Para atualizar sua instalação, você só precisará repetir o processo de instalação. Enquanto o número da versão não for igual, você não terá nenhum comportamento inesperado.
Digite o seguinte comando do shell:
> dotnet new -u aspdotnet-vuejsPara começar a desenvolver seu aplicativo, basta usar o comando .NET CLI:
> dotnet run YourAplication.csprojVocê pode apenas digitar
dotnet runno diretório do projeto ou configurar seu IDE para ser executado. Neste último caso, não se esqueça de passar na variávelASPNETCORE_ENVIRONMENT=Development.
Isso também executará todas as dependências de nós, como npm i
O aplicativo será iniciado no modo de desenvolvimento com recarregamento a quente ativado em
https://localhost:5001ehttp://localhost:5000.
Você precisa garantir que seu wwwroot esteja vazio antes de iniciar o processo.
Basta usar a maneira normal de publicar usando .NET Core CLI
> dotnet publish YourProject.csproj -c release -o ./publish/Você também pode adicionar todo o outro parâmetro da CLI dotnet. Visite o site do MSDN para saber mais sobre isso.
Isso fará uma reconstrução do seu projeto e, depois de usará o destino especial para reconstruir seu cliente (VUEJS) no modo de produção.
Se você estiver publicando por trás de um servidor nginx, poderá precisar de mais configuração.
Digamos que você tenha seu site base http://www.example.com e que, na sua configuração nginx, gostaria de ter seu aplicativo DotNet em http://www.example.com/myApp . Você precisará de esse cenário para definir o URI base para o index.html. Em vez de fazer isso manualmente entre desenvolvimento e produção, você tem o arquivo ./build/base.prod.config.js , que contém uma possível substituição.
Basta definir sua substituição como o seguinte:
module . exports = {
baseUriPath : '/myApp/'
}Quando você publicar na próxima vez, o caminho será levado em consideração e definirá automaticamente o caminho base do URI.
O projeto já adiciona algum contêiner do Docker disponível no Docker Hub. Você pode puxar a imagem, se quiser. Ele disponibilizará a amostra localmente. A imagem está usando a versão alpina para que use apenas uma pequena pegada.
Como os contêineres no Docker são bastante populares, um Dockerfile também é incluído na pasta raiz do modelo. Não se esqueça do .dockerignore , onde alguns arquivos estão sendo ignorados para evitar que algum arquivo indesejado seja copiado antes da publicação.
Verifique se você está instalado no Docker.
O código está interrompendo a compactação GZIP no HTTPS. É bom usar esse código, especialmente se você usar o Kestrel. Caso contrário, se você usar o IIS, remova esse código específico encontrado no Startup.cs . Normalmente, o IIS oferece seu próprio módulo de compressão, que é mais executado.
Há alguma automação em relação aos Components disponíveis em ./clientapp/components/**/* . Todo o arquivo que começa com a base de palavras -chave será declarado global e o nome do componente a ser usado em qualquer lugar será definido no caso de cobra sem a palavra -chave base .
Exemplo: baseHelloWorld será registrado como hello-world e você poderá usá-lo no seu modelo VUE.
< template >
< div >
< hello-world /> works!
</ div >
</ template >Há um exemplo real dentro do projeto para o componente do cartão para cada página. O nome do componente é
baseCard.vue.
O CSS não é gerado enquanto você estiver no modo de desenvolvimento. Eles serão criados apenas quando você usar o comando dotnet publish ou como alternativa, você também poderá digitar o npm run build -- --prod que iniciará a produção de produção com a minificação e extração dos arquivos.
IMPORTANTE: Atualmente, o WebPack limpe toda a pasta wwwroot dentro do projeto .NET. Portanto, se você tiver arquivos estáticos, mova -os dentro da pasta ./clientApp/static/ .
Para ajudar a tornar o desenvolvimento mais rápido, fornecemos a instalação do elemento da biblioteca de componentes-UI. A documentação desta biblioteca pode ser fundada em seu site.
Ele pode ser removido normalmente no
main.jsse você não precisar.
