ホームページ >PHPフレームワーク >Laravel >inertia vue3版をlaravelにインストールする方法を詳しく解説した記事

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

藏色散人転載: 2022-01-26 16:08:102398ブラウズ

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>
    
        <meta>
        <meta>
        <link>
        <script></script>
    
    
        @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 経由でインストールします。コマンド