Heim > Artikel > PHP-Framework > Ein Artikel, der ausführlich erklärt, wie man die Version von Inertia Vue3 in Laravel installiert
Ein Artikel, der ausführlich erklärt, wie man die Version von Inertia Vue3 in Laravel installiert
- 藏色散人nach vorne
- 2022-01-26 16:08:102347Durchsuche
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
2.2 Der zweite Schritt: Fügen Sie die Datei app.blade.php zum Laravel-Verzeichnis resouces/views/ hinzu und fügen Sie den folgenden Code hinzu
<!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
Nachdem die Datei generiert wurde, fügen Sie manuell die letzte Zeile der Web-Middleware-Gruppe in der Kernel-Datei hinzu Installieren Sie die VUE3-Version. 'web' => [
// ...
\App\Http\Middleware\HandleInertiaRequests::class,],
3.2 Schritt 2: 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
4. Installieren Sie VUE
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]',
}});
Wenn ein Fehler gemeldet wird
Lösung: Vue-Loader aktualisieren, ausführen
$ npm install vue@next
Wenn Es wird immer noch ein Fehler gemeldet
Lösung: Fügen Sie einen Pages-Ordner im Verzeichnis resources/js hinzu.
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!