web-dev-qa-db-fra.com

comment intégrer ASP.NET Core 2.1 avec Vue CLI 3?

J'ai essayé de créer un nouveau projet en utilisant le nouveau Vue CLI 3 avec ASP.Net Core web. Je peux utiliser dotnet new pour créer un nouveau projet Web vierge et utiliser vue create pour créer un nouveau modèle Vue.js Hello World mais je ne peux pas pour la vie de les faire travailler ensemble.

8
bCliks

Ça devrait être assez simple

  • Créer un nouveau projet dotnet
  • Créez un dossier dans la solution dotnet. Par exemple, VueApp, ClientApp ou quelque chose.
  • Échafaudez un nouveau projet Vue à l'intérieur de ce dossier en utilisant Vue cli.
  • Modifiez le répertoire de sortie pour pointer vers quelque chose comme "../../wwwroot/dist"
  • Créez votre application. Notez cependant que si vous construisez pour le développement ou la production, la structure de sortie sera différente.
  • Dans ton _Layout.cshtml ou Index.cshtml, quelle que soit la manière dont vous souhaitez l'organiser, référencez les fichiers générés.
  • Ajouter <div id="app"></div> Dans votre .cshtml.
  • Vous avez terminé, profitez-en.
12
Danijel

J'ai écrit un tutoriel détaillé disponible sur Medium .

Vous pouvez utiliser Microsoft Microsoft.AspNetCore.SpaServices Paquet NuGet pour spécifier le dossier SpaStaticFiles au lieu de copier l'application cliente sur build vers wwwroot et ignorer les fichiers * .cshtml et utiliser directement vue index.html fichier.

Vous pouvez également installer VueCliMiddleware NuGet pour exécuter le processus npm avec l'application client à l'aide de Vue CLI 3.0 lorsque votre application .NET démarre.

15
Libor Pansky