So installieren Sie die Inertia Vue3-Version in Laravel-View.js-php.cn

So installieren Sie die Inertia Vue3-Version in Laravel

WBOY

Freigeben： 2023-05-15 10:31:05

nach vorne

1074 Leute haben es durchsucht

1. Vorinstallationsanforderungen

1.1 Das Laravel-Framework ist installiert
1.2 Node JS ist installiert
1.3 Das Npm-Paketverwaltungstool ist installiert

2.1 Der erste Schritt

: Composer installiert Inertia-Laravel

$ 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 die 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

&#39;web&#39; => [
    // ...
    \App\Http\Middleware\HandleInertiaRequests::class,],

Nach dem Login kopieren

3. Client-Konfiguration

3.1 Schritt 1

: Verwenden Sie den Befehl npm, um die Front-End-Framework-Abhängigkeiten zu installieren und Installieren Sie die VUE3-Version.

$ npm install @inertiajs/inertia @inertiajs/inertia-vue3

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

import { createApp, h } from &#39;vue&#39;import { createInertiaApp } from &#39;@inertiajs/inertia-vue3&#39;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.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

$ npm install @inertiajs/progress

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

import { createApp, h } from &#39;vue&#39;import { createInertiaApp } from &#39;@inertiajs/inertia-vue3&#39;import { InertiaProgress } from &#39;@inertiajs/progress&#39;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

4. Installieren Sie VUE
Schritt 1

Verwenden Sie den Befehl npm, um die neueste stabile Version von vue zu installieren

const mix = require(&#39;laravel-mix&#39;);mix.js(&#39;resources/js/app.js&#39;, &#39;public/js&#39;)
    .postCss(&#39;resources/css/app.css&#39;, &#39;public/css&#39;, [
        //
    ]);mix.webpackConfig({
    output: {
        chunkFilename: &#39;js/[name].js?id=[chunkhash]&#39;,
    }});

Nach dem Login kopieren

Schritt 2 .vue() hinzufügen zum Webpack .mix.js

$ npm install vue@next

Nach dem Login kopieren

Schritt 3Durch den NPM-Befehl ausführen

const mix = require(&#39;laravel-mix&#39;);mix.js(&#39;resources/js/app.js&#39;, &#39;public/js&#39;)
    .vue()
    .postCss(&#39;resources/css/app.css&#39;, &#39;public/css&#39;, [
        //
    ]);mix.webpackConfig({
    output: {
        chunkFilename: &#39;js/[name].js?id=[chunkhash]&#39;,
    }});

Nach dem Login kopieren

Wenn ein Fehler gemeldet wird

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

$ npm run watch

Nach dem Login kopieren

laravel怎么安装inertia vue3的版本 Wenn weiterhin ein Fehler gemeldet wird

Lösung: Fügen Sie einen Pages-Ordner im Verzeichnis resources/js hinzu.

laravel怎么安装inertia vue3的版本 Erfolgsstatus

Das obige ist der detaillierte Inhalt vonSo installieren Sie die Inertia Vue3-Version in Laravel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!