web-dev-qa-db-fra.com

Comment configurer ASP.NET Core + Vue.js?

J'ai besoin d'intégrer Vue.js avec certaines vues ASP.NET Core MVC. J'ai choisi Vue.js plutôt que d'autres solutions, car cela semblait plus simple - " ajoutez-le simplement via une balise <script>", ont-ils déclaré . Pas besoin d'apprendre Gulp/Grunt/Webpack/Browserify/etc.

Cela s'est avéré être faux. Lors de ma première tentative de gestion des dates, j’ai essayé des extensions telles que vue-moment et vue-datetime-picker , tiré de cet officiel liste organisée des choses impressionnantes liées à Vue.js mais je frappe un mur ici. Alors que le premier n'impose pas l'utilisation de la syntaxe require() JS (CommonJS?), Le second ne fonctionne pas sans elle. D'autres extensions arrivent à 'use babel' Et à imports/exports, qui est ECMAScript 6 et doit être compilé. Ainsi, la plupart des bibliothèques et outillages Vue.js ont en effet besoin d’un compilateur, ainsi que de la syntaxe require(), et de tous ces éléments du monde Node?

Comment dois-je configurer mon projet pour qu'il fonctionne avec ASP.NET Core MVC + Vue.js, de manière à pouvoir développer de nombreuses petites Vue applications à l'aide de Vue = plugins (que peut require(stuff))?

javascriptasp.net-coreasp.net-core-mvcvue.js
49
Gerardo Grignoli

J'étais totalement perdu quand j'ai posé la question ci-dessus. J'ai passé quelques jours et je n'ai toujours pas une image complète. Ce dont je suis à peu près sûr, c'est que 2016 est une année difficile pour apprendre JavaScript .

Je voulais utiliser Vue.js parce que c’est plus simple que les alternatives. Moins de cérémonie, moins de passe-partout, moins de code. C'est la marque Cadre progressif ... D'accord! Mais seulement à un point. Vue.js ne résout pas le problème de fragmentation de l'écosystème JavaScript avec les systèmes de génération.

Donc, vous devrez choisir un côté: avez-vous besoin de modules JavaScript et d'un système de construction?

Option 1: restez simple: évitez les modules JS et construisez des systèmes.

Raisons pour suivre ce chemin:

  • Vous n'avez pas beaucoup de jours pour apprendre BEAUCOUP de choses. (Configuration de l'envoyeur, des dépendances de paquet npm +, des trucs ES6.)
  • Vous ne voulez pas créer une application à page unique qui saigne. Intégrer Vue.js dans quelques pages HTML semble suffisant.
  • HTTP/2 est en train de devenir la norme, donc les groupes comme Webpack ou Browserify offriront moins d'avantages, du moins en termes de performances.
  • éventuellement Les modules ES6 seront supportés directement dans le navigateur, nous n'aurons donc pas besoin de construire quel que soit le dernier JavaScript est dans compatible avec le navigateur JavaScript.

Vous ne gagnerez pas beaucoup de jours en ne passant pas de temps à apprendre des choses qui seront probablement obsolètes dans quelques années.

