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:051074semak 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
: 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('/css/app.css') }}" rel="stylesheet"/>
<script src="{{ mix('/js/app.js') }}" defer></script>
</head>
<body>
@inertia </body></html>
: 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
'web' => [
// ...
\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
: Mulakan aplikasiBuka /resouces/js/app.js, kosongkan dan tulis ganti kod berikut
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 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 '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 Langkah 4Gunakan 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('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 Pasang VUE Langkah 1
Gunakan arahan npm untuk memasang versi stabil terkini. daripada vue$ npm install vue@next
Tambahkan .vue() pada webpack.mix.jsconst 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]',
}});
Jalankan melalui arahan npm $ npm run watch
Penyelesaian: tingkatkan vue-loader, laksanakan
$ npm i vue-loaderJika ralat masih dilaporkan
Penyelesaian: Tambahkan folder Halaman di bawah direktori sumber/js.
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!