Comment configurer ASP.NET Core + Vue.Js?

je suis en retard à la fête mais maintenant il y a un modèle disponible pour .net Core que vous pouvez construire avec une seule commande. Sur une fenêtre windows avec .net Core installé il suffit de créer un dossier vide et dans ce dossier exécuter cette commande pour afficher une liste de 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 une nouvelle Vue complète.l'application web js single page est construite avec un noyau de travail .net back end avec des contrôleurs, des vues, etc. C'est brillant. Il suffit d'ouvrir le projet est VS ou VS Code et vous êtes absent.

il y a aussi des gabarits pour Aurelia, Angular, Knockout et React! Vous pouvez les construire tous et comparer comment chacun résout le même problème. L'angulaire fait même pré-rendu côté serveur hors de la boîte!

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

tout D'abord, un avertissement: je n'ai pas pu trouver quoi que ce soit qui corresponde vraiment à ce dont j'avais besoin, donc j'ai mis en place une solution à partir de zéro, voir la fin

vous demandez l'inclusion de Vue via le <script> étiquette (dans ce cas, la construction CDN). Cependant,vous mentionnez également L'utilisation de Babel et de la fonctionnalité ES6 modules. Dans ce cas, je 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 obtenez également le module chaud recharger (éditer votre source et voir les changements dans l'application client en temps réel!) et Webpack regroupera votre SPA dans une application HTML5 statique.

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

alors vous 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 permet d'exécuter le noeud.js de ASP.NET Core, et ils ont certains middleware Webpack qui intègre le serveur webpack dev dans votre application pendant les constructions de débogage.

ils fournissent des gabarits officiels pour L'angle 2, et même un gabarit étiqueté Vue.js, mais le modèle Vue n'est que le modèle officiel de webpack sans aucune intégration avec .NET; c'est exactement comme le serveur autonome.

Je n'ai pas pu trouver de gabarits ceci pour Vue.js, j'ai fait un échantillon. ASP.NET application de base qui charge le webpack dev middleware avec une Vue.js webpack app. Lorsque le serveur .net Core tourne en mode dev, vous pouvez éditer la source de L'Evi, et les modifications seront reflétées 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écompilée. Vous pouvez le trouver sur GitHub:

https://github.com/0xFireball/YetAnotherShrinker Le dépôt relié ci-dessus a une démo d'application complète 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, découvrez ce blog de mine.

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

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

1. configuration du fichier de configuration npm (paquet.json)

voici le paquet npm que j'utiliserai.

{
  "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. installez le paquet npm

Ouvrez l'invite de commande et accédez au dossier racine de votre application et installez les paquets npm définis à partir de votre paquet.json utilisant la commande "npm install’ sans citation.

3. Configuration Gulp

une fois le paquet npm installé, vous pouvez maintenant configurer le fichier gulfp. Vous il faudra ajouter un nouvel élément appelé gulffile ( gulffile).js ). Plus tard, nous créerons la vue js que nous appellerons vueApp.js même avec le code ci-dessous. Le premier argument est que le public le répertoire de sortie et l'autre est le répertoire source pour plus d' détails sur le clic de webpack ici.

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 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 la configuration du dossier terminée, ajoutez un nouveau fichier javascript dans le ‘js’ nom du dossier ‘vueApp.js'.

5. démarrage du codage dans votre fichier vue js

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

ouvrez votre page de mise en page et enveloppez le contenu de votre étiquette corporelle avec un div et un id d'application. Nous utiliserons app puisque c'est la balise id que nous avons utilisée sur notre exemple de code de l'étape 5. Cette application n'est pas obligatoire et vous pouvez changez sur votre nom désiré. Enfin sur l'application de la vue js de fichier ajouter référence maintenant à la script. Assurez-vous de sortir de l'application div la référence des scripts 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>

7. Exécuter gulp

maintenant que nous avons configuré la configuration de vue js et l'appliquons à notre razor view nous aurons besoin de lancer gulfp pour exécuter ce que nous avons mis en notre gulffile. Comme à l'étape 2, Allez dans votre dossier racine et ouvrez la commande invite puis exécute la commande ‘npm run dev’ à nouveau sans la citation.

8. Exécuter

pour la dernière étape, lancez votre asp.net application MVC de base et de vérifier le 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)

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

voici quelques modèles de démarrage que vous pouvez utiliser pour la configuration rapide d'un projet.

la première offre une solution multi-projets avec une architecture prédéfinie. Ce modèle est plus proche des projets du monde réel que les JavaScriptServices qui ont déjà été mentionnés ici. Il fournit la couche domaine, la couche dépôt et etc. Notez que c'est le générateur de yeoman et il utilise tapuscrit. 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. En outre, il a beaucoup de belles petites choses comme certains filtres d'exception, que vous, très probablement, fera encore de toute façon )). Et si vous êtes un débutant, ce modèle sera pour vous un aubaine. Ce modèle recommandé sur la page awesome-vue. Voici le lien: https://github.com/mrellipse/toucan

j'ai passé beaucoup de temps à apprendre à utiliser Browserify et Babel pour pouvoir configurer mes propres environnements ES6. Cependant, quand il s'agit de L'utilisation de Vue je suis assez heureux d'aller avec les gabarits par défaut, qui sont mieux accessibles en installant Vue-CLI. Vous pouvez choisir entre Browserify et Webpack, et soit des configurations simples ou complètes avec linting, des tests unitaires et des composants de fichiers uniques en utilisant la version d'exécution seulement.

Ça fonctionne, tout simplement.

cette question est un peu vieille mais..

j'ai un petit exemple de projet Github qui utilise aspx et vue.js , il utilise des fils (ou mnp) que le gestionnaire de package et Webpack.

Il n'est pas .net de base... mais la façon de l'utiliser sera la même... Il pourrait vous aider à démarrer.

l'étrange structure de fichier est parce qu'elle tourne tout sur notre système Sitecore CMS

j'Espère que ça aide.