Si vous suivez ce chemin, quelques recommandations:

  • Ajoutez simplement des bibliothèques JS en utilisant la balise <script>.
  • Utilisez uniquement des bibliothèques JavaScript prêtes pour le navigateur. Le code qui utilise require() ou le préfixe UMD (function (root, factory) { Nécessite la configuration de modules (par conséquent, il n'est pas prêt pour le navigateur, à moins que vous ne configuriez CommonJS). Les fichiers JS avec les instructions import/export sont écrits dans ES6, donc évitez-les également.
  • Utilisez Bower pour télécharger des bibliothèques prêtes pour le navigateur. Évitez les MNP (ce qui implique d'avoir un système de modules en place).

Mise en garde: Vous ne pourrez pas utiliser les fonctionnalités avancées de Vue.js telles que composants à fichier unique ou Vue Routeur, mais cela ne pose pas de problème. Vous devrez effectuer une quelques choses manuellement.

Option 2: Apprendre les modules JavaScript + construire des systèmes.

Préparez quelques jours pour apprendre et non pas du code. Je vais seulement expliquer brièvement comment Webpack a fonctionné pour moi. Browserify fonctionne également, mais je ne l'ai pas essayé.

Je vous recommande de passer un peu de temps à apprendre quoi les modules JavaScript sont . Puis apprenez à les construire et à les emballer: j'ai utilisé Webpack. Sa documentation est médiocre, donc ce qui a fonctionné pour moi a été de suivre son tutoriel étape par étape.

À ce stade, vous avez peut-être entendu dire que Webpack a également un serveur Web intégré avec "rechargement de module à chaud". Ceci est un serveur Web pour les fichiers statiques à utiliser uniquement pour le développement. Son avantage est que chaque fois que vous modifiez un module JS, le navigateur applique automatiquement la modification sans actualisation. C'est une fonctionnalité très agréable, mais facultative. Le problème: ce serveur Web intégré est en concurrence avec notre serveur Web (Kestrel). Par conséquent, si vous souhaitez essayer cette fonctionnalité au cours du développement, utilisez le middleware Webpack ASP.NET Core fourni par référentiel JavaScriptServices de Microsoft. Vous y trouverez le modèle WebApplicationBasic que j'utilise actuellement. Je l'ai disséqué, enlevé la plupart de ses parties et en essayant de l'utiliser, j'ai lentement compris à quoi chaque partie était destinée.

Lorsque vous utilisez Webpack, vous utiliserez principalement 3 flux de travail:

  • Mode de développement intégré: crée de gros fichiers, faciles à déboguer. Utilisez-le avec le "mode veille" pour que chaque fois que vous modifiez un fichier, une nouvelle version de Webpack soit déclenchée.
  • Mode de production intégré: crée de petits fichiers minifiés. Utile pour ‘dotnet publish’.
  • L'utilisation du serveur Web de Webpack et du rechargement de module actif avec le middleware Webpack ASP.NET Core signifie que votre application exécutera Webpack en arrière-plan, créera et surveillera les fichiers source pour vérifier les modifications. La sortie de la compilation n'est pas écrite sur le disque, mais uniquement conservée en mémoire et servie via HTTP. Le middleware JavaScriptServices transmet les demandes de Kestrel au serveur Web de Webpack pour que cela fonctionne.

Quelle que soit la configuration Webpack utilisée, vous devez inclure ‘vue-loader’ dans votre configuration Webpack. Vous pouvez être inspiré par modèle de webpack-simple de Vue .

Je n’ai pas traité de tout ce que je voulais, mais ce sujet est trop vaste et je dois revenir au codage. S'il vous plaît laissez des commentaires.

69
Gerardo Grignoli

Je suis en retard pour la fête, mais il existe maintenant un modèle disponible pour .NET Core que vous pouvez créer avec une seule commande. Sur un ordinateur Windows avec .NET Core installé, créez simplement un dossier vide. Dans ce dossier, exécutez cette commande pour afficher une liste des modèles disponibles:

dotnet new

Si vous n'avez pas tous les modèles, il vous suffit de lancer ceci pour installer les modèles SPA:

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

Et ceci pour échafauder une nouvelle application Vue:

dotnet new vue

En millisecondes, une nouvelle application Web d'une page complète Vue.js est construite avec un back-end .NET Core fonctionnel, avec des contrôleurs, des vues, etc. C'est génial. Ouvrez simplement le projet dans VS ou VS Code et vous êtes absent.

Il existe également des modèles pour Aurelia, Angular, Knockout et React! Vous pouvez tous les construire et comparer comment chacun résout le même problème. Le Angular permet même la pré-restitution côté serveur!

Je sais que .NET Core a du chemin à faire, mais il devient de plus en plus impressionnant de jour en jour!

17
Norbert Norbertson

Tout d'abord, une clause de non-responsabilité: je ne trouvais rien qui corresponde vraiment à mes besoins, j'ai donc créé une solution à partir de rien. Voir la fin.

Vous demandez à inclure Vue via le <script> tag (dans ce cas, la construction du CDN). Cependant, vous mentionnez également l'utilisation de Babel et de la fonctionnalité des modules ES6. Dans ce cas, je vous recommanderais d'utiliser Webpack pour l'application côté client, qui compilera votre ES6 avec Babel, vous permettra d'utiliser des modules et des composants, et de travailler avec un modèle! Vous bénéficiez également d'un rechargement de module à chaud (modifiez votre source et consultez les modifications apportées dans l'application cliente en temps réel!) Et Webpack regroupera votre SPA dans une application HTML5 statique.

Les documents officiels de Vue.js pointent vers leur propre modèle Webpack .

Ainsi, vous pouvez exécutez le serveur de développement Webpack et votre application ASP.NET Core indépendamment, si cela répond à vos besoins, mais il existe une meilleure solution qui rend le développement encore plus simple:

Le code source ouvert de Microsoft JavaScriptServices vous permet d'exécuter Node.js à partir d'ASP.NET Core. Certains middleware Webpack intègrent le serveur de développement Webpack dans votre application lors des générations de débogage.

Ils fournissent des modèles officiels pour Angular 2, et même un modèle nommé Vue.js, mais le modèle Vue est simplement le modèle Webpack officiel, sans aucune intégration avec. NET, c'est comme le serveur autonome.

Je ne pouvais trouver aucun modèle ayant fait cela pour Vue.js. J'ai donc créé un exemple d'application ASP.NET Core qui charge le middleware de développement Webpack avec une application Vue.js Webpack. Lorsque le serveur .NET Core est exécuté en mode dev, vous pouvez modifier la source Vue). Les modifications seront reflétées par des correctifs incrémentiels rapides sans qu'il soit nécessaire de reconstruire toute l'application. En mode de publication, .NET Core utilisera la sortie prédéfinie de Webpack, que vous pouvez trouver sur GitHub:

https://github.com/0xFireball/YetAnotherShrinker

Le référentiel lié ci-dessus contient une démonstration complète de l'application qui utilise NancyFx, axios, Vue.js et Vue Matériau. Il s'agit d'un simple raccourci d'URL. Si vous souhaitez effectuer les étapes d'une configuration plus minimale facilement être ajouté à une application existante, consultez ce blog de moi .

Divulgation obligatoire: j'ai écrit ce blog.

9
n3n7

Peut-être que quelqu'un trouvera cette information utile.

Voici quelques modèles de départ que vous pouvez utiliser pour une configuration rapide du projet.

Le premier vous donne une solution multi-projet avec une architecture prédéfinie. Ce modèle correspond mieux aux projets du monde réel que la solution JavaScriptServices déjà mentionnée ici. Il fournit une couche de domaine, une couche de référentiel, etc. Notez qu'il s'agit d'un générateur Yeoman et qu'il utilise TypeScript. https://github.com/vue-typed/generator-vue-net-core

Le second est juste un projet sur GitHub et vous devriez le cloner si vous voulez l’utiliser. Ce n'est pas un générateur Yeoman et je pense que cela est regrettable, mais j'ai trouvé la structure de ce modèle meilleure que dans le premier. En outre, il a beaucoup de jolies petites choses comme des filtres d'exception, que vous ferez probablement de toute façon. Et si vous êtes débutant, ce modèle sera une aubaine. Ce modèle est recommandé sur la page awesome-vue. Voici le lien: https://github.com/mrellipse/toucan

4
Stanislav

Vous pouvez essayer les étapes ci-dessous, à partir de ce simple guide .

  1. Configurez le fichier de configuration npm (package.json)

Voici le paquet npm que je vais utiliser:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "laravel-elixir": "^6.0.0-14",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3",
    "vuex": "^2.1.1"
  }
}
  1. Installez le paquet npm

