inertia vue3バージョンをlaravelにインストールする方法-Vue.js-php.cn

inertia vue3バージョンをlaravelにインストールする方法

WBOY

リリース： 2023-05-15 10:31:05

転載

1144 人が閲覧しました

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番目のステップ:laravelディレクトリresources/views/add app。 Blade.php ファイルに次のコードを追加します

<!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>

ログイン後にコピー

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

$ php artisan inertia:middleware

ログイン後にコピー

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

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

ログイン後にコピー

3. クライアントの構成

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

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

ログイン後にコピー

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

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

ログイン後にコピー

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

$ npm install @inertiajs/progress

ログイン後にコピー

インストールが完了したら、導入して初期化し、/resouces/js/app.js を開き、次のコードをクリアして上書きします

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

ログイン後にコピー

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

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

ログイン後にコピー

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

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

$ npm install vue@next

ログイン後にコピー

ステップ 2 .vue() を webpack.mix.js に追加します

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

ログイン後にコピー

ステップ 3npm コマンドを実行します