Utilisation de VueJS dans un projet ASP

Question

En cours de développement d'un site ASP MVC. Certaines sections du site utiliseront VueJS pour afficher une liste, des formulaires, etc. La configuration du projet est Bower, Grunt, projet ASP C# standard utilisant TypeScript.

C'est la première fois que j'utilise Vue, et les choses simples sont assez avancées. Configuration d'une page avec un formulaire, obtention de données à partir d'un WebService, etc.

Mon problème/question est, quoi, et comment obtenir la meilleure configuration, pour utiliser Single File Components (Vue) dans mes fichiers de vue cshtml . Donc, disons que j'ai une section sur mon site, où je veux afficher les commandes de l'utilisateur. Mise en page, navigation, etc est configuré par mon code ASP existant. J'ai un ViewPage de CSHTML pour la page courante, assez vanille:

@inherits MyViewPage<MyViewModel> 
@{ 
    Layout = "~/Views/layout.cshtml"; 
} 

<div id"app"> 

</div> 

Thats it pour la page de vue excisting. Dans cette page, je souhaite inclure un composant Vue Single File.

Auparavant, j'avais le balisage directement dans la page CSHTML, qui fonctionne bien. Mais quand je veux utiliser Vue-router, il devient un problème pour maintenir les différentes vues. Donc je devrais déplacer le balisage dans un composant.

Ceci est la configuration de base;

const page1 = { template: '<div>Page1</div>' } 
const page2 = { template: '<div>Page2</div>' } 
const routes = [ 
     { path: '/', component: page1 }, 
     { path: '/page2', component: page2 } 
] 

const router = new VueRouter({ 
    routes 
}) 

var vm = new Vue({ 
    router, 
     el: "#app" 
}) 

Imaginons que je crée un fichier .vue appelé page1.vue à la place. Cela contient

<template> 
my new page 
</template> 
<script> 
    export default { 
     name: '?', 
     date: function() { 

     } 
    } 
</script> 

Comment puis-je obtenir ce fichier inclus dans mon fichier CSHTML par exemple?

Answer 1

Vous devez développer avec webpack pour créer des composants de fichier unique.

Voir la documentation de Vue à ce sujet. Utilisez le Vue Cli et déposez une création de pack Web dans votre page cshtml.