Ouvrez une invite de commande et accédez au dossier racine de votre application, puis installez les packages npm définis à partir de votre fichier package.json à l’aide de la commande ‘npm install’, sans les guillemets.

  1. Mettre en place Gulp

Une fois le paquet npm installé, vous pouvez maintenant configurer le fichier Gulp. Vous devrez ajouter un fichier de configuration Gulp (gulpfile.js). Plus tard, nous créerons le Vue JS que nous appellerons vueApp.js avec le code ci-dessous. Le premier argument est le répertoire de sortie public et l’autre, le répertoire source. Pour plus de détails, consultez. Webpack cliquez ici .

var elixir = require('laravel-elixir');



require('laravel-elixir-vue-2');

elixir(function (mix) {
    mix.webpack('vueApp.js', 'wwwroot/js/dist', 'wwwroot/js');
});
  1. Créez le fichier Vue JS

Dans l’explorateur de votre solution de projet d’application Web ASP.NET Core, accédez à wwwroot et ajoutez un dossier "js". S'il n’existe pas, ajoutez à nouveau un nouveau dossier nommé "dist". Une fois la configuration du dossier terminée, ajoutez un nouveau fichier JavaScript dans le dossier "js" nommé "vueApp.js".

  1. Commencez à coder dans votre fichier Vue JS

