JavaScript

Laravel erfordert nicht, dass Sie ein bestimmtes JavaScript-Framework oder eine bestimmte JavaScript-Bibliothek verwenden, um Ihre Anwendung zu erstellen. Tatsächlich können Sie dies tun, ohne JavaScript zu verwenden. Aber Laravel enthält mehrere grundlegende Gerüste, die es einfacher machen, modernes JavaScript basierend auf der Vue-Bibliothek zu erstellen. Vue bietet eine äußerst ausdrucksstarke API, die Komponenten verwendet, um robustes JavaScript zu erstellen. Wie CSS können JavaScript-Komponenten mit Laravel Mix einfach in einer einzigen, browserbasierten JavaScript-Datei kompiliert werden.

Front-End-Gerüst löschen

Um Front-End-Gerüst aus Ihrer Anwendung zu entfernen, verwenden Sie den Befehl preset Artisan. Durch Ausführen des Befehls none mit der Option preset werden Bootstrap- und Vue-Gerüste aus der Anwendung entfernt, sodass nur leere SASS-Dateien und mehrere häufig verwendete JavaScript-Toolbibliotheken übrig bleiben:

php artisan preset none

Geschrieben CSS

Die package.json-Datei von Laravel enthält das bootstrap-Paket, das Ihnen dabei hilft, mit der Initialisierung des Front-Ends Ihrer Anwendung mit Bootstrap zu beginnen. Sie können jedoch Abhängigkeitspakete in package.json entsprechend den Anforderungen Ihrer eigenen Anwendung hinzufügen oder entfernen. Sie müssen das Bootstrap-Framework nicht verwenden, um Laravel-Anwendungen zu erstellen, es bietet lediglich einen benutzerfreundlichen Ausgangspunkt für Benutzer, die es verwenden möchten.

Bevor Sie CSS kompilieren, verwenden Sie bitte den Node Package Manager (NPM), um die Front-End-Abhängigkeiten des Projekts zu installieren:

npm install

Sobald Sie npm install zum Installieren der Abhängigkeitspakete verwendet haben, können Sie dies tun Verwenden Sie Laravel Mix, um SASS für natives CSS zu kompilieren. Der Befehl .npm run dev verarbeitet Deklarationen in webpack.mix.js-Dateien. Normalerweise wird das kompilierte CSS im public/css-Verzeichnis abgelegt:

npm run dev

Laravels Standarddatei webpack.mix.js kompiliert die resources/sass/app.scss SASS-Datei. app.scss Importieren Sie die SASS-Variablendatei und laden Sie Bootstrap, das einen benutzerfreundlichen Ausgangspunkt für die meisten Anwendungen bietet. Es steht Ihnen frei, die app.scss-Datei so anzupassen, dass Sie alles verwenden, was Sie möchten, oder sogar einen völlig anderen Präprozessor, indem Sie Laravel Mix konfigurieren.

JavaScript schreiben

Alle JavaScript-Pakete, von denen die Anwendung abhängt, müssen in der Datei package.json im Projektstammverzeichnis gefunden werden. Diese Datei ähnelt der Datei composer.json, wobei die Datei composer.json PHP-Abhängigkeiten und die Datei package.json JavaScript-Abhängigkeiten auflöst. Verwenden Sie den Node Package Manager (NPM), um diese abhängigen Pakete zu installieren:

npm install

{tip} Standardmäßig enthält die package.json-Datei von Laravel mehrere Pakete wie vue und axios Beginnen Sie mit der Erstellung von JavaScript-Anwendungen. Sie können Abhängigkeiten in der Datei package.json je nach Bedarf für Ihre Anwendung hinzufügen oder entfernen.

Sobald diese Pakete installiert sind, können Sie den Befehl npm run dev verwenden, um Ihre Ressourcen zu kompilieren. Webpack-Modul-Bundler für moderne JavaScript-Anwendungen. Wenn Sie den Befehl npm run dev ausführen, führt Webpack die Anweisungen in der Datei webpack.mix.js aus:

npm run dev

Standardmäßig kompilieren die webpack.mix.js-Dateien von Laravel SASS- und resources/js/app.js-Dateien. Sie können Komponenten in app.js-Dateien registrieren, wenn Sie andere Frameworks zum Konfigurieren Ihrer JavaScript-Anwendungen verwenden möchten. Kompiliertes JavaScript wird normalerweise im Verzeichnis public/js abgelegt.

{tip} Die app.js-Datei lädt die resources/js/bootstrap.js-Datei, die für die Konfiguration und den Start von Vue, Axios, jQuery und anderen JavaScript-Abhängigkeiten verantwortlich ist. Wenn Sie zusätzliche JavaScript-Abhängigkeiten konfigurieren möchten, können Sie dies in dieser Datei tun.

Schreiben von Vue-Komponenten

Standardmäßig enthalten reine Laravel-Anwendungen ExampleComponent.vue Vue-Komponenten, gespeichert im Verzeichnis resources/js/components. Die ExampleComponent.vue-Datei ist ein Beispiel für eine Vue-Komponente mit einer einzigen Datei, die JavaScript und HTML der Komponente in derselben Datei definiert. Einzeldateikomponenten bieten eine einfache Möglichkeit, JavaScript-gesteuerte Anwendungen zu erstellen. Diese Beispielkomponente ist in der app.js-Datei registriert:

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

Um diese Komponente in Ihrer App zu verwenden, müssen Sie sie in eine HTML-Vorlage einfügen. Um beispielsweise den Befehl make:auth Artisan auszuführen, um das Grundgerüst der Benutzerauthentifizierungs- und Registrierungsseite der Anwendung zu erstellen, fügen Sie einfach diese Komponente in die home.blade.php Blade-Vorlage ein:

@extends('layouts.app')
@section('content')  
  <example-component></example-component>
 @endsection

{tip} Denken Sie daran , jedes Mal Wenn Sie die Vue-Komponente ändern, müssen Sie den Befehl npm run dev ausführen. Sie können auch den Befehl npm run watch ausführen, um geänderte Komponenten zu überwachen und automatisch neu zu kompilieren.

Wenn Sie daran interessiert sind, weiter zu lernen, wie man Vue-Komponenten schreibt, können Sie die Vue-Dokumentation lesen, die einen umfassenden und leicht lesbaren Überblick über das gesamte Vue-Framework bietet .

React verwenden

Wenn Sie React zum Erstellen von JavaScript-Anwendungen bevorzugen, können Sie mit Laravel ganz einfach zwischen Vue-Scaffolding und React-Scaffolding wechseln. In einer reinen Laravel-Anwendung kann dies über den Befehl react mit dem Parameter preset erreicht werden:

php artisan preset react

Dieser Befehl entfernt das Vue-Gerüst und ersetzt es durch ein React-Gerüst, das ebenfalls eine Komponente enthält Beispiel.