Cómo configurar ASP.NET Core + Vue.¿Js?

Llego tarde a la fiesta, pero ahora hay una plantilla disponible para.Net Core que se puede construir con un solo comando. En un cuadro de Windows con. Net Core instalado, simplemente cree una carpeta vacía y en esa carpeta ejecute este comando para mostrar una lista de plantillas disponibles

dotnet new

Si no tiene todas las plantillas, solo necesita ejecutar esto para instalar las plantillas de SPA:

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

Y esto para montar una nueva aplicación Vue:

dotnet new vue

En milisegundos un nuevo SDV completo.js página única la aplicación web está construida con un back-end de núcleo. Net que funciona con controladores, vistas, etc. Es brillante. Solo tienes que abrir el proyecto es VS o VS Código y estás fuera.

También hay plantillas para Aurelia, Angular, Knockout y React! Puede construirlos todos y comparar cómo cada uno resuelve el mismo problema. El Angular incluso hace pre-renderizado del lado del servidor fuera de la caja!

Sé que. Net Core tiene un camino por recorrer, pero se está volviendo más y más impresionante cada día!

Primero, un descargo de responsabilidad: No pude encontrar nada que realmente se ajustara a lo que necesitaba, así que armé una solución desde cero, vea el final

Usted pregunta acerca de incluir Vue a través de la etiqueta <script> (en ese caso la compilación de CDN). Sin embargo, también menciona el uso de Babel y la función de módulos ES6. En ese caso, recomendaría usar Webpack para la aplicación del lado del cliente, que compilará su ES6 con Babel, le permitirá usar módulos y componentes y trabajar con una plantilla. Usted también consigue caliente module reload (edite su fuente y vea los cambios en la aplicación cliente en tiempo real!) y Webpack agrupará su SPA en una aplicación HTML5 estática.

El SDV oficial.los documentos js apuntan a su propia plantilla de Webpack.

Así que puede ejecutar el servidor Webpack dev y su ASP.NET Core app de forma independiente, si eso se adapta a tus necesidades, pero hay una mejor solución que hace que el desarrollo sea aún más ágil:

El código abierto de Microsoft JavaScriptServices permite ejecuta Nodo.js de ASP.NET Core, y tienen algún middleware Webpack que integra el servidor Webpack dev en su aplicación durante las compilaciones de depuración.

Proporcionan plantillas oficiales para Angular 2, e incluso una plantilla etiquetada como Vue.js, pero la plantilla Vue es solo la plantilla webpack oficial sin ninguna integración con. NET; esto es igual que el servidor independiente.

No pude encontrar ninguna plantilla que hiciera esto para Vue.js, así que armé una muestra ASP.NET Aplicación principal eso carga el middleware dev de Webpack con un Vue.aplicación js Webpack. Cuando el servidor. NET Core se está ejecutando en modo dev, puede editar el origen del Vue y los cambios se reflejarán con parches incrementales rápidos sin necesidad de reconstruir toda la aplicación. En el modo release,. NET Core utilizará la salida Webpack pre-construida. Puedes encontrarlo en GitHub:

Https://github.com/0xFireball/YetAnotherShrinker El repositorio enlazado anteriormente tiene una demostración completa de la aplicación que utiliza NancyFx, axios, Vue.js, y Vue Material, y es un acortador de URL simple. Si quieres pasos para una configuración más mínima que se pueda agregar fácilmente a una aplicación existente, echa un vistazo a esta entrada de blog mía.

Divulgación obligatoria: Yo escribí esa entrada de blog.

Puede probar los pasos a continuación , o en caso de que en esta simple guía.

1. Configure el archivo de configuración npm ( paquete.json)

A continuación se muestra el paquete npm que usaré.