Vous pouvez maintenant commencer à coder. Dans l'exemple ci-dessous, nous allons afficher une alerte pour indiquer que Vue.js est en cours d'exécution.

import Vue from 'vue'

new Vue(
    {
        el: '#app',
        data() {
            message:'hello world using Vue.js on ASP.NET Core MVC.'
        },
        mounted() {
            console.log(this.message);
        }
    });
  1. Appliquer Vue JS à votre vue Razor ou HTML

Ouvrez votre page de présentation et enveloppez le contenu de votre balise body avec un div et un identifiant "app". Nous allons utiliser ‘app’ car c ’est la balise id que nous avons utilisée dans notre exemple de code de l’étape 5. Le nom‘ app ’n’est pas obligatoire et vous pouvez le remplacer par le nom de votre choix. Enfin, ajoutez une référence au fichier JS Vue. Assurez-vous de déplacer les références de script à l’extérieur de l’application pour éviter les erreurs.

<body>

<div id="app">

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Project.Payrole</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
                </ul>
                @await Html.PartialAsync("_LoginPartial")
            </div>
        </div>
    </nav>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; 2017 - Project.Payrole</p>
        </footer>
    </div>

</div>

<environment names="Development">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
</environment>

<environment names="Staging,Production">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
            asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
            asp-fallback-test="window.jQuery"
            crossorigin="anonymous"
            integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
    </script>
    <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
            asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
            crossorigin="anonymous"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
    </script>
    <script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>

<script src="~/js/dist/vueApp.js" asp-append-version="true"></script>



    @RenderSection("Scripts", required: false)
</body>
  1. Run Gulp

Maintenant que nous avons configuré la configuration Vue.js et que nous l’avons appliquée à notre vue Razor, nous devrons exécuter Gulp pour exécuter ce que nous avons défini dans notre fichier gulp. Comme à l’étape 2, accédez au dossier racine et ouvrez une invite de commande, puis exécutez la commande ‘npm run dev’, toujours sans les guillemets.

  1. Courir

Maintenant, pour la dernière étape, exécutez votre application ASP.NET Core MVC et vérifiez la console de votre navigateur Web. Vous devriez maintenant pouvoir voir le message que nous avons défini à l'étape 5.

