Laravel 10.x 安装 Inertiajs & Vue3
175 / 2 / 创建于 9个月前 /
adong 的个人博客
原文来自 www.ziruchu.com/art/581
第一步：安装 Laravel
composer create-project laravel/laravel la10-inertia-study第二步：安装 inertiajs
composer require inertiajs/inertia-laravel第三步：创建根模板组件
<!-- resources\views\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" />
@vite('resources/js/app.js')
@inertiaHead
</head>
<body>
@inertia
</body>
</html>第四步：创建中间件
1、创建中间件
php artisan inertia:middleware2、注册中间件
<?php
// app\Http\Kernel.php
'web' => [
// ...
\App\Http\Middleware\HandleInertiaRequests::class,
],第五步：安装 vue3
npm install @inertiajs/vue3第六步：初始化 vue
// resources\js\app.js
import './bootstrap';
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
createInertiaApp({
resolve: name => {
const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
return pages[`./Pages/${name}.vue`]
},
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el)
},
})第七步：安装解析 vue 模板插件
这个地方是一个坑，若不安装将无法解析 vue 文件
npm i @vitejs/plugin-vue第八步：配置 vite.config.js 解析 vue 文件
// la10-inertia-study\vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vuePlugin from "@vitejs/plugin-vue";
export default defineConfig({
// 根据自己的需求配置
server: {
host: '192.168.31.90',
port: 5173,
// 是否开启 https
https: false,
},
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
vuePlugin(),
],
});
由于我是在虚拟机中进行开发的，若不配置 server 将会存在跨域问题。
第九步：创建 vue 文件
<template>
<h1>{{ name }}</h1>
</template>
<script setup>
// resources\js\Pages\Index.vue
const name = 'hello inertia.js'
</script>第十步：配置路由
Route::get('/', function () {
return inertia('Index');
});第十步：测试
npm run dev我使用的是vant 所以这个地方的代码需要改一下，chatgpt改的很省事哈哈
// resources\js\app.js
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import Vant from 'vant';
import 'vant/lib/index.css';
createInertiaApp({
resolve: (name) => {
const pages = import.meta.glob('./Pages/**/*.vue', { eager: true });
return pages[`./Pages/${name}.vue`];
},
setup({ el, App, props, plugin }) {
const app = createApp({ render: () => h(App, props) });
// 使用 Vant 插件
app.use(Vant);
// 挂载应用程序到元素
app.mount(el);
},
});
总结：虽然跑起来了但是吧，感觉很慢本地2-3S我艹，水平有限。还是感觉用blade丝滑。
后来发现我用了VPN，哈哈速度很快很好！本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：