Frontend - 3. JavaScript & CSS Scaffolding

Die Datei package.json von Laravel enthält das Bootstrap-Paket, das Ihnen hilft, mit dem Prototyping des Frontends Ihrer Anwendung mit Bootstrap zu beginnen. Sie können jedoch gerne Pakete aus der Datei package.json hinzufügen oder entfernen, wenn dies für Ihre eigene Anwendung erforderlich ist. Sie müssen das Bootstrap-Framework nicht verwenden, um Ihre Laravel-Anwendung zu erstellen - es ist ein guter Ausgangspunkt für diejenigen, die es verwenden möchten.

Bevor Sie Ihr CSS kompilieren, installieren Sie die Frontend-Abhängigkeiten Ihres Projekts mit dem Node Package Manager (NPM):

npm install

Nachdem die Abhängigkeiten mit npm install installiert wurden, können Sie Ihre SASS-Dateien mit Laravel Mix in einfaches CSS kompilieren. Der Befehl npm run dev verarbeitet die Anweisungen in Ihrer Datei webpack.mix.js. Normalerweise wird Ihr kompiliertes CSS im Verzeichnis public/css abgelegt:

npm run dev

Die standardmäßig in Laravel enthaltene webpack.mix.js kompiliert die SASS-Datei resources/sass/app.scss. Diese app.scss-Datei importiert eine Datei mit SASS-Variablen und lädt Bootstrap, was für die meisten Anwendungen einen guten Ausgangspunkt darstellt. Sie können die app.scss-Datei beliebig anpassen oder sogar einen ganz anderen Präprozessor verwenden, indem Sie Laravel Mix konfigurieren.

Alle von Ihrer Anwendung benötigten JavaScript-Abhängigkeiten finden Sie in der Datei package.json im Stammverzeichnis des Projekts. Diese Datei ähnelt einer composer.json-Datei, außer dass sie JavaScript-Abhängigkeiten anstelle von PHP-Abhängigkeiten spezifiziert. Sie können diese Abhängigkeiten mit dem Node Package Manager (NPM) installieren:

npm install

Sobald die Pakete installiert sind, können Sie den Befehl npm run dev verwenden, um Ihre Assets zu kompilieren. Webpack ist ein Modulbündler für moderne JavaScript-Anwendungen. Wenn Sie den Befehl npm run dev ausführen, führt Webpack die Anweisungen in Ihrer Datei webpack.mix.js aus:

npm run dev

Standardmäßig kompiliert die Datei Laravel webpack.mix.js Ihre SASS und die Datei resources/js/app.js. In der app.js-Datei können Sie Ihre Vue-Komponenten registrieren oder, wenn Sie ein anderes Framework bevorzugen, Ihre eigene JavaScript-Anwendung konfigurieren. Ihr kompiliertes JavaScript wird normalerweise im Verzeichnis public/js abgelegt.

Writing Vue Components

Standardmäßig enthalten frische Laravel-Anwendungen eine ExampleComponent.vue Vue-Komponente, die sich im Verzeichnis resources/js/components befindet. Die ExampleComponent.vue-Datei ist ein Beispiel für eine einzelne Datei Vue-Komponente, die ihr JavaScript und ihre HTML-Vorlage in derselben Datei definiert. Einzelne Dateikomponenten bieten einen sehr komfortablen Ansatz zur Erstellung von JavaScript-gesteuerten Anwendungen. Die Beispielkomponente ist in Ihrer app.js-Datei registriert:

Vue.component(
    'example-component',
    require('./components/ExampleComponent.vue').default
);

Um die Komponente in Ihrer Anwendung zu verwenden, können Sie sie in eine Ihrer HTML-Vorlagen einfügen. Nachdem Sie beispielsweise den make:auth Artisan-Befehl ausgeführt haben, um die Authentifizierungs- und Registrierungsbildschirme Ihrer Anwendung einzurichten, können Sie die Komponente in die Vorlage home.blade.php Blade einfügen:

@extends('layouts.app')

@section('content')
    <example-component></example-component>
@endsection

Wenn Sie mehr über das Schreiben von Vue-Komponenten erfahren möchten, sollten Sie die Vue-Dokumentation lesen, die einen umfassenden, leicht verständlichen Überblick über das gesamte Vue-Framework bietet.

Using React

Wenn Sie Ihre JavaScript-Anwendung lieber mit React erstellen möchten, ist es für Laravel ein Kinderspiel, das Vue-Gerüst gegen das React-Gerüst auszutauschen. In jeder neuen Laravel-Anwendung können Sie den voreingestellten Befehl mit der Option reagieren verwenden:

php artisan preset react

Dieser einzelne Befehl entfernt das Vue-Gerüst und ersetzt es durch das React-Gerüst, einschließlich einer Beispielkomponente.