(J'ai écrit le guide dans l'article du blog pour référence chaque fois que j'en ai besoin: D)

3
SlowNinja

J'ai créé ce modèle qui combine . NET MVC avec Vue.js . Vous pouvez utiliser l’intégralité de l’écosystème Vue), mais si vous ne le souhaitez pas sur une page, vous pouvez simplement vous désabonner.

GitHub: https://github.com/danijelh/aspnetcore-vue-TypeScript-template

Moyen: https://medium.com/@danijelhdev/multi-page-net-core-with-vue-js-TypeScript-vue-de-vue-de-volteuse-bulma-assurance-et-webpack-4-efc7de83fea4

Vous pouvez l'utiliser comme exemple ou comme point de départ.

2
Danijel

Le meilleur tutoriel pas à pas pour l'intégration de Vue.js à ASP.NET Core est donné ici:

https://ourtechroom.com/tech/integrating-vuejs-in-aspnetcore-application/

J'ai posté ici un exemple de projet GitHub:

https://github.com/Diwas777/integrating-vue-with-asp.net-core-project

2
Diwas Poudel

Moi aussi, je suis en retard pour cette fête mais je pense que beaucoup de choses ont changé au cours de la dernière année ou moins. Étant donné que les spécifications de module ES6 (ainsi que les modules dynamiques) prennent désormais en charge un navigateur relativement étendu (voir CanIUse ), les options permettant d'intégrer Vue.js dans les vues ASP.NET MVC Razor sont désormais bien meilleures. . Une chose que j’ai apprise sur Vue.js est qu’il vaut mieux abandonner les idées préconçues sur les "plug-ins", au sens jQuery. Si vous êtes comme moi et venez du monde jQuery (no Angular ou React expérience)), vous devez s'asseoir et apprendre le modèle de composant de Vue (même les SFC; bien que vous n'en ayez pas besoin dans ce cas, ils aident à définir la situation dans son ensemble). Cela nécessite une bonne compréhension de ES6 (ECMAScript 2015).

L’approche itérative et incrémentale est la suivante: si vous souhaitez commencer à apprendre et à exploiter l’un des plus grands atouts de Vue (facilité de développement piloté par les composants (CDD)), ajoutez simplement la version "Full" (voir guide ) dans la balise de script. À l'aide de la syntaxe de module ES6 (import/export), vous pouvez créer votre propre bibliothèque de composants qui peuvent être connectés n'importe où. pas de Webpack ou de transpiling requis. C’est vraiment un développement formidable, car vous pouvez utiliser Vue.js en appliquant les meilleures pratiques de composant, sans prendre en charge une courbe d’apprentissage (coûteuse) en ajoutant Webpack et Babel à votre projet .NET. Et, en prime, lorsque vous aurez besoin d'améliorer votre jeu avec des outils et des flux de travail modernes (NPM, Webpack, tests, HMR, Code VS, etc.), bon nombre de vos composants sont testés et prêts à l'emploi.

En gros, vous construisez et attachez des instances root Vue instances (alias Vue)) à des éléments du DOM. Une fois que vous comprenez que tout est un composant, vous gagnez en confiance. creuser dans des packages open-source tels que vue-moment et vue-datetime-picker, et les importer via la syntaxe du module ou en tirer profit pour les intégrer à vos propres composants personnalisés.

1
Mark Dalsaso

Cette question est un peu vieille mais ..

J'ai un petit exemple de projet sur GitHub qui utilise ASP.NET et Vue.js. Il utilise Yarn (ou npm) en tant que gestionnaire de paquets et Webpack.

Ce n'est pas .NET Core, mais la façon de l'utiliser sera la même. Cela pourrait vous aider à démarrer.

La structure de fichier étrange est due au fait qu’il s’exécute sur notre système Sitecore CMS.

J'espère que ça aide.

0
CodeHacker

J'ai passé beaucoup de temps à apprendre à utiliser Browserify et Babel afin de pouvoir configurer mes propres environnements ES6. Cependant, quand il s’agit d’utiliser Vue, je suis assez content d’utiliser les modèles par défaut, qui sont mieux accessibles en installant Vue-CLI . Vous pouvez choisir entre Browserify et Webpack, et des configurations simples ou complètes avec linting, des tests unitaires et des composants à fichier unique en utilisant la version d'exécution uniquement.

Ça fonctionne.

0
blues_driven