Comment configurer ASP.NET Core + Vue.js ?

Question

Je dois intégrer Vue.js à certaines vues ASP.NET Core MVC. J'ai choisi Vue.js plutôt que d'autres alternatives parce qu'il semblait être plus simple - " il suffit de l'ajouter via un <script> étiquette ", ont-ils dit. Pas besoin d'apprendre Gulp/Grunt/Webpack/Browserify/etc.

Cela s'est avéré être faux. Lors de ma première tentative pour gérer les dates, j'ai essayé des extensions telles que vue-moment y vue-datetime-picker extrait de ce document officiel liste de choses géniales liées à Vue.js mais je me heurte à un mur ici. Alors que la première ne rend pas obligatoire l'utilisation de la require() JS (CommonJS ?), la seconde ne fonctionne pas sans elle. D'autres extensions se trouvent 'use babel' y imports / exports qui est ECMAScript 6 qui doit être compilé. Ainsi, la plupart des bibliothèques et des outils Vue.js ont en effet besoin d'un compilateur, en plus de l'application require() et tous ces trucs 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 applications Vue en utilisant des plugins Vue (qui peuvent require(stuff) ) ?

Answer 1

J'étais totalement perdue lorsque 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 le JavaScript .

Je voulais utiliser Vue.js parce que c'est plus simple que les autres solutions. Moins de cérémonies, moins de modèles, moins de code. C'est la marque de fabrique de Cadre progressif ... C'est vrai ! Mais seulement jusqu'à un certain point. Vue.js ne résout pas le problème de fragmentation de l'écosystème JavaScript avec les systèmes de construction.

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

Option 1 : rester simple : Évitez les modules JS et les systèmes de construction.

Les raisons de suivre cette voie :

• Vous n'avez pas beaucoup de jours pour apprendre A LOT de choses. (Configuration de bundler, enfer des dépendances de npm+package, trucs ES6).
• Vous ne voulez pas faire une application d'une seule page à bords perdus. Intégrer Vue.js dans quelques pages HTML semble suffisant.
• HTTP/2 est en train de se généraliser, de sorte que les bundlers comme Webpack ou Browserify offriront moins d'avantages, du moins en matière de performances.
• Finalement, Les modules ES6 seront pris en charge directement dans le navigateur, de sorte que nous n'aurons pas besoin de construire ce que l'on appelle les modules ES6. dernier site JavaScript est dans compatible avec les navigateurs JavaScript.

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

Si vous suivez cette voie, quelques recommandations :

• Il suffit d'ajouter les bibliothèques JS en utilisant le <script> étiquette.
• N'utilisez que des bibliothèques JavaScript compatibles avec les navigateurs. Le code qui utilise require() ou le préfixe UMD (function (root, factory) { nécessite la mise en place de modules (il n'est donc pas compatible avec les navigateurs à moins de mettre en place CommonJS). Les fichiers JS avec import / export sont écrites en ES6, évitez-les également.
• Utilisez Bower pour télécharger les librairies prêtes pour le navigateur. Évitez NPM (qui implique la mise en place d'un système de modules).

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

Option 2 : Apprendre les modules JavaScript + les systèmes de construction.

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

Je vous recommande de passer un peu de temps à apprendre ce que Les modules JavaScript sont . Ensuite, apprenez à les construire et à les emballer : J'ai utilisé Webpack. Sa documentation n'est pas géniale, donc ce qui a fonctionné pour moi, c'est de suivre ses instructions. tutoriel étape par étape.

À ce stade, vous avez peut-être entendu dire que Webpack ALSO dispose d'un serveur web intégré avec "rechargement à chaud des modules". Il s'agit d'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 appliquera automatiquement la modification sans rafraîchissement. Il s'agit d'une fonctionnalité très intéressante, mais facultative. Le problème : ce serveur web intégré est en concurrence avec notre serveur web (Kestrel). Donc, si vous voulez essayer cette fonctionnalité pendant le développement, utilisez la fonction Webpack ASP.NET Core intergiciel fourni par Microsoft Repo JavaScriptServices . Vous y trouverez le Modèle de WebApplicationBasic que j'utilise actuellement. Je l'ai disséqué, j'ai retiré la plupart de ses pièces et en essayant de l'utiliser, j'ai lentement compris à quoi servait chaque pièce à l'origine.

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

• Mode de développement intégré : Crée des fichiers volumineux, faciles à déboguer. Utilisez-le avec "watch-mode" pour que chaque fois que vous modifiez un fichier, une nouvelle construction 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 à chaud des modules avec le middleware ASP.NET Core de Webpack signifie que votre application exécutera Webpack en arrière-plan, construira et surveillera les fichiers sources pour détecter les modifications. Le résultat de la compilation n'est pas écrit sur le disque ; il est uniquement conservé en mémoire et servi via HTTP. Le middleware JavaScriptServices transmet les requêtes de Kestrel au serveur web de Webpack pour que cela fonctionne.

Quelle que soit la configuration Webpack que vous choisissez, vous devez inclure "vue-loader" dans votre configuration Webpack. Vous pouvez vous inspirer de Le modèle webpack-simple de Vue .

Je n'ai pas couvert tout ce que je voulais, mais ce sujet est trop vaste et je dois retourner au codage. Veuillez laisser vos commentaires.

Answer 2

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

dotnet new

Si vous ne disposez pas de tous les modèles, il vous suffit d'exécuter cette opération pour installer les modèles de SPA :

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

Et ceci pour échafauder une nouvelle application Vue :

dotnet new vue

En quelques millisecondes, une nouvelle application web complète Vue.js à une seule page est construite avec un back-end .NET Core fonctionnel avec contrôleurs, vues, etc. C'est génial. Il suffit d'ouvrir le projet dans VS ou VS Code et le tour est joué.

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

Je sais que .NET Core a encore du chemin à faire mais il devient de plus en plus génial chaque jour !

Answer 3

Tout d'abord, un avertissement : je n'ai rien trouvé qui corresponde vraiment à ce dont j'avais besoin, alors j'ai créé une solution de toutes pièces. Voir la fin.

Vous demandez l'inclusion de Vue via le <script> (dans ce cas, la construction CDN). Cependant, vous mentionnez également l'utilisation de Babel et de la fonctionnalité des modules ES6. Dans ce cas, je vous recommande 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 du rechargement à chaud des modules (éditez votre source et voyez les changements dans l'application cliente en temps réel !) et Webpack regroupera votre SPA dans une application HTML5 statique.

La documentation officielle de Vue.js indique que leur propre modèle Webpack .

Alors vous peut Vous pouvez exécuter le serveur de développement Webpack et votre application ASP.NET Core indépendamment, si cela vous convient, mais il existe une meilleure solution qui simplifie encore plus le développement :

Le logiciel libre de Microsoft JavaScriptServices vous permet d'exécuter Node.js à partir d'ASP.NET Core, et ils disposent d'un intergiciel Webpack qui intègre le serveur de développement Webpack dans votre application pendant les constructions de débogage.

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

Je n'ai pas trouvé de modèle qui fasse cela pour Vue.js, alors j'ai créé un exemple d'application ASP.NET Core qui charge le middleware Webpack dev avec une application Vue.js Webpack. Lorsque le serveur .NET Core fonctionne en mode dev, vous pouvez modifier la source de Vue, et les changements seront reflétés avec des correctifs incrémentiels rapides sans avoir besoin de reconstruire l'application entière. En mode release, .NET Core utilisera la sortie Webpack préconstruite. Vous pouvez le trouver sur GitHub :

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

Le dépôt lié ci-dessus a une application complète de démonstration qui utilise NancyFx, axios, Vue.js, et Vue Material, et est un simple raccourcisseur d'URL. Si vous souhaitez des étapes pour une configuration plus minimale qui peut facilement être ajoutée à une application existante, consultez le site suivant cet article de mon blog .

Divulgation obligatoire : j'ai écrit cet article de blog.

Answer 4

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

Voici quelques modèles de démarrage que vous pouvez utiliser pour une mise en place rapide du projet.

Le premier vous donne une solution multi-projets avec une certaine architecture prédéfinie. Ce modèle correspond davantage 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 c'est regrettable, mais j'ai trouvé la structure de ce modèle meilleure que celle du premier. De plus, il contient beaucoup de petites choses intéressantes, comme des filtres d'exception, que vous ferez probablement de toute façon. Et si vous êtes un 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

Answer 5

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

1. Configurer 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"
  }
}

2. Installer le paquet npm

Ouvrez une invite de commande et allez dans le dossier racine de votre application et installez l'ensemble des paquets npm de votre fichier package.json en utilisant la commande npm install', sans les guillemets.

3. Configurer 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 allons créer le Vue JS que nous appellerons vueApp.js avec le code ci-dessous. Le premier argument est le répertoire public et l'autre est le répertoire de la source. Pour plus de détails sur Webpack, cliquez aquí .

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

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

elixir(function (mix) {
    mix.webpack('vueApp.js', 'wwwroot/js/dist', 'wwwroot/js');
});

4. Créer le fichier Vue JS

Dans l'explorateur de solutions de votre projet d'application web ASP.NET Core, allez dans wwwroot et ajoutez un dossier 'js' et s'il n'existe pas, ajoutez un nouveau dossier nommé 'dist'. dossier nommé 'dist'. Maintenant, une fois que la configuration du dossier est terminée, ajoutez un nouveau fichier JavaScript dans le dossier 'js'. fichier JavaScript dans le dossier 'js' nommé 'vueApp.js'.

5. 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);
        }
    });

6. Appliquer Vue JS à votre vue Razor ou à votre HTML

Ouvrez votre page de mise en page et intégrez le contenu de votre balise body dans un div dont l'identifiant est "app". Nous utiliserons 'app' car il s'agit de 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 vous pouvez le changer pour le nom de votre choix. Enfin, ajoutez une référence au fichier Vue JS. Veillez à déplacer les références script en dehors de la division 'app' pour éviter toute erreur.

<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>

7. Exécuter Gulp

Maintenant que nous avons établi la configuration de Vue.js et l'avons appliquée à notre vue vue Razor, nous allons devoir lancer Gulp pour exécuter ce que nous avons défini dans notre gulpfile. Comme à l'étape 2, allez dans votre dossier racine et ouvrez une invite de commande. commande, puis exécutez la commande 'npm run dev', sans les guillemets. guillemets.

8. Exécuter

Maintenant, pour l'étape finale, exécutez votre application ASP.NET Core MVC et consultez la console de votre navigateur web. Vous devriez maintenant être en mesure de voir le message que nous avons défini à l'étape 5.

(J'ai écrit le guide dans l'article de blog pour m'y référer à chaque fois que j'en aurai besoin :D)