Laravel 10.x 安装 Inertiajs & Vue3

作者: 温新

阅读: 2673

时间: 2023-03-26 06:19:01

hi，我是温新，一名 PHPer

按照官方文档来安装，大概率会被坑一下。本篇文章将会提醒哪一个地方有坑点，确保安装上。

第一步：安装 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:middleware

2、注册中间件

<?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

请登录后再评论