Laravel 中集成 Vue.js - 戏里戏外的博客

环境准备

PHP >= 8.1
Node >= 18.3

首先创建 Laravel 项目：

laravel new laravel-vue --git

Tip

选择 "No starter kit" 选项，可以自由选择测试框架比如 pest 和数据库驱动 MySQL 。

创建基础布局

1. 更新路由

在 routes/web.php 中添加首页路由：

Route::get('/', function () {
    return view('home');
});

2. 创建视图文件

# 创建首页视图
php artisan make:view home

# 创建布局组件
php artisan make:component Layouts\\App --view

3. 设置布局结构

resources/views/layouts/app.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{ config('app.name') }}</title>
    @vite(['resources/js/app.js', 'resources/css/app.css'])
</head>
<body>
    <div id="app">
        {{ $slot }}
    </div>
</body>
</html>

resources/views/home.blade.php:

<x-layouts.app>
    Home
</x-layouts.app>

安装和配置 Vue.js

1. 安装依赖

yarn add vue @vitejs/plugin-vue

2. 配置 Vite

更新 vite.config.js:

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
})

3. 初始化 Vue 应用

更新 resources/js/app.js:

import './bootstrap';
import { createApp } from 'vue'

const app = createApp({})
app.mount('#app')

创建和使用 Vue 组件

1. 创建示例组件

resources/js/Components/Counter.vue:

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
    {{ count }} 
    <button v-on:click="count++">Increment</button>
</template>

2. 注册组件

更新 resources/js/app.js:

import './bootstrap';
import { createApp } from 'vue'
import Counter from './Components/Counter.vue'

const app = createApp({})
app.component('Counter', Counter)
app.mount('#app')

3. 在视图中使用组件

更新 resources/views/home.blade.php:

<x-layouts.app>
    <Counter />
</x-layouts.app>

启动开发服务器

npm run dev

最佳实践

将 Vue 组件放在 resources/js/Components 目录下
使用 setup 语法糖简化组件编写
确保在布局文件中正确引入 Vite 资源
组件名称使用 PascalCase 命名规范

通过以上步骤，就可以在 Laravel 项目中愉快地使用 Vue.js 了！