javascript - Usando Vue.js en Laravel 5.3

laravel-5.3

Question

En los proyectos de Laravel anteriores a 5.3, he utilizado Vue.js utilizando la etiqueta de script como esta:

<script type="text/javascript" src="../js/vue.js"></script>

Luego crearía una instancia de Vue específica para esa página como esta:

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

y luego enlazarlo al div # id relevante en mi HTML.

Ahora, en Laravel 5.3 Vue.js viene incluido y estoy completamente consciente de que puedo usar los componentes como se describe en los documentos utilizando gulp / elixir, sin embargo, mi pregunta es si quiero crear una instancia de Vue.js como acabo de mencionar. , es decir, donde creo una instancia de Vue.js estrictamente para una página determinada (no un componente), ¿cómo lo hago?

¿Lo configuro como solía hacerlo al importar la biblioteca vue.js en una etiqueta de script o puedo usar app.js generado?

¿Se supone que no debo hacerlo de esta manera, debo crear componentes para todo?

Para mí, no tiene sentido hacer un componente para algo que solo uso una vez. Pensé que el propósito de los componentes es que son reutilizables; puede usarlo en más de un lugar. Como se menciona en los documentos de Vue.js:

Los componentes son una de las características más poderosas de Vue.js. Le ayudan a extender elementos HTML básicos para encapsular código reutilizable .

¡Cualquier consejo sería apreciado, gracias!

Answer 1

Dejaría a Laravel como viene, con Webpack. Esto le da la posibilidad de agregar una buena configuración de Webpack. Plus gulp watch funciona dentro de la VM vagrant de Homestead ahora, ya que utilizará Webpack para ver los cambios de archivos. Y también echa un vistazo a los componentes asíncronos.

Ahora, con su pregunta sobre las instancias de Vue separadas por página ... comencemos con app.js ...

App.js
Cuando instala Laravel 5.3 por primera vez, encontrará un punto de entrada a app.js Comentemos la instancia principal de Vue:

recursos / activos / js / app.js

/**
 * First we will load all of this project''s JavaScript dependencies which
 * include Vue and Vue Resource. This gives a great starting point for
 * building robust, powerful web applications using Vue and Laravel.
 */

require(''./bootstrap'');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component(''example'', require(''./components/Example.vue''));

// Let''s comment this out, each page will be its own main Vue instance.
//
// const app = new Vue({
//     el: ''#app''
// });

El archivo app.js sigue siendo un lugar para cosas globales, por lo que los componentes que se agregan aquí están disponibles (como el componente de example que se ve arriba) en cualquier script de página que lo incluya.

Guión de bienvenida
Ahora vamos a crear un script que represente una página de bienvenida:

recursos / activos / js / pages / welcome.js

require(''../app'')
import Greeting from ''../components/Greeting.vue'' 

var app = new Vue({
    name: ''App'',
    el: ''#app'',
    components: { Greeting },
    data: {
        test: ''This is from the welcome page component''
    }
})

Script de la página del blog
Ahora vamos a crear otro script que represente una página de blog:

recursos / activos / js / pages / blog.js

require(''../app'')
import Greeting from ''../components/Greeting.vue'' 

var app = new Vue({
    name: ''App'',
    el: ''#app'',
    components: { Greeting },
    data: {
        test: ''This is from the blog page component''
    }
})

Componente de saludo
recursos / activos / js / componentes / Greeting.vue

<template>
    <div class="greeting">
       {{ message }}
    </div>
</template>

<script>
    export default {
        name: ''Greeting'',
        data: () => {
            return {
                message: ''This is greeting component''
            }
        }
    }
</script>

Bienvenido Blade View
Vamos a actualizar la vista de la hoja de bienvenida que viene con Laravel:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>
    </head>
    <body>
        <div id="app">
            <example></example>
            @{{ pageMessage }}
            <greeting></greeting>
        </div>

        <script src="/js/welcome.js"></script>
    </body>
</html>

La idea sería la misma para la vista del blog.

Elixir
Ahora reúna todo en su archivo truculento usando la capacidad de Elixir para combinar las opciones de configuración de Webpack con sus propias (lea más sobre esto here ):

gulpfile.js

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

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

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(mix => {
    var config =  elixir.webpack.mergeConfig({
          entry: {
            welcome: ''./resources/assets/js/pages/welcome.js'',
            blog: ''./resources/assets/js/pages/blog.js''
          },
          output: {
            filename: ''[name].js'' // Template based on keys in entry above
          }
       });

    mix.sass(''app.scss'')
       .webpack(''app.js'', null, null, null, config);
});

Ejecute gulp o gulp watch blog.js y blog.js publicación de welcome.js y blog.js

