Rumah > Artikel > hujung hadapan web > Bagaimana untuk memasang versi inersia vue3 dalam laravel

Bagaimana untuk memasang versi inersia vue3 dalam laravel

WBOYke hadapan: 2023-05-15 10:31:051021semak imbas

1. Keperluan prapemasangan

1.1 Rangka kerja Laravel dipasang
1.2 Node JS dipasang
Alat pengurusan pakej 1.3 Npm dipasang

2 >

2.1 Langkah pertama

: komposer memasang inersia-laravel

$ composer require inertiajs/inertia-laravel

2.2 Langkah kedua

: sumber direktori laravel/pandangan/tambah fail php app.blade, tambah kod berikut

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

: Jalankan arahan artisan dan tambah middleware

$ php artisan inertia:middleware

Selepas fail dijana, tambahkannya secara manual ke web dalam Kernel fail Baris terakhir kumpulan middleware

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

3. Konfigurasi pelanggan

3.1 Langkah 1

: Gunakan arahan npm untuk memasang kebergantungan rangka kerja bahagian hadapan dan pasang Versi VUE3.

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

3.2 Langkah 2

: Mulakan aplikasiBuka /resouces/js/app.js, kosongkan dan tulis ganti kod berikut

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 Tiga langkah

: npm pasang pakej bar kemajuan Penyemak imbas tidak akan memuat semula halaman yang dibuat menggunakan inersia Untuk persepsi pengguna, gesaan mesra seperti bar kemajuan di bahagian atas halaman ditambahkan [Memikirkannya]

$ npm install @inertiajs/progress

Selepas pemasangan selesai, perkenalkan dan mulakan, buka /resouces/js/app.js, kosongkan dan tulis ganti kod berikut

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 Langkah 4

Gunakan konfigurasi webpack berikut untuk memaksa menyemak imbas Pelayan memuatkan sumber baharu selepas fail dikemas kini dan bukannya menggunakan cache. Buka webpack.mix.js, kosongkan dan tulis ganti kod berikut

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 Pasang VUE

Langkah 1

Gunakan arahan npm untuk memasang versi stabil terkini. daripada vue

$ npm install vue@next

Langkah 2

Tambahkan .vue() pada 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;,
    }});

Langkah 3

Jalankan melalui arahan npm

$ npm run watch

Jika ralat dilaporkan

laravel怎么安装inertia vue3的版本 Penyelesaian: tingkatkan vue-loader, laksanakan

$ npm i vue-loader

Jika ralat masih dilaporkan

laravel怎么安装inertia vue3的版本 Penyelesaian: Tambahkan folder Halaman di bawah direktori sumber/js.

Status Kejayaan

Atas ialah kandungan terperinci Bagaimana untuk memasang versi inersia vue3 dalam laravel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Artikel ini dikembalikan pada:yisu.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Kaedah untuk komunikasi antara komponen ibu bapa dan anak Vue3 dan pengikatan dua hala antara komponenArtikel seterusnya：Kaedah untuk komunikasi antara komponen ibu bapa dan anak Vue3 dan pengikatan dua hala antara komponen

Artikel berkaitan

Lihat lagi