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

Bagaimana untuk memasang versi inersia vue3 dalam laravel

WBOY
WBOYke hadapan
2023-05-15 10:31:051086semak 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