Ausführliche Erklärung zur schnellen Installation von Bootstrap in Laravel9.x

Installieren Sie das Bootstrap-Framework elegant und einfach in Laravel 9.x (Vite-Artikel)

In diesem Artikel teilen wir Ihnen die folgenden Erfahrungen mit der Verwendung des Front-End-Workflows unter Laravel 9.x mit. Ich habe zuvor Laravel Mix verwendet, aber jetzt haben wir Ich werde es dieses Mal verwenden. Das offiziell empfohlene Vite-Tool verwendet weiterhin Bootstrap 5 und erleichtert Kursteilnehmern nicht nur die Beherrschung des neuesten Front-End-Workflows, sondern passt auch ihre Lieblingsstile mit einem niedrigen Schwellenwert an. Das Wichtigste ist, den Lernfortschritt und den Rhythmus des Tutorials nicht zu beeinträchtigen. [Empfohlen: Laravel-Video-Tutorial]

vorne geschrieben

Entwicklungsumgebung:

• Die Hauptumgebung ist Windows 10/11 + Homestead, beides sind die neuesten stabilen Versionen

• zwei Plattformen Node.js ist installiert

• Die Laravel-Version ist 9.x (ich verwende beim Posten die neueste Version 9.38.0). Befolgen Sie für andere Dinge, die nicht erwähnt werden, das 9.x-Versions-Tutorial

• Verwenden Sie nicht Laravel Mix Verwenden Sie das offiziell empfohlene neue Front-End-Verpackungstool vite, um die Stiländerungsaufgaben im Tutorial abzuschließen.

Mein Ziel: Verwenden Sie Node.js auf Windows- und Homestead-Plattformen, um die Fallstricke der Installation von Bootstrap zu vermeiden, damit fleißige Win-Benutzer „4.2 von „L01 Laravel Tutorial – Praktische Einführung in die Webentwicklung“ lernen können. Stilverschönerung „Das Kapitel ist elegant und entspannt.

Kein Unsinn mehr, Online-Bedienung

Wie man funktioniert

Erstens wird davon ausgegangen, dass der Leser das Kapitel „4.2. Stilverschönerung“ bereits gelernt hat und zweitens leider nicht weiterkommt Führen Sie Node.js auf Ihrem eigenen Windows-Computer und Ihrer Homestread-Umgebung aus. Wenn Node.js nicht unter Windows installiert ist, können Sie es über eine Suchmaschine suchen und herunterladen. Der Installationsprozess ist kinderleicht und ich werde nicht auf Details eingehen.

Zuerst führen wir den folgenden Schritt gemäß dem Tutorial aus, führen ihn aber noch nicht aus in der Windows-Umgebung Terminal, z. B. Powershell, und führen Sie

composer require laravel/ui:3.4.5 --dev

aus. Gehen Sie dann zurück zu Ihrem Editor und suchen Sie die neu generierte Datei vite.coffig.js im Stammverzeichnis des Projekts. Wir ändern sie wie folgt:

composer require laravel/ui  // 发文时最新的版本是 4.0.1，对不住了版主，我自己偷摸的上到最新的版本惹
php artisan ui bootstrap

und importieren Sie sie dann boostrap 5 in app.js Gehen Sie nach scss

npm config set registry=https://registry.npm.taobao.org
npm i

zur Blade-Vorlage des Projekts und ersetzen Sie den ursprünglichen mix()-Code. Wenn wir dem Tutorial hier folgen, müssen wir nur die Datei default.blade.php ändern, d. php Nach der Position

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path'

export default defineConfig({
   plugins: [
       laravel([
           'resources/js/app.js',
       ]),
   ],
   resolve: {
       alias: {
           '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
       }
   },
});

wird in unserer späteren Studie alles, was Mix betrifft, nach dieser Idee behandelt.

Geben Sie abschließend den folgenden Befehl im Windows-Terminal ein

import './bootstrap';

// 以下为新增部分
import '../sass/app.scss'
import * as bootstrap from 'bootstrap'

Der Vorgang ist abgeschlossen. Aktualisieren Sie den folgenden Browser, um den Effekt zu sehen.