Pensamientos
Actualmente me dirijo a la ruta SPA cuando se trata de "aplicaciones web" y solo uso Laravel como la API de fondo (o cualquier otro idioma / marco). He visto algunos ejemplos donde Vue SPA se construye en Laravel, pero realmente creo que debería ser un proyecto / repo completamente independiente, independiente del backend. No hay vistas de plantillas Laravel / PHP involucradas en un SPA, así que desarrolle el SPA por separado. Por cierto, el SPA tendría componentes de "página" (que normalmente son llamados por VueRouter y, por supuesto, estarían compuestos por más componentes anidados ... vea el ejemplo del enlace del proyecto a continuación).

Sin embargo, para el "sitio web", creo que Laravel sigue siendo una buena opción para servir las vistas blade y no hay necesidad de ir a SPA para eso. Puedes hacer lo que he descrito en esta respuesta. Además, puede conectar su sitio web a su aplicación web. En su sitio web, tendría un enlace de "inicio de sesión" que llevará a un usuario del sitio web a la aplicación web SPA para iniciar sesión. Su sitio web sigue siendo amigable con el SEO (aunque existe una buena prueba de que Google también está viendo contenido en los sitios de javascript de SPA).

Para ver un enfoque de SPA, he puesto un ejemplo en Vue 2.0 aquí: https://github.com/prograhammer/example-vue-project (funciona muy bien, pero aún está en progreso).

Editar:

Es posible que también desee revisar el Complemento de Chunk Commons . De esta manera, los navegadores pueden almacenar en caché algunas dependencias de módulos compartidos por separado. Webpack puede extraer automáticamente las dependencias importadas compartidas y colocarlas en un archivo separado. Para que tenga un common.js (material compartido) y un welcome.js en una página. Luego, en otra página, tendrías nuevamente common.js y blog.js y el navegador puede reutilizar el common.js almacenado en caché.

Answer 2

Si desea incorporar vuejs en app.js usando gulp , puede hacerlo con elixir:

En primer lugar, necesita laravel-elixir-browserify-official de npm:

npm instalar laravel-elixir-browserify-official

Luego coloca lo siguiente en package.json :

  "browserify": {
    "transform": [
      "vueify",
      "babelify"
    ]
  }

Su archivo resources / asset / js / app.js solo necesitaría:

  require(''./bootstrap'');

El archivo bootstrap.js debe estar en la carpeta "resources / asset / js". No puedo recordar si esto se instaló con el pasaporte en mi aplicación, así que si no lo tiene, a continuación, laravel proporcionó el siguiente código para "bootstrap.js":

window._ = require(''lodash'');

/**
 * We''ll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

window.$ = window.jQuery = require(''jquery'');
require(''bootstrap-sass'');

/**
 * Vue is a modern JavaScript library for building interactive web interfaces
 * using reactive data binding and reusable components. Vue''s API is clean
 * and simple, leaving you to focus on building your next great project.
 */

window.Vue = require(''vue'');
require(''vue-resource'');

/**
 * We''ll register a HTTP interceptor to attach the "CSRF" header to each of
 * the outgoing requests issued by this application. The CSRF middleware
 * included with Laravel will automatically verify the header''s value.
 */

Vue.http.interceptors.push((request, next) => {
    request.headers[''X-CSRF-TOKEN''] = Laravel.csrfToken;

    next();
});

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from "laravel-echo"

// window.Echo = new Echo({
//     broadcaster: ''pusher'',
//     key: ''your-pusher-key''
// });

Ahora en gulpfile.js puedes usar:

elixir(function(mix) {
    mix.browserify(''app.js'');
});

Y en tu HTML tendrías:

...
<div id="app">
  @{{message}}
</div>
...

<script type="text/javascript">
   new Vue({
     el: ''#app'',
     data: {
       message: ''Hello Vue.js!''
     }
  });
</script>

Ahora solo ejecuta trago

Si no está utilizando elixir, entonces debería poder hacer algo similar con los paquetes browserify o webpack de npm .

Editar

Para responder a su pregunta actualizada, por supuesto puede usar vue.js para una sola página. Personalmente uso knockout para estas cosas (estoy usando vue porque laravel passport lo usa), pero arquitectónicamente son lo mismo, son bibliotecas MVVM.

El punto en MVVM es vincular su vista a un modelo de datos subyacente, de modo que cuando uno actualiza el otro se actualiza automáticamente (es decir, las actualizaciones en el dominio actualizan automáticamente el modelo y viceversa). Los componentes de Vue son una forma sencilla de reutilizar bloques de código, lo que es realmente bueno para crear widgets o componentes complejos, pero si simplemente busca generar datos de un modelo de vista en su página, entonces generalmente no necesitará crear una componente para eso

En cuanto a la generación de app.js, esto depende completamente de su proyecto. No puede vincular más de un modelo de vista a una vista, por lo que si planea usar varios modelos de vista en su proyecto, deberá encontrar una manera de incluir el modelo de vista específico para su página. Para lograrlo, probablemente eliminaría el modelo de vista de app.js y mantendría el bootstrap y los componentes registrados allí, y luego crearía modelos de vista separados que deberían incluirse en cada página.