inertia vue3版をlaravelにインストールする方法を詳しく解説した記事-Laravel-php.cn

Laravelの次のチュートリアルコラムでは、laravelのinertia vue3版のインストール方法を紹介しますので、皆様のお役に立てれば幸いです。

1. インストール前の要件

1.1 Laravel フレームワークがインストールされていること

1.2 Node JS がインストールされていること
1.3 Npm パッケージ管理ツールがインストールされていること

##2. サーバー構成

2.1 最初のステップ:composer は inertia-laravel

$ composer require inertiajs/inertia-laravel

ログイン後にコピー

をインストールします

2.2 2 番目のステップ: app.blade.php ファイルを laravel ディレクトリ resouces/views/ に追加し、次のコードを追加します。

nbsp;html>     @inertia

ログイン後にコピー

2.3 ステップ 3: 職人コマンドを実行して追加します。ミドルウェア

$ php artisan inertia:middleware

ログイン後にコピー

ファイルが生成されたら、カーネルファイルに Web ミドルウェアグループの最後の行を手動で追加します

'web' => [ // ... \App\Http\Middleware\HandleInertiaRequests::class,],

ログイン後にコピー

3. クライアント構成

3.1 最初のステップ: npm コマンドを使用して、フロントエンドフレームワークの依存関係をインストールし、VUE3 バージョンをインストールします。

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

ログイン後にコピー

3.2 ステップ 2: アプリケーションの初期化/resouces/js/app.js を開いてクリアし、次のコードを上書きします

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 3 つのステップ: npm install progress bar packageブラウザは惰性で作成されたページを更新しません。ユーザーの認識のために、ページ上部のプログレスバーなどのわかりやすいプロンプトが追加されます。 ]

$ npm install @inertiajs/progress

ログイン後にコピー

インストールが完了したら、導入して初期化し、/resouces/js/app.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()

ログイン後にコピー

3.4 ステップ 4次の Webpack 設定を使用してブラウズを強制します。サーバーは、ファイルが更新された後、キャッシュを使用する代わりに新しいリソースを読み込みます。webpack.mix.js を開き、次のコードをクリアして上書きします

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

ログイン後にコピー

4.VUE をインストールします

最初のステップnpm コマンドを使用します最新の安定バージョンの vue

$ npm install vue@next

ログイン後にコピー

ステップ 2.vue() を webpack.mix.js

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

ログイン後にコピー

ステップ 3npm 経由でインストールします。コマンド