无需Laravel Starter Kit(laravel/ui等)，如何简洁安装使用Vue.js？

完全可以不用任何Starter Kit，直接手动集成Vue.js并自行实现登录、注册和路由功能，步骤如下：

1. 初始化Laravel项目（若未创建） #

composer create-project laravel/laravel your-project-name
cd your-project-name

2. 安装Vue.js及Vite插件 #

Laravel当前默认使用Vite作为构建工具，直接安装Vue和对应的Vite插件即可：

npm install vue @vitejs/plugin-vue

3. 配置Vite支持Vue #

修改项目根目录的vite.config.js，引入Vue插件：

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,
                },
            },
        }),
    ],
});

4. 设置Vue入口与根组件 #

• 修改resources/js/app.js，创建Vue实例并挂载到DOM：

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

createApp(App).mount('#app');

• 创建resources/js/App.vue作为Vue根组件：

<template>
    <div class="min-h-screen bg-gray-100">
        <!-- 后续路由视图、组件都会渲染在这里 -->
        <router-view></router-view>
    </div>
</template>

<script setup>
// 根组件逻辑
</script>

5. 在Laravel视图中引入Vite资源 #

修改resources/views/welcome.blade.php，替换为以下内容，用于承载Vue应用：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel + Vue</title>
    @vite('resources/css/app.css')
</head>
<body>
    <div id="app"></div>
    @vite('resources/js/app.js')
</body>
</html>

6. 启动开发服务 #

同时启动后端和前端开发服务器：

# 后端
php artisan serve
# 前端（新开终端）
npm run dev

此时访问http://localhost:8000就能看到Vue应用正常渲染。

自行实现登录、注册与路由 #

前端路由：集成Vue Router #

安装Vue Router并配置路由：

npm install vue-router@4

• 创建resources/js/router/index.js：

import { createRouter, createWebHistory } from 'vue-router';
import Login from '../components/Login.vue';
import Register from '../components/Register.vue';
import Dashboard from '../components/Dashboard.vue';

const routes = [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
    { path: '/register', component: Register },
    { 
        path: '/dashboard', 
        component: Dashboard,
        meta: { requiresAuth: true } // 标记需要登录才能访问
    },
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

// 路由守卫：验证登录状态
router.beforeEach((to, from, next) => {
    const token = localStorage.getItem('auth_token');
    if (to.meta.requiresAuth && !token) {
        next('/login');
    } else {
        next();
    }
});

export default router;

• 修改resources/js/app.js引入路由：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

后端API：实现登录/注册逻辑 #

• 在routes/api.php添加API路由：

use App\Http\Controllers\AuthController;

Route::post('/register', [AuthController::class, 'register']);
Route::post('/login', [AuthController::class, 'login']);
Route::post('/logout', [AuthController::class, 'logout'])->middleware('auth:sanctum');

• 创建App/Http/Controllers/AuthController.php：

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;

class AuthController extends Controller
{
    // 注册逻辑
    public function register(Request $request)
    {
        $validated = $request->validate([
            'name' => 'required|string|max:255',
            'email' => 'required|string|email|max:255|unique:users',
            'password' => 'required|string|min:8|confirmed',
        ]);

        $user = User::create([
            'name' => $validated['name'],
            'email' => $validated['email'],
            'password' => Hash::make($validated['password']),
        ]);

        // 生成Sanctum令牌
        $token = $user->createToken('auth_token')->plainTextToken;

        return response()->json([
            'message' => '注册成功',
            'token' => $token,
            'user' => $user
        ], 201);
    }

    // 登录逻辑
    public function login(Request $request)
    {
        $validated = $request->validate([
            'email' => 'required|string|email',
            'password' => 'required|string',
        ]);

        $user = User::where('email', $validated['email'])->first();

        if (!$user || !Hash::check($validated['password'], $user->password)) {
            return response()->json(['message' => '邮箱或密码错误'], 401);
        }

        $token = $user->createToken('auth_token')->plainTextToken;

        return response()->json([
            'message' => '登录成功',
            'token' => $token,
            'user' => $user
        ]);
    }

    // 登出逻辑
    public function logout(Request $request)
    {
        $request->user()->currentAccessToken()->delete();
        return response()->json(['message' => '已登出']);
    }
}

前端组件：编写登录/注册页面 #

以Login.vue为例：

<template>
    <div class="max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow">
        <h2 class="text-2xl font-bold mb-6 text-center">登录</h2>
        <form @submit.prevent="handleLogin">
            <div class="mb-4">
                <label class="block text-gray-700 mb-2" for="email">邮箱</label>
                <input 
                    type="email" 
                    id="email"
                    v-model="form.email"
                    class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                    placeholder="请输入邮箱"
                >
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 mb-2" for="password">密码</label>
                <input 
                    type="password" 
                    id="password"
                    v-model="form.password"
                    class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                    placeholder="请输入密码"
                >
            </div>
            <button 
                type="submit"
                class="w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 transition-colors"
            >
                登录
            </button>
            <p class="mt-4 text-center">
                还没有账号？<router-link to="/register" class="text-blue-500 hover:underline">立即注册</router-link>
            </p>
        </form>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const form = ref({
    email: '',
    password: ''
});
const router = useRouter();

const handleLogin = async () => {
    try {
        const response = await fetch('/api/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(form.value),
        });

        const data = await response.json();
        if (response.ok) {
            localStorage.setItem('auth_token', data.token);
            router.push('/dashboard');
        } else {
            alert(data.message || '登录失败');
        }
    } catch (error) {
        alert('网络请求出错，请稍后重试');
    }
};
</script>

内容的提问来源于stack exchange，提问作者Galbert