Heim > Artikel > PHP-Framework > Ein Artikel, der ausführlich erklärt, wie man die Version von Inertia Vue3 in Laravel installiert
In der folgenden Tutorial-Kolumne von Laravel erfahren Sie, wie Sie die Inertia Vue3-Version von Laravel installieren. Ich hoffe, dass es für alle hilfreich ist!
$ composer require inertiajs/inertia-laravel
<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/> <link href="{{ mix('/css/app.css') }}" rel="stylesheet"/> <script src="{{ mix('/js/app.js') }}" defer></script> </head> <body> @inertia </body></html>
2.3 Der dritte Schritt
: Führen Sie den artisan-Befehl aus und fügen Sie Middleware hinzu
$ php artisan inertia:middleware
'web' => [ // ... \App\Http\Middleware\HandleInertiaRequests::class,],
: Initialisieren Sie die Anwendung Öffnen Sie /resources/js/app.js, löschen Sie es und überschreiben Sie den folgenden Code
$ npm install @inertiajs/inertia @inertiajs/inertia-vue3
3.3 Schritt 3: npm-Fortschrittsbalkenpaket installieren Seite mit Trägheit erstellt, Der Browser wird nicht aktualisiert, und zur Benutzerwahrnehmung wurde eine benutzerfreundliche Eingabeaufforderung wie der Fortschrittsbalken oben auf der Seite hinzugefügt. [Denken Sie darüber nach] /app.js, löschen und überschreiben Sie den folgenden Code
import { createApp, h } from 'vue'import { createInertiaApp } from '@inertiajs/inertia-vue3'createInertiaApp({ resolve: name => require(`./Pages/${name}`), setup({ el, app, props, plugin }) { createApp({ render: () => h(app, props) }) .use(plugin) .mount(el) },})
3.4 Schritt 4 Verwenden Sie die folgende Webpack-Konfiguration, um den Browser zu zwingen, neue Ressourcen zu laden, nachdem die Datei aktualisiert wurde, anstatt den Cache zu verwenden.
Öffnen Sie webpack.mix.js, löschen und überschreiben Sie den folgenden Code$ npm install @inertiajs/progress
Schritt 1 Verwenden Sie den Befehl npm, um die neueste stabile Version von vue zu installieren. vue() Gehen Sie zu webpack.mix.js
import { createApp, h } from 'vue'import { createInertiaApp } from '@inertiajs/inertia-vue3'import { InertiaProgress } from '@inertiajs/progress'createInertiaApp({ resolve: name => import(`./Pages/${name}`), setup({ el, app, props, plugin }) { createApp({ render: () => h(app, props) }) .use(plugin) .mount(el) },})InertiaProgress.init()
Der dritte Schrittführen Sie den npm-Befehl aus
const mix = require('laravel-mix');mix.js('resources/js/app.js', 'public/js') .postCss('resources/css/app.css', 'public/css', [ // ]);mix.webpackConfig({ output: { chunkFilename: 'js/[name].js?id=[chunkhash]', }});
Lösung: Vue-Loader aktualisieren, ausführen
$ npm install vue@next
Wenn Es wird immer noch ein Fehler gemeldet
Erfolgreicher Status
Empfohlenes Lernen: „
Laravel-Video-Tutorial
“Das obige ist der detaillierte Inhalt vonEin Artikel, der ausführlich erklärt, wie man die Version von Inertia Vue3 in Laravel installiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!