{
  "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. Instale el paquete npm

Abra el símbolo del sistema y vaya a la carpeta raíz de su aplicación y instale el conjunto de paquetes npm desde su paquete.json usando el comando 'npm install' sin las comillas.

1. Configuración Gulp

Una vez instalado el paquete npm, ahora puede configurar el archivo gulp. Usted tendrá que añadir un nuevo elemento llamado gulp configuration file (gulpfile.js ). Más tarde crearemos el vue js que llamaremos vueApp.js lo mismo con el siguiente código. El primer argumento es donde el público directorio de salida y el otro es el directorio de origen para más haga clic en aquí.

var elixir = require('laravel-elixir');



require('laravel-elixir-vue-2');

elixir(function (mix) {
    mix.webpack('vueApp.js', 'wwwroot/js/dist', 'wwwroot/js');
});

1. Crear el archivo Vue js

El su asp.net core web app project solution explorer ir a wwwroot y agregue la carpeta' js ' y si no existe, vuelva a agregar una nueva nombre de la carpeta 'dist'. Ahora, una vez que se complete la configuración de la carpeta, agregue una nueva archivo javascript en la carpeta' js 'nómbralo' vueApp.js'.

1. Comience a codificar en su archivo vue js

Ahora puede comenzar a codificar, como para el ejemplo a continuación se mostrará alerta para indicar que vue js se está ejecutando.

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. Aplicar vue js on a su vista razor o html

Abra su página de diseño y envuelva el contenido de su etiqueta body con un div y un id de 'app'. Usaremos app ya que esa es la etiqueta de identificación que usamos en nuestro código de ejemplo del paso 5. La 'aplicación' no es necesaria y puede cambia tu nombre deseado. Por último, en la aplicación de la vue js para presentar añadir referencia ahora al script. Asegúrese de moverse fuera de la aplicación div la referencia de scripts para evitar errores.

<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. Run gulp

Ahora que hemos configurado la configuración de vue js y la aplicamos a nuestro razor view tendremos que ejecutar gulp para ejecutar lo que hemos establecido en nuestro gulpfile. Al igual que en el paso 2 ir a la carpeta raíz y abrir el comando luego ejecute el comando 'npm run dev' de nuevo sin el citar.

1. Corre

Ahora para el paso final ejecute su asp.net núcleo mvc aplicación y comprobar el consola de su navegador web. Usted debe ser capaz de ver ahora el mensaje nosotros fijamos desde el paso 5.

(Escribí la guía en el blogpost para referencia siempre que pueda necesitar: D)

Tal vez alguien encuentre esta información útil)

Aquí hay algunas plantillas de inicio que puede usar para una configuración rápida del proyecto.

El primero le da solución multi-proyectos con alguna arquitectura predefinida. Esta plantilla está más cerca de los proyectos del mundo real que los JavaScriptServices que ya se mencionó aquí. Proporciona capa de dominio, capa de repositorio, etc. Tenga en cuenta que este es el generador yeoman y utiliza typescript. https://github.com/vue-typed/generator-vue-net-core

El segundo solo proyecto en github y debes clonarlo si quieres usarlo. No es un generador yeoman y creo que esto es lamentable, pero encontré la estructura en esta plantilla mejor que en la primera. Además, tiene un montón de pequeñas cosas agradables como algunos filtros de excepción, que, muy probablemente, todavía hará de todos modos)). Y si eres un principiante, esta plantilla será para ti solo un regalo del cielo. Este plantilla recomendada en la página awesome-vue. Aquí está el enlace: https://github.com/mrellipse/toucan

Pasé mucho tiempo aprendiendo a usar Browserify y Babel para poder configurar mis propios entornos ES6. Sin embargo, cuando se trata de usar Vue, estoy bastante feliz de ir con las plantillas predeterminadas, a las que se puede acceder mejor instalando Vue-CLI. Puede elegir entre Browserify y Webpack, y configuraciones simples o completas con linting, pruebas unitarias y Componentes de Archivo único utilizando la versión de solo tiempo de ejecución.

Simplemente funciona.

Esta pregunta es un poco vieja pero..

Tengo un pequeño proyecto de ejemplo en Github que usa aspx y vue.js, utiliza yarn (o npm) como gestor de paquetes y Webpack.

No es.net core... pero la forma de usarlo será la misma... Podría ayudarte a empezar.

La extraña estructura de archivos se debe a que se ejecuta todo en nuestro sistema CMS de Sitecore

Espero que ayude.