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

ホームページ

ウェブフロントエンド

Vue.js

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 15, 2023 am 10:31 AM

laravelvue3

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 コマンドを実行します

$ npm run watch

エラーが報告された場合

laravel怎么安装inertia vue3的版本

解決策: vue-loader をアップグレードし、

$ npm i vue-loader

If を実行します。まだエラーが報告されています

laravel怎么安装inertia vue3的版本

解決策: resource/js ディレクトリの下に Pages フォルダーを追加します。

成功ステータス

laravel怎么安装inertia vue3的版本

以上がinertia vue3バージョンをlaravelにインストールする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事は亿速云で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

フレームワークの選択：Netflixの決定を推進するものは何ですか？Apr 13, 2025 am 12:05 AM

Netflixは、主に、パフォーマンス、スケーラビリティ、開発効率、エコシステム、技術的な負債、およびフレームワーク選択におけるメンテナンスコストを考慮しています。 1。パフォーマンスとスケーラビリティ：JavaとSpringbootが選択され、大規模なデータと高い同時リクエストを効率的に処理します。 2。開発効率とエコシステム：Reactを使用して、フロントエンド開発効率を向上させ、その豊富なエコシステムを利用します。 3.技術的な負債とメンテナンスコスト：node.jsを選択してマイクロサービスを構築して、メンテナンスコストと技術的債務を削減します。

Netflixのフロントエンドの反応、Vue、および未来Apr 12, 2025 am 12:12 AM

Netflixは、主にReactをフロントエンドフレームワークとして使用し、特定の機能のためにVUEによって補足されます。 1）Reactのコンポーネント化と仮想DOMは、Netflixアプリケーションのパフォーマンスと開発効率を向上させます。 2）VueはNetflixの内部ツールと小規模プロジェクトで使用されており、その柔軟性と使いやすさが重要です。

フロントエンドのvue.js：実際のアプリケーションと例Apr 11, 2025 am 12:12 AM

Vue.jsは、複雑なユーザーインターフェイスを構築するのに適した進歩的なJavaScriptフレームワークです。 1）そのコア概念には、レスポンシブデータ、コンポーネント、仮想DOMが含まれます。 2）実際のアプリケーションでは、TODOアプリケーションを構築し、Vuerouterを統合することで実証できます。 3）デバッグするときは、vuedevtools and Console.logを使用することをお勧めします。 4）パフォーマンスの最適化は、V-IF/V-Show、リストレンダリング最適化、コンポーネントの非同期負荷などを通じて達成できます。

Vue.jsとReact：重要な違いを理解するApr 10, 2025 am 09:26 AM

Vue.JSは中小企業から中規模のプロジェクトに適していますが、Reactは大規模で複雑なアプリケーションにより適しています。 1。VUE.JSのレスポンシブシステムは、依存関係追跡を介してDOMを自動的に更新し、データの変更を簡単に管理できるようにします。 2.反応は一方向のデータフローを採用し、データは親コンポーネントから子コンポーネントに流れ、明確なデータフローと簡単な抽出構造を提供します。

Vue.js vs. React：プロジェクト固有の考慮事項Apr 09, 2025 am 12:01 AM

VUE.JSは、中小規模のプロジェクトや迅速な反復に適していますが、Reactは大規模で複雑なアプリケーションに適しています。 1）Vue.jsは使いやすく、チームが不十分な状況やプロジェクトスケールが小さい状況に適しています。 2）Reactにはより豊富なエコシステムがあり、高性能で複雑な機能的ニーズを持つプロジェクトに適しています。

Vueにタグをジャンプする方法Apr 08, 2025 am 09:24 AM

VUEでタグのジャンプを実装する方法には、HTMLテンプレートでAタグを使用してHREF属性を指定する方法が含まれます。 VUEルーティングのルーターリンクコンポーネントを使用します。 JavaScriptでこれを使用します。$ router.push（）メソッド。パラメーターはクエリパラメーターに渡すことができ、ルートは動的ジャンプのルーターオプションで構成されています。

VUEのコンポーネントジャンプを実装する方法Apr 08, 2025 am 09:21 AM

VUEでコンポーネントジャンプを実装するための次の方法があります。Router-Linkと＆lt; router-view＆gt;を使用してください。ハイパーリンクジャンプを実行し、ターゲットパスとして属性を指定するコンポーネント。＆lt; router-view＆gt;を使用してください現在ルーティングされているレンダリングされているコンポーネントを表示するコンポーネント。プログラマティックナビゲーションには、router.push（）およびrouter.replace（）メソッドを使用します。前者は歴史を保存し、後者は記録を残さずに現在のルートに取って代わります。