Mit Vue.js in Laravel 5.3

Question

In Laravel Projekten vor 5.3 I Vue.js mit dem Skript-Tag wie folgt verwendet habe:

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

ich dann ein Vue Beispiel, wie dies für die Seite spezifisches schaffen würde :

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

und binden Sie es dann an die relevante div # id in meinem HTML.

Nun, in Laravel 5.3 Vue.js kommt gebündelt und ich bin mir bewusst, dass ich Komponenten wie in der Dokumentation beschrieben mit Schluck/Elixier verwenden kann, aber meine Frage ist , wenn ich ein Vue.js erstellen möchte Instanz wie ich gerade erwähnt habe, dh wo ich eine Vue.js Instanz genau für eine bestimmte Seite (keine Komponente) erstelle, wie mache ich das?

Richte ich es wie früher ein, indem ich die Bibliothek vue.js in ein Skript-Tag importiere, oder kann ich generierte app.js verwenden?

Soll ich es nicht so machen, sollte ich Komponenten für alles erstellen?

Für mich macht es keinen Sinn, eine Komponente für etwas zu machen, das ich nur einmal benutze - ich dachte der Zweck von Komponenten war, dass sie wiederverwendbar sind - Sie können es an mehr als einer Stelle verwenden. Wie in der Vue.js-Dokumentation erwähnt:

Komponenten sind eine der leistungsstärksten Funktionen von Vue.js. Sie helfen Ihnen, grundlegende HTML-Elemente zu erweitern, um wiederverwendbaren Code einzukapseln.

Jeder Rat würde geschätzt werden, danke!

Answer 1

Wenn Sie vuejs in app.js mit schluck integrieren möchten dann können Sie es mit Elixier:

Zum einen müssen Sie Laravel-Elixier-browserify amtlichen von npm:

npm installieren Laravel-Elixier-browserify-offiziellen

dann die fol platzieren Brüllen in package.json:

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

Ihre Ressourcen/assets/js/app.js Datei würde dann brauchen nur:

require('./bootstrap'); 

Die bootstrap.js Datei in sein sollte der Ordner "resources/assets/js". Ich kann mich nicht daran erinnern, ob dies mit Pass in meiner Anwendung installiert wurde, so, wenn Sie nicht haben es dann Laravel den folgenden Code zur Verfügung gestellt für „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' 
// }); 

Jetzt in gulpfile.js können Sie:

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

Und in Ihrem HTML würden Sie haben:

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

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

Jetzt laufen nur schluck

Wenn Sie nicht Elixier verwenden dann sollten Sie sein in der Lage, eine ähnliche Sache mit dem browserify oder webpack Pakete her zu machen m npm.

bearbeiten

Ihre aktualisierte Frage zu beantworten, können Sie von einer einzigen Seite Verwendung vue.js Kurs. Ich benutze persönlich Knockout für dieses Zeug (ich benutze vue, weil Laravel-Pass es verwendet), aber architektonisch sind sie die gleichen - sie sind MVVM-Bibliotheken. Der Punkt in MVVM ist, Ihre Ansicht an ein zugrunde liegendes Datenmodell zu binden. Wenn einer aktualisiert wird, wird der andere automatisch aktualisiert (d. H. Updates im Dom aktualisieren das Modell automatisch und umgekehrt). Vue-Komponenten sind eine einfache Möglichkeit, Code-Blöcke wiederzuverwenden, was sehr gut zum Erstellen von Widgets oder komplexen Komponenten geeignet ist. Wenn Sie jedoch nur Daten aus einem Ansichtsmodell auf Ihrer Seite rendern möchten, müssen Sie normalerweise keine erstellen Komponente dafür.

Das Generieren von app.js hängt vollständig von Ihrem Projekt ab. Sie können nicht mehr als ein Ansichtsmodell an eine Ansicht binden. Wenn Sie also mehrere Ansichtsmodelle in Ihrem Projekt verwenden möchten, müssen Sie eine Möglichkeit finden, das spezifische Ansichtsmodell für Ihre Seite einzubeziehen. Um das zu erreichen, würde ich wahrscheinlich das Ansichtsmodell aus app.js entfernen und die Bootstrap- und registrierten Komponenten dort behalten und dann separate Ansichtsmodelle erstellen, die auf jeder Seite enthalten sein müssten.

Answer 2

Ich würde Laravel wie es kommt mit Webpack verlassen. Dies gibt Ihnen die Möglichkeit, eine gute Webpack-Konfiguration hinzuzufügen. Plus gulp watch arbeitet jetzt in der Homestead Vagrant VM, da es Webpack verwendet, um die Dateiänderungen zu beobachten. Und checken Sie auch asynchrone Komponenten aus.

Nun zu Ihrer Frage zu trennen Vue Instanzen pro Seite ... fangen wir mit app.js beginnen ...

App.js
Beim ersten Laravel installieren 5.3, werden Sie eine finden app.js Einstiegspunkt. Lassen Sie uns die Haupt Vue Instanz auf Kommentar:

Ressourcen/assets/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' 
// }); 

Die app.js Datei immer noch ein Ort, um für die globale Sachen bleibt, so Komponenten hinzugefügt hier zur Verfügung stehen (z als die example Komponente, die oben gesehen wird) zu jedem Seitenskript, das es einschließt.

Willkommen Seite Script
Nun wollen wir ein Skript erstellen, das eine Begrüßungs-Seite darstellt:

Ressourcen/assets/js/pages/willkommen.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' 
    } 
}) 

Blog Seite Script
Nun wollen wir ein anderes Skript erstellen, die eine Blog-Seite darstellt:

Ressourcen/assets/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' 
    } 
}) 

Gruss Komponente
Ressourcen/assets/js/components/Greeting.vue

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

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

Willkommen Blade-Ansicht
Lasst uns die Begrüßungs Klinge Ansicht aktualisieren, dass Schiffe mit 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> 

Die Idee wäre, das gleiche für die Blogansicht.

Elixir
Jetzt bringen sie alle zusammen in Ihrem schluck Datei Elixir Fähigkeit mit Webpack Konfigurationsoptionen mit einem eigenen (lesen Sie mehr darüber here) zu fusionieren:

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); 
}); 

Führen Sie gulp oder gulp watch und Sie sehen beide welcome.js und blog.js veröffentlicht.

Gedanken
Ich werde derzeit den SPA Weg, wenn es um „Web-Anwendungen“ kommt und nur Laravel als Backend-API (oder eine andere Sprache/Framework) verwendet wird. Ich habe einige Beispiele gesehen, in denen Vue SPA in Laravel gebaut wurde, aber ich denke wirklich, dass es ein separates Repo/Projekt sein sollte, unabhängig vom Backend. Es gibt keine Laravel/PHP Templating Views, die in einem SPA enthalten sind. Daher sollten Sie den SPA separat aufbauen. Übrigens würde das SPA "page" -Komponenten haben (die normalerweise von VueRouter aufgerufen werden und natürlich aus mehr verschachtelten Komponenten bestehen würden ... siehe meinen Projektlink unten).

Aber für die "Website" denke ich, dass Laravel immer noch eine gute Wahl für die Bedienung von Blade Views ist und man nicht SPA dafür braucht. Sie können das tun, was ich in dieser Antwort beschrieben habe. Außerdem können Sie Ihre Website mit Ihrer Webanwendung verbinden. Auf Ihrer Website haben Sie einen "Login" -Link, der einen Benutzer von der Website zum webapp SPA zum Login führt. Ihre Website bleibt SEO-freundlich (obwohl es einen guten Beweis dafür gibt, dass Google auch Inhalte auf SPA Javascript-Seiten sieht).

Für einen Blick auf eine SPA-Ansatz habe ich ein Beispiel in Vue 2.0 hier: https://github.com/prograhammer/example-vue-project (es funktioniert gut, aber immer noch in Arbeit).

Edit:

Sie möchten vielleicht auch die Commons Chunk Plugin Kasse. Auf diese Weise können Browser einige gemeinsame Modulabhängigkeiten getrennt zwischenspeichern. Webpack kann automatisch freigegebene importierte Abhängigkeiten herausziehen und sie in eine separate Datei einfügen.Damit haben Sie sowohl eine common.js (shared stuff) als auch eine welcome.js auf einer Seite. Dann auf einer anderen Seite haben Sie wieder common.js und blog.js und der Browser kann die zwischengespeicherte common.js wiederverwenden.