Estoy tratando de configurar una .NET core proyecto con la maquinilla de Afeitar de Páginas e incluir vueJs dentro de la maquinilla de afeitar de la página para todos los de mi lógica.

Algo como esto:

@{
    ViewData["Title"] = "VueJs With Razor";
}
<h2>@ViewData["Title"].</h2>

<div id="app">
   <span>{{ message }}</span>
</div>

<script>
     new Vue({
        el: '#app',
        data: {
          message : 'Hello vue.js'
        }
    })
</script>

He leído que la mezcla de Vue de Afeitar y páginas es una mala práctica, y uno debería usar la cuchilla de Afeitar O un Vue.

¿Por qué es esto?

  • No puede agrupar código en la máquina de afeitar páginas en manojos para mejorar el tiempo de descarga. También vue es similar a la angulares como el hecho de que hecho para una sola página de aplicaciones, donde se obtuvo una única página html que carga todo y luego todo lo demás que sucede en el navegador y a través de ajax para puro para sustraer datos. No regular de las solicitudes de http a su navaja de afeitar páginas como típico en mvc/máquina de afeitar páginas
  • El uso de Vue por su extremo delantero y escribir backend en .net para exponer Api. Usted obtendrá mucho más limpio de la aplicación y una mejor navegador epxerience
  • Yo personalmente no veo el problema. Maquinilla de afeitar tiene una determinada manera de manejar las cosas, pero al final no se diferencia mucho de PHP, en el sentido de que la utilice para representar front-end código, derecho? Vue es front-end (javascript), así que no veo el problema, personalmente.
  • No es facebook haciendo esto con Reaccionar?

3 Comentarios

  1. 25

    Usted puede hacer esto. A veces estás obligado a hacerlo, si, como nosotros, estamos migrando una base del código existente y no se puede convertir todo a la vez. Y como Ron C dice, funciona bien.

    Si usted está comenzando un nuevo proyecto, usted tiene el lujo de elegir. Razones para favorecer un SPA y Navaja no sería…

    • Reactividad. SPA aplicaciones en general, se sienten mucho más reactivo. Inicial renders son, a menudo se sirve de la memoria caché, antes de que lleguen los datos. En la primera carga, todos los recursos que llegan en un paquete, en una petición-respuesta. No hay, ni mucho menos, solicitud de encadenamiento.

    • Flujo de trabajo. Webpack, combinación y caliente las recargas son grandes. Usted obtener producción construye, con la minimización, la compilación de Vue representar funciones, eliminación de 404 estilo de errores, js errores de sintaxis son atrapados. El ciclo de la introducción de un error para descubrir que se reduce considerablemente por muchos errores.

    • SPA universo. De enrutamiento, Vuex, este es realmente el camino del futuro.

    • Pureza. Navaja de afeitar y Vue hacer cosas similares en el final del día. Si la combinación de ellos, usted puede tener un tiempo difícil mantener la cabeza recta.

  2. 64

    Mezcla VueJs de Afeitar y las Páginas no es necesariamente una mala cosa, puede ser de gran!

    Yo uso Vue con maquinilla de afeitar para no SPA páginas y los dos trabajan bien juntos. Yo elijo usar Vue por la carga a través de una etiqueta de secuencia de comandos desde un CDN y yo no aprovechar el uso de WebPack para transpiling, simplemente escribo mi código (gasp) ES5. Elegí este enfoque, por las siguientes razones.

    • El uso de Afeitar páginas en lugar de un SPA sida en SEO y posicionamiento en motores de búsqueda públicos de páginas enfrentadas.
    • Carga Vue directamente desde un CDN elimina un montón de Webpack centrado en la tecnología de la curva de aprendizaje que hace que sea mucho más fácil para los nuevos desarrolladores para obtener la velocidad en el sistema.
    • El enfoque todavía proporciona el reactivo de bondad para el desarrollo de la IU que Vue inherentemente trae a la mesa.
    • Manteniendo con el «modelo de página» el código que proporciona la funcionalidad del sitio es lógicamente agrupadas en torno al backend de la página que ofrece esa funcionalidad.

    Desde Vue de Afeitar y puede hacer muchas de las mismas cosas, mi objetivo para el público de las páginas es el uso de Afeitar para generar tan cerca de la final de html como sea posible, y utilizar Vue para agregar el reactiveness a la página. Esto proporciona grandes beneficios del SEO para los rastreadores que el índice de la página por analizar el HTML devuelto.

    Me doy cuenta de que mi uso de Vue es muy distinta a la de ir en la ruta de un SPA y WebPack y el enfoque a menudo significa que no puede usar la 3ª parte de Vue Componentes sin tener que rediseñar el código un poco. Pero el enfoque simplifica la arquitectura de software y proporciona un ligero reactivo de interfaz de usuario.

    Mediante este enfoque de Afeitar puede ser muy presionadas para generar la prestación inicial del HTML con algunas etiquetas que contengan vue atributos. A continuación, después de que la página se carga en el navegador, Vue toma el control y se puede configurar de nuevo que la página de cualquier forma que desee.

    Obviamente, este enfoque no se ajustan a las necesidades de todos los desarrolladores o proyectos, pero para algunos casos de uso es un muy buen programa de instalación.

    Algunos detalles más para aquellos interesados

    Desde que tengo uso de vue en todo el sitio, mi mundial _layout.archivo aspx es responsable de instanciar vue. Cualquier en todo el sitio la funcionalidad implementada en el vue es implementado en este nivel. Muchas páginas han específicos de la página de vue funcionalidad, esto es implementado como un mixin en esa página o un mixin en un archivo js cargado por esa página. Cuando el _layout.página aspx se crea una instancia de Vue lo hace con todos los mixins que me he inscrito a un mundial mixin matriz. (La página de la empujó del mixin en ese mundial mixin matriz)

    Yo no uso .vue archivos. Cualquier componentes necesarios son aplicadas directamente en la página o si necesitan ser utilizada por varias páginas, a continuación, que se implementan en una vista parcial como la de abajo.:

    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>

    En el anterior, es la Vue.componente(‘dlog’, … parte de la js que se instala el componente y la pone a disposición de la página.

    La vue código en el _layout.cshtml página se ve algo como el código de abajo. Mediante la creación de instancias de Vue en el _layout.cshtml que es utilizado por el sitio en su conjunto, Vue es sólo una instancia en un solo lugar en todo el sitio:

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

    Lo que he proporcionado aquí pinta una idea bastante clara de este enfoque no tradicional y beneficios. Sin embargo, ya que varias personas han preguntado, también escribí un blog post: El uso de VueJs con ASP.NET maquinilla de Afeitar Puede Ser Grande!

    • Cualquier manera que usted podría describir este proceso un poco más, estoy deseando utilizar este método para ser capaz de utilizar lo mejor de ambos mundos. Algunas cosas están bien cargados a través de afeitar, mientras que otros son mejores cargan de forma dinámica y vue.js es muy agradable trabajar con. ¿Cómo se carga/crear los componentes en sus respectivas páginas?
    • He añadido más información a mi respuesta, espero que proporciona el extra ideas que usted necesita.
    • Impresionante! Gracias Ron! De todos modos podrías explicar un poco más de la _layout.cshtml o mostrar algo de código?
    • He añadido algunos _layout.cshtml Vue código con comentarios. Feliz Codificación.
    • Gracias de nuevo! Así que (probablemente) la última cosa! Estoy asumiendo que usted acaba de mostrar el parcial páginas que contienen los componentes en las páginas a las que se les necesita? Sólo quiero para asegurarse de que estoy entendiendo.
    • Exactamente. Sí, eso es lo que yo hago.
    • Gracias impresionante! De hecho, me terminó la ampliación de su idea un poco e hizo una carpeta separada para contener todos mis componentes (para el mundial al menos por ahora) y yo trago para compilar todos los elementos en una sola bundle.js y el lugar de las plantillas en la plantilla: la opción de la Vue.Componente({}). Funciona de maravilla y ahora no tengo para el uso de los parciales para el sitio de distintos componentes. Estoy mirando a ver cómo me podría aprovechar esto para cargar basado en las páginas también.
    • Eso suena genial.
    • Esto es muy interesante. Me encantaría ver un completo proyecto de ejemplo para ilustrar este concepto. Tal vez un simple «Todo» de la aplicación, si alguien tiene tiempo?
    • Me llegó de forma independiente a la misma conclusión que usted hizo. Un miembro del equipo este post y se lo mencionó. Una de las ventajas que he encontrado es que usted puede pre-rellenar muchos campos, a continuación, mantener con vue. Esto funciona de maravilla como la carga de la página inicial es rápido y ya contiene datos, entonces vue se encarga de la capacidad de respuesta de la tarde. Obviamente, esto tomar algún pensamiento a través de mantener la coherencia entre c# y js modelos, pero agregar en la api de web, y no está mal, por ejemplo: <div v-texto»carro de la compra.subTotal»>@Modelo.SubTotal</span> <div v-texto»carro de la compra.de impuestos»>@Modelo.Tax</span> <div v-texto»carro de la compra.total»>@Modelo.Total</span>
    • exactamente. Lo que estoy haciendo, así como para el público de las páginas. He encontrado que para las páginas detrás de autenticación yo no estaba recibiendo grandes beneficios de pre-población desde el Vue hace tan rápidamente. Así que para aquellos páginas acabo de salida Json con la página a través de c# para que mi Vue modelo tiene los datos de los campos a partir de la primera representación del navegador de la página. Funciona muy bien y para mí fue menos código para mantener, ya que yo no necesito el código para rellenar los campos de entrada de la c# lado en tales casos.
    • ¿Alguna vez escribir la entrada en el blog?
    • Yo estaba esperando a ver si había interés, sería útil?
    • sí! Puedo obtener el quid de la cuestión de la respuesta, pero se preguntaba si había más contenido en algún lugar. No hay presión. Gracias por el post!!!
    • Me cuenta como interesado en leer más.
    • gracias que el estímulo que necesitaba para conseguir serio sobre mi artículo en el blog!
    • Me encantaría ver un post en el blog y, posiblemente, una de github del proyecto de ejemplo para ver cómo todo viene junto. Gracias por esta detallada escribir.
    • Gracias, estoy escuchando a la comunidad en voz alta y clara. Mi próximo proyecto será para hacer exactamente eso, con un github proyecto de ejemplo. Voy a actualizar mi respuesta con el enlace al artículo del blog una vez completado.
    • cualquier actualización en el blog? Estamos arrastrando un legado de Formularios Web app pateando y gritando en el Siglo del Murciélago de la Fruta, y quisiera ver que su enfoque más plenamente desarrolladas. Saludos!
    • He estado trabajando en la creación de una plataforma de blog para que nuestro sitio este pasado dos semanas y casi lo tenemos funcionando. A continuación, voy a escribir el post, implementar y poner el enlace aquí, estad atentos. Seguirá siendo mi enfoque hasta que la tarea se complete 🙂

Dejar respuesta

Please enter your comment!
Please enter your name here