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!

                                                                                                                1. Vorinstallationsanforderungen avel

$ 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

nbsp;html>
    
        <meta>
        <meta>
        <link>
        <script></script>
    
    
        @inertia    

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!