Ein Artikel, der ausführlich erklärt, wie man die Version von Inertia Vue3 in Laravel installiert-Laravel-php.cn

Ein Artikel, der ausführlich erklärt, wie man die Version von Inertia Vue3 in Laravel installiert

藏色散人

Freigeben： 2022-01-27 09:19:35

nach vorne

2420 Leute haben es durchsucht

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

Nach dem Login kopieren

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(&#39;/css/app.css&#39;) }}" rel="stylesheet"/>
        <script src="{{ mix(&#39;/js/app.js&#39;) }}" defer></script>
    </head>
    <body>
        @inertia    </body></html>

Nach dem Login kopieren

2.3 Der dritte Schritt
: Führen Sie den artisan-Befehl aus und fügen Sie Middleware hinzu

$ php artisan inertia:middleware

Nach dem Login kopieren

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,],

Nach dem Login kopieren

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

Nach dem Login kopieren

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)
  },})

Nach dem Login kopieren

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

Nach dem Login kopieren

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()

Nach dem Login kopieren

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]',
    }});

Nach dem Login kopieren

Wenn ein Fehler gemeldet wird

Lösung: Vue-Loader aktualisieren, ausführen

$ npm install vue@next

Nach dem Login kopieren

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!