Was den Unterschied zwischen dev und build betrifft:

dev kann jederzeit angepasst werden, wenn es für die Entwicklung geeignet ist. Ihre Änderungen werden in Echtzeit und automatisch wirksam. Es wird empfohlen, immer ein Fenster zu öffnen und zu hängen Es wird während der Entwicklung im Hintergrund ausgeführt.

Build dauert einen Schritt. Nachdem die Verarbeitung abgeschlossen und die CSS- und JS-Dateien ausgegeben wurden, wird sie nur einmal und nicht automatisch ausgeführt, was für die letzte Veröffentlichungsphase geeignet ist.

• Was die Geschwindigkeit angeht, wird Vite die Arbeit im Vergleich zum Laravel Mix-Frontend-Workflow blitzschnell für Sie erledigen. Keine Sorge, die Verarbeitungsgeschwindigkeit von Vite ist wirklich zu schnell.

• Projektbereitstellung

Wenn unser Code in das Remote-Git-Warehouse hochgeladen und dann in die Produktionsumgebung gezogen wird, werden die von Vite mithilfe von npm run build generierten CSS- und JS-Dateien nicht in die Git-Verwaltung einbezogen Sie können sie nicht in Local git add -A einschließen. Wir müssen die .gitignore-Datei im Stammverzeichnis des lokalen Entwicklungsprojekts finden und die Zeile /public/build wie folgt auskommentieren oder löschen git add -A erkannt.

Natürlich können Sie Stile auch online zusammenstellen. Solange Sie diese Idee verstehen, können Sie aus einem Beispiel Rückschlüsse ziehen.

Weitere Tipps

Bootstrap 5 hat die Jumbotron-Komponente der Originalversion 4 gelöscht, sodass Sie den entsprechenden Stil nicht sehen können, was normal ist. Wenn Sie es ändern möchten, nutzen Sie bitte Ihre Fantasie und schreiben Sie selbst eines.

Was die Probleme mit dem Browser-Cache in Kapitel 4.4 betrifft: Wenn Sie den Front-End-Workflow von vite verwenden, wird das Suffix nach Abschluss des Builds automatisch zur Stildatei hinzugefügt, sodass Sie dieses Kapitel nicht lesen müssen Kein Arbeitsmodus mit Vite. Überspringen Sie diese Frage und lernen Sie weiter.

Wenn Sie feststellen, dass es in diesem Artikel einige Stellen gibt, an denen Sie Ihre eigenen Methoden entwickeln können, ist dies nicht das Beste. Das beste Ergebnis ist, wenn jeder seine eigenen unabhängigen Denkfragen stellen kann Lösungen während des Lernprozesses. Lassen Sie uns Lösungen finden, die zu Ihnen passen.

Abschließende Gedanken

Verglichen mit der Methode im Tutorial des Moderators, mit der wir eine bestimmte Version zum Erlernen von Laravel verwenden können, folge ich immer noch gerne der offiziellen Dokumentation und versuche, native Methoden zu verwenden, um relevante Effekte zu erzielen, und verwende in allen Aspekten die neueste Version Auch vom Moderator empfohlen, ist es ein „rebellisches Übel“ unter der Standardisierungsidee. Ich muss auch die Kompatibilitätsprobleme mit neuen Versionen lösen, auf die ich von Zeit zu Zeit stoße. Kurz gesagt, ich hoffe, dass dieser Artikel Anfängern eine neue Idee bieten kann. Schließlich befinden wir uns in der Lernphase und nicht in der Entwicklung der Produktionsumgebung.

Verglichen mit meinem bisherigen Erfahrungsbericht im Jahr 8. Lernen Sie selbst, finden Sie Lösungen und lösen Sie dann Probleme. Ich glaube, dass die späteren Versionen von 10.x und 100.x mehr neue Inhalte und Änderungen enthalten werden Probleme zu lösen und starre Lernmethoden zu vermeiden, wird nicht funktionieren. Ich hoffe, dass alle Anfänger auf der Lernreise diesen schönen Rahmen nicht aufgeben werden.

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur schnellen Installation von Bootstrap in Laravel9.x. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!