Laravel Funken: Erstellen eine neue Registerkarte Einstellungen und Vue Component

Question

In Laravel Spark, haben die meisten Einstellungen Platten eine entsprechende Vue JS Komponente über eine benutzerdefinierte Registerkarte aufgerufen

<spark-create-tests :user="user" inline-template> 
    <div> 
    </div> 
</spark-create-tests> 

Ich bin ein neues Einstellungsfenster zu schaffen. Ich würde gerne den Mustern folgen, die der Core-Laravel-Code verwendet - aber ich bin mir nicht sicher, wie und wo ich meine Vue-Komponente erstellen soll. Von dem, was ich sammeln konnte mich zu, die öffentlich zugängliche Web-Anwendung seine Komponenten in dieser Datei

#File: public/js/app.js 
Vue.component('spark-create-team', { 
    mixins: [base] 
}); 

instanziiert das sieht aus wie seine Menschen nicht bearbeitet werden - das heißt, es eine Datei durch eine Art Übersetzungsvorgang erstellt ist. Ich nehme an, das ist Webpack, aber als ein gefrorener Höhlenmenschen-Entwickler bin ich mir nicht sicher.

Was mich auf meine Fragen bringt - wie kann ich

1. eine neue Komponentendefinition In meinem Laravel Funken Projekt
2. mein Projekt neu übersetzen, so dass meine Komponente

enthalten ist oder Was ist mit den oben genannten Dingen unglaublich irrsinnig, und ich muss eigentlich noch etwas anderes machen?

Answer 1

Denken Sie, ich habe diesen selbst aufgespürt. Die kurze Version ist, können Sie alle Ihre Vermögenswerte bauen entweder mit

npm run dev 
npm run production 

oder verwenden Sie einen npm Watch-Modus mit einem der folgenden (die später eine Polling-Version mit den üblichen Wahl Kompromissen für perf/sure-to-

Arbeit)

npm run watch 
npm run watch-poll  

Higher level - Laravel Marken seine npm basierte Integrationen. In Laravel 5.3 wurden diese Integrationen als Laravel Elixer bekannt. In Laravel 5.4 sind diese Integrationen als Laravel Mix bekannt.

Der Quelle Einstiegspunkt für die Integration des Laravel Funken (zumindest in der Version 4.0) ist

#File: resources/assets/js/app.js 
require('spark-bootstrap'); 

require('./components/bootstrap'); 

var app = new Vue({ 
    mixins: [require('spark')] 
}); 

Die require-Anweisungen in anderen JavaScript-Dateien ziehen (all dies gelöst/von Web-Pack zusammengestellt: wenn Sie). Zum Beispiel die beiden require Aussagen über Pull in

spark/resources/assets/js/spark-bootstrap.js 
./resources/assets/js/components/bootstrap.js 

denen jeweils wiederum zieht in vielen anderen Dateien. PHP include/require O-Rama - für Javascript neu erfunden!

Schließlich das require-Diagramm lädt die folgende Datei

#File: resources/assets/js/spark-components/settings/teams/create-team.js 
var base = require('settings/teams/create-team'); 

Vue.component('spark-create-team', { 
    mixins: [base] 
}); 

Dies ist, was die spark-create-team Komponente definiert. Die Basismethoden werden in der Datei require('settings/teams/create-team') definiert.

#File: spark/resources/assets/js/settings/teams/create-team.js 
module.exports = { 
    /*...*/ 
} 

alles gegeben, es gibt keine großen Ort, um Ihre eigenen Komponenten fallen, ohne mit Kern Laravel Funken Code zu stören. Sofern mich jemand in den Kommentaren nicht anders überzeugt, werde ich meinen in die Datei resources/assets/js/app.js fallen lassen - wenn ich nur alle an einem zentralen Ort habe.

Answer 2

Sie können Ihre eigenen Komponenten in /resources/assets/js/components/ (oder sogar in /spark-components, wenn es einfacher ist) erstellen. Es könnte entweder JS-Dateien mit Komponentendefinitionen (wie) oder .vuesingle file components mit HTML, CSS und JS vermaschten (wie Example.vue) sein. So oder so, müssen Sie jede Datei in bootstrap.js wie so registrieren:

require('./home'); // home.js -> <home> 

oder

Vue.component('example', require('./Example.vue')); // Example.vue -> <example> 

Natürlich, wenn Sie die Datei in einem Unterverzeichnis unter /components sind, dann würden Sie das neu einstellen müssen Pfad. Wenn Sie npm run dev ausführen, werden alle JS-Assets unter /resources normalerweise in nur eine Datei kompiliert - app.js, aber Sie können dieses Verhalten in Ihrer Datei webpack.min.js steuern. Laravel Docs sollte Ihnen bei Bedarf helfen.