53 votes

Comment configurer ASP.NET Core + Vue.Js?

J'ai Besoin d'intégrer Vue.js certains ASP.NET Core MVC points de vue. J'ai choisi Vue.js plus d'autres alternatives, car il semble de plus simple: -"viens de l'ajouter via <script> balise" ils ont dit. Pas besoin d'apprendre gulp/grunt/webpack/browserify/etc.

Qui s'est avéré être faux. Lors de ma première tentative de gérer les dates, j'ai essayé quelques extensions comme vue-moment ou vue-datetime-picker, tiré de ce officielle organisée liste de choses super liées à Vue.js mais j'ai frappé un mur ici. Alors que le premier n'est pas obligatoire à l'aide de l' require() js syntaxe (¿CommonJS?), le second ne fonctionne pas sans elle. D'autres extensions arrive d' 'use babel' et imports/exports qui ECMAScript 6 qui doit être compilé. Ainsi, la plupart des vue.js des bibliothèques et des usinages en effet besoin d'un compilateur, en plus de la require() de la syntaxe, et tout ça à partir de l' node monde?

Comment dois-je configurer mon projet de travailler avec ASP.NET Core, MVC + Vue.js, dans une manière que je peux développer de nombreuses petites vue-vue d'applications à l'aide de plugins (que peut - require(stuff))?

73voto

Gerardo Grignoli Points 782

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

Je voulais utiliser Vue.JS parce que c'est plus simple que les solutions de rechange. Moins de cérémonie, boilerplates de moins en moins de, moins de code. Il est stigmatisé comme le Cadre Progressif... à Droite! mais seulement à un point. Vue.Js ne résout pas le Javascript problème de la fragmentation de l'écosystème avec des systèmes de compilation.

Donc, vous aurez à choisir un côté: vous avez besoin de Modules javascript et un système de construction?

Option 1: rester simple: Éviter le Js de modules et de systèmes de construction.

Raisons de suivre ce chemin:

  • Vous n'avez pas beaucoup de jours pour apprendre BEAUCOUP de choses. (la configuration de bundler, gnp+dépendances de package de l'enfer, ES6 trucs
  • Vous ne voulez pas faire une pointe sur une Seule Page-Application. L'incorporation Vue.js à l'intérieur de quelques pages HTML semble assez.
  • HTTP/2 est en train de devenir mainstream, donc bundlers comme Webpack ou Browserify fournira moins d'avantages, au moins sur la performance.
  • Finalement, ES6 Modules seront pris en charge directement dans le navigateur, de sorte que nous n'avons pas besoin de construire quoi que plus tard-javascript dans un navigateur compatible-javascript.

Vous permettra d'économiser beaucoup de jours par pas de passer du temps à apprendre des trucs, qui sera probablement obsolète dans quelques années.

Si vous suivez ce chemin, quelques recommandations:

  • Juste ajouter les librairies js à l'aide de l' <script> balise.
  • Seulement utiliser le navigateur Javascript prêt des bibliothèques. Quel que soit le code qui utilise require() ou l'UMD préfixe (function (root, factory) { nécessite l'installation de modules (par conséquent, ils ne sont pas navigateur prêt, sauf si vous configurez CommonJS). Js fichiers avec l' import/export des déclarations sont écrits en ES6 donc éviter de trop.
  • L'utilisation de Verdure à télécharger un navigateur prêt libs. Éviter de MNP (ce qui implique d'avoir un module de système en place).

Mise en garde: Vous ne serez pas en mesure d'utiliser avancé Vue.js des caractéristiques comme Fichier Unique de Composants ou d' vue-router, mais c'est ok. Vous aurez à faire quelques choses manuellement.

Option 2: Apprendre les Modules Javascript + de construire des systèmes.

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

Je vous recommande de passer un peu de temps à apprendre ce que JavaScript Modules. Puis apprendre à les construire et à les emballer: j'ai utilisé WebPack. Sa documentation n'est pas très grande, de sorte que ce qui a fonctionné pour moi a été de suivre son tutoriel étape par étape.

À ce stade, vous avez peut-être entendu que webpack dispose ÉGALEMENT d'une interface web-serveur avec Hot-Module-Reloading. C'est un serveur web pour les fichiers statiques pour être utilisés seulement pour le développement. Son avantage est que chaque fois que vous modifiez un JS module, le navigateur va automatiquement appliquer le changement sans actualisation. C'est un très beau, mais en option, fonction. Le problème: ce serveur web est en concurrence avec notre serveur web (Kestrel). Donc, si vous souhaitez essayer cette fonction au cours du développement d'utiliser le Webpack Asp.Net core Middleware fourni par Microsoft JavaScriptServices repo . Vous y trouverez la WebApplicationBasic modèle que j'utilise actuellement. J'ai disséqué il, retiré la plupart de ses parties, et en essayant de l'utiliser j'ai peu à peu compris ce que chaque partie était à l'origine pour.

Lors de l'utilisation de webpack vous utiliserez principalement 3 flux de travail:

  • Construit-dans le mode de développement: Crée d'énormes fichiers, facile pour le débogage. De l'utiliser conjointement avec la montre en mode' donc, chaque fois que vous modifiez un fichier, un nouveau Webpack construire est déclenchée.
  • Construire en mode de production: Crée de petits fichiers minifiés. Utile pour "dotnet publier'.
  • À l'aide de Webpack-web-server+Chaud-Module de Rechargement avec Webpack Asp.Net core Middleware alors votre application fonctionnera Webpack en arrière-plan, la construction, et de regarder les fichiers source pour les changements. La compilation de sortie n'est pas écrit sur le disque et n'a gardé en mémoire et servi via http. L' JavaScriptServices middleware transfère les demandes de Kestrel à Webpack-serveur web pour faire ce travail.

Quelle que soit webpack config vous pouvez aller avec, vous devez inclure la "vue-loader" dans votre webpack config. Vous pouvez vous inspirer en Vue de webpack-modèle simple.

Je n'ai pas parlé de tout ce que je voulais, mais ce sujet est trop vaste et j'ai besoin de revenir à code. Merci de laisser des commentaires.

20voto

Je suis en retard à la fête, mais maintenant, il est un modèle .Net de Base que vous pouvez créer à l'aide d'une seule commande. Sur une machine windows avec .Net de Base installé, il suffit de créer un dossier vide et dans ce dossier, exécutez cette commande pour afficher la liste des modèles disponibles

dotnet new

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

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

Et ce à l'échafaud une nouvelle Vue de l'app:

dotnet new vue

En millisecondes complète d'un nouveau Vue.js seule page web app est construit avec une de travail .Net de Base de back-end avec les contrôleurs, les points de vue, etc. C'est brillant. Il suffit d'ouvrir le projet est VS ou VS Code et vous êtes loin.

Il existe également des modèles pour Aurelia, Angulaire, le masquage et de Réagir! Vous pouvez construire tous et de comparer la façon dont chaque résout le même problème. L'angle d'un même côté serveur de pré-rendu de la boîte!

Je sais .Net de Base a un chemin à parcourir, mais il devient de plus en plus impressionnant de jour en jour!

10voto

n3n7 Points 116

Tout d'abord, un avertissement: je ne pouvais pas trouver quelque chose qui correspond vraiment ce dont j'avais besoin, j'ai donc mis ensemble une solution à partir de zéro, voir la fin

Vous vous demandez, y compris de Vue via l' <script> balise (dans ce cas, le CDN de construire). Cependant, vous avez également mentionné à l'aide de Babel et l'ES6 modules de fonction. Dans ce cas, je vous conseille d'utiliser Webpack pour le côté client de l'app, ce qui permettra de compiler vos ES6 avec Babel, vous permettent d'utiliser des modules et des composants, et de travailler avec un modèle! Vous bénéficiez également de chaud module de rechargement (modifier votre source et de voir les changements dans l'application client en temps réel!) et Webpack seront ensemble votre SPA en static appli HTML5.

L'officiel Vue.js docs point à leur propre Webpack modèle.

De sorte que vous pouvez exécuter le Webpack serveur de dev et de votre ASP.NET Core application de façon indépendante, si cela convient à vos besoins, mais il existe une meilleure solution qui rend le développement encore plus simplifié:

Microsoft open source JavaScriptServices vous permet d'exécuter des Node.js à partir de ASP.NET de Base, et ils ont quelques Webpack middleware qui intègre le Webpack serveur de dev dans votre application au cours de débogage.

Ils fournissent officiel de modèles Angulaire 2, et même un modèle étiqueté Vue.js mais la Vue modèle est juste l'officiel webpack modèle sans aucune intégration avec .NET; c'est juste comme le serveur autonome.

Je ne pouvais pas trouver les modèles qui fait cela pour Vue.js, j'ai donc monté un échantillon ASP.NET application de Base qui charge le Webpack dev middleware avec un Vue.js Webpack app. Lorsque l' .NET serveur de Base est en cours d'exécution dans le dev mode, vous pouvez modifier la Vue de la source, et les modifications seront prises en compte rapide de correctifs incrémentaux sans avoir à reconstruire l'ensemble de l'application. En mode de diffusion .NET de Base va utiliser la prédéfinis Webpack de sortie. Vous pouvez le trouver sur GitHub:

https://github.com/0xFireball/YetAnotherShrinker Le référentiel lié ci-dessus a une pleine application de démonstration qui utilise NancyFx, axios, Vue.js et Vue Matériel, et est une simple raccourcisseur d'URL. Si vous voulez étapes pour une configuration minimale qui peut être facilement ajouté à une application existante, consultez cet article de blog de la mine.

La divulgation obligatoire: j'ai écrit ce billet de blog.

5voto

Stanislav Points 31

Peut-être que quelqu'un aura trouvé cette information utile)

Voici quelques starter modèles que vous pouvez utiliser pour le projet rapide de l'installation.

Le premier vous donne multi-projets solution avec prédéfinies de l'architecture. Ce modèle de plus près à la réalisation de projets concrets que l'JavaScriptServices qui a déjà été mentionné ici. Il fournit une couche Domaine, Dépôt de la couche et etc. Notez que cela est générateur yeoman et il utilise des caractères d'imprimerie. https://github.com/vue-typed/generator-vue-net-core

Le deuxième, juste de projet sur github et il faut 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 en ce modèle mieux que dans le premier. Aussi, il a beaucoup de belles petites choses, comme certains filtres d'exception, que vous avez, le plus probable, sera toujours faire de toute façon )). Et si vous êtes un débutant, ce modèle sera pour vous un cadeau du ciel. Ce modèle recommandé sur les super-vue de la page. Voici le lien: https://github.com/mrellipse/toucan

3voto

SlowNinja Points 31

Vous pouvez essayer les étapes ci-dessous , ou en cas sur ce simple guide.

  1. Le programme d'installation du mécanisme national de prévention fichier de configuration ( package.json )

Ci-dessous est le mécanisme national de prévention paquet 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. Installer le package npm

Ouvrez l'invite de commande et accédez au dossier racine de votre application et installer le mécanisme national de prévention forfaits à partir de votre paquet.json à l'aide de la commande ‘npm install " sans les guillemets.

  1. Le Programme D'Installation Gulp

Une fois mnp paquet est installé, vous pouvez maintenant configurer le gulp fichier. Vous aurez besoin d'ajouter un nouvel élément appelé gulp fichier de configuration ( gulpfile.js ). Plus tard nous allons créer la vue js qui nous l'appellerons vueApp.js même avec le code ci-dessous. Le premier argument est le lieu où le public le répertoire de sortie et l'autre est le répertoire source pour plus d' les détails sur la 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éer la Vue fichier js

Sur votre asp.net web de base de projet d'application explorateur de solutions goto wwwroot et d'ajouter ‘js' dossier et si elle n'existe pas, alors ajouter encore une nouvelle nom du dossier ‘dist'. Maintenant, une fois que le dossier d'installation est terminée, ajouter un nouveau fichier javascript dans le ‘js' nom du dossier c'vueApp.js'.

  1. Commencer à coder dans votre vue fichier js

Vous pouvez maintenant commencer à coder, comme pour l'exemple ci-dessous nous seront d'affichage alerte pour indiquer que vue le 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 sur votre rasoir vue ou html

Ouvrez votre page de mise en page et l'envelopper le contenu de votre balise body avec un div et un id d'application. Nous allons utiliser l'application puisque c'est l'id de la balise, nous avons utilisé sur notre exemple de code à partir de l'étape 5. Cette application n'est pas obligatoire et vous pouvez changement sur votre nom de votre choix. Enfin sur l'application de la vue js de fichier ajouter la référence maintenant à la script. Assurez-vous de déplacer en dehors de la div app les scripts de référence pour prévenir 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. Exécuter gulp

Maintenant que nous avons réglé la vue js de la configuration et de l'appliquer à notre rasoir de vue, on aura besoin pour exécuter gulp à exécuter ce que nous avons mis en notre gulpfile. Comme dans l'étape 2 goto la racine de votre dossier et de la commande d'ouverture invite, puis d'exécuter la commande ‘npm exécuter dev' de nouveau sans l' les guillemets.

  1. Exécuter

Maintenant, pour la dernière étape exécuter votre asp.net core, mvc application et vérifier la la console de votre navigateur web. Vous devriez être capable de voir maintenant le message nous avons défini à partir de l'étape 5.

(Je l'ai écrit le guide sur le blog de référence chaque fois que j'ai peut-être besoin :D)

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X