Heim > Artikel > Web-Frontend > So installieren Sie die Inertia Vue3-Version in Laravel
1.1 Das Laravel-Framework ist installiert
1.2 Node JS ist installiert
1.3 Das Npm-Paketverwaltungstool ist installiert
$ composer require inertiajs/inertia-laravel2.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 die Middleware hinzu
$ php artisan inertia:middlewareNachdem die Datei generiert wurde, fügen Sie manuell die letzte Zeile der Web-Middleware-Gruppe in der Kernel-Datei hinzu
'web' => [ // ... \App\Http\Middleware\HandleInertiaRequests::class,],3. Client-Konfiguration
$ npm install @inertiajs/inertia @inertiajs/inertia-vue33.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 '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.3 Schritt 3
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
3.4 Schritt 4
Öffnen Sie webpack.mix.js, löschen und überschreiben Sie den folgenden Code
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()
4. Installieren Sie VUE
Schritt 1
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]', }});
Schritt 2 .vue() hinzufügen zum Webpack .mix.js
$ npm install vue@next
Schritt 3Durch den NPM-Befehl ausführen
const mix = require('laravel-mix');mix.js('resources/js/app.js', 'public/js') .vue() .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 run watch
Wenn weiterhin ein Fehler gemeldet wird
Lösung: Fügen Sie einen Pages-Ordner im Verzeichnis resources/js hinzu.
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!