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 までご連絡ください。

分享两个可以绘制 Flowable 流程图的Vue前端库Sep 07, 2022 pm 07:59 PM

前端有没有现成的库，可以直接用来绘制 Flowable 流程图的？下面本篇文章就跟小伙伴们介绍一下这两个可以绘制 Flowable 流程图的前端库。

vue是前端css框架吗Aug 26, 2022 pm 07:37 PM

vue不是前端css框架，而是前端JavaScript框架。Vue是一套用于构建用户界面的渐进式JS框架，是基于MVVM设计模式的前端框架，且专注于View层。Vue.js的优点：1、体积小；2、基于虚拟DOM，有更高的运行效率；3、双向数据绑定，让开发者不用再去操作DOM对象，把更多的精力投入到业务逻辑上；4、生态丰富、学习成本低。

聊聊Vue3+qrcodejs如何生成二维码并添加文字描述Aug 02, 2022 pm 09:19 PM

Vue3如何更好地使用qrcodejs生成二维码并添加文字描述？下面本篇文章给大家介绍一下Vue3+qrcodejs生成二维码并添加文字描述，希望对大家有所帮助。

手把手带你利用vue3.x绘制流程图Jun 08, 2022 am 11:57 AM

利用vue3.x怎么绘制流程图？下面本篇文章给大家分享基于 vue3.x 的流程图绘制方法，希望对大家有所帮助！

一文深入详解Vue路由：vue-routerSep 01, 2022 pm 07:43 PM

本篇文章带大家详解Vue全家桶中的Vue-Router，了解一下路由的相关知识，希望对大家有所帮助！

手把手带你使用Vue开发一个五子棋小游戏！Jun 22, 2022 pm 03:44 PM

本篇文章带大家利用Vue基础语法来写一个五子棋小游戏，希望对大家有所帮助！

手把手带你了解VUE响应式原理Aug 26, 2022 pm 08:41 PM

本篇文章我们来了解 Vue2.X 响应式原理，然后我们来实现一个 vue 响应式原理（写的内容简单）实现步骤和注释写的很清晰，大家有兴趣可以耐心观看，希望对大家有所帮助！

通过9个Vue3 组件库，看看聊前端的流行趋势！May 07, 2022 am 11:31 AM

本篇文章给大家分享9个开源的 Vue3 组件库，通过它们聊聊发现的前端的流行趋势，希望对大家有所帮助！

See all articles

ホットAIツール

ホットツール

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。