Le mélange VueJs et Rasoir Pages n'est pas nécessairement une mauvaise chose, il peut être grande!
J'utilise Vue de rasoir pour les non SPA pages et les deux fonctionnent bien ensemble. Je choisis d'utiliser la Vue par chargement par l'intermédiaire d'une balise de script à partir d'un CDN, et je n'ai pas tirer parti de l'utilisation de WebPack pour transpiling, j'ai simplement écris mon code (gasp) ES5. J'ai choisi cette approche pour les raisons suivantes.
- À l'aide de Rasoir pages plutôt que d'un SPA sida dans le RÉFÉRENCEMENT et moteur de recherche de classement des publics confrontés à des pages.
- Chargement de Vue directement à partir d'un CA élimine l'intégralité de la pile de Webpack centrée sur la technologie de la courbe d'apprentissage qui le rend beaucoup plus facile pour les nouveaux développeurs de se lever à la vitesse sur le système.
- L'approche fournit toujours le réactif de la bonté de développement de l'INTERFACE utilisateur que Vue intrinsèquement apporte à la table.
- En accord avec le "modèle de page" le code qui fournit la fonctionnalité du site est logiquement regroupées autour de la page backend qui offre cette fonctionnalité.
Depuis la Vue et le Rasoir peut faire beaucoup de choses identiques, mon objectif pour le public en face de pages est d'utiliser Rasoir pour générer près de le html final que possible, et d'utiliser Vue d'ajouter de la réactivité à la page. Ce livre un excellent RÉFÉRENCEMENT avantages pour les robots que l'index de la page en analysant le code HTML retourné.
Je réalise ma consommation de Vue est tout à fait différent que d'aller l'itinéraire d'un SPA et WebPack et l'approche signifie souvent que je ne peux pas utiliser la 3ème partie Vue des Composants sans les retravailler un peu le code. Mais l'approche simplifie l'architecture du logiciel et offre un léger réactif de l'INTERFACE utilisateur.
En utilisant cette approche de Rasoir peut être fortement à effet de levier pour générer les premiers rendu de l'HTML avec quelques balises contenant de vue des attributs. Puis, après le chargement de la page dans le navigateur, Vue prend le dessus et la possibilité de reconfigurer cette page toute manière souhaitée.
Évidemment, cette approche ne sera pas adapté à tous les besoins des développeurs ou des projets, mais pour certains cas d'utilisation, il est tout à fait une bonne installation.
Un peu plus de détails pour ceux qui sont intéressés
Depuis que j'ai vue au niveau du site, my global _layout.fichier aspx est responsable de l'instanciation de vue. Tout au niveau du site de la fonctionnalité de mise en œuvre de vue est mis en œuvre à ce niveau. Le nombre de pages en pages spécifiques de vue de la fonctionnalité, ce qui est mis en œuvre comme un mixin sur cette page ou un mixin dans un fichier js chargé par cette page. Lorsque le _layout.page aspx instancie Vue, il le fait avec tous les mixin que je me suis inscrit à un plan global de mixin tableau. (La page poussé c'est mixin sur ce mondial mixin tableau)
Je ne l'utilise pas .vue des fichiers. Tous les composants nécessaires sont mis en œuvre directement sur la page ou si elles doivent être utilisées par plusieurs pages, puis ils sont mis en œuvre dans une vue partielle comme celle ci-dessous.:
dlogViewComponent.cshtml :
@* dlog vue component template*@
<script type="text/x-template" id="dlogTemplate">
<div class="dlog" v-show="dlog.visible" v-on:click="dlog.closeBoxVisible ? close() : ''">
<div class="dlogCell">
<div class="dlogFrame" @@click.stop="" style="max-width:400px">
<i class="icon icon-close-thin-custom dlogCloseIcon" v-if="dlog.closeBoxVisible" @@click="close()"></i>
<div class="dlogCloseIconSpace" v-if="dlog.closeBoxVisible"></div>
<div class="dlogInner">
<div class="dlogTitle" style="float:left" v-text="title"></div>
<div class="clear"></div>
<div class="dlogContent">
<slot></slot>
</div>
</div>
</div>
</div>
</div>
</script>
@* Vue dlog component *@
<script type="text/javascript">
Vue.component('dlog', {
template: '#dlogTemplate',
props: { //don't mutate these!
closeBoxVisible: true,
title: 'One'
},
data: function () {
return {
dlog: { //nest the data props below dlog so I can use same names as cooresponding prop
closeBoxVisible: (typeof this.closeBoxVisible === 'undefined') ? true : (this.closeBoxVisible == 'true'),
title: (typeof this.title === 'undefined') ? '' : this.title,
visible: false
}
}
},
methods: {
//opens the dialog
open: function () {
app.hideBusy(); //just in case, no harm if not busy
this.dlog.visible = true;
var identifyingClass = this.getIdentifyingClass();
Vue.nextTick(function () {
$("." + identifyingClass).addClass("animateIn");
fx.manageDlogOnly();
});
},
//closes the dialog
close: function () {
fx.prepDlogClose();
var identifyingClass = this.getIdentifyingClass();
this.dlog.visible = false;
$("." + identifyingClass).removeClass("animateIn");
},
getIdentifyingClass: function () {
if (this.$el.classList.length > 1) {
//the last class is always our identifying css class.
return this.$el.classList[this.$el.classList.length - 1];
} else {
throw "A dialog must have an identifying class assigned to it.";
}
}
}
});
</script>
Ci-dessus, c'est la Vue.composant('dlog', ... une partie de la js qui installe le composant et le rend disponible à la page.
La vue de code sur le _layout.cshtml page ressemble à quelque chose comme le code ci-dessous. Par l'instanciation de Vue sur la _layout.cshtml qui est utilisé par l'ensemble du site, la Vue est instancié dans un lieu unique au niveau du site:
_layout.cshtml :
<script type="text/javascript">
var app = new Vue({
el: '#appTemplate',
mixins: mixinArray, //The page adds it's mixin to mixinArray before this part of the layout executes.
data: {
errorMsg: '' //used sitewide for error messages
//other data used sitewide
},
methods: {
//methods that need to be available in vue sitewide, examples below:
showBusy: function (html) {
//functionality to show the user that the site is busy with an ajax request.
},
hideBusy: function () {
//functionality to hide the busy spinner and messaging
}
},
created: function () {
//this method is particularly useful for initializing data.
}
});
</script>
Ce que j'ai fournis dépeint ici une idée assez claire de cette approche non traditionnelle et ses avantages. Cependant, puisque plusieurs personnes m'ont demandé, j'ai aussi écrit un blog liées: à l'Aide de VueJs avec ASP.NET Rasoir Peut Être Grande!
