Laravel 11.x 中使用 Vue 3 构建单页
本篇文章将学习如何在 Laravel 11.x 中使用现代化前端构建工具使用 Vu3 进行开发单页应用。
本篇文章分为两大部分：Laravel 11.x 中如何使用 Vue 和 使用 Vue 3 进行单页应用开发。当然了，本篇文章不会完完全全构建出来一个完整的单页应用出来，而通过简单的案例演示，让大家都学习怎么在 Laravel 11.x 中使用 Vue 进行开发。
如下是我的开发环境相关软件版本：
- Nodejs v20.11.1
- pnpm v8.15.4
- php 8.2.0
- Composer version 2.7.4
Laravel 11.x 中安装使用 Vue 3
1、创建项目
# 方式 1，使用构建器安装
$ composer global require laravel/installer
$ laravel new la11-vue3
# 方式 2
# $ composer create-project laravel/laravel la11-vue3
2、安装 Vue 3
# 安装 Vue 3
$ pnpm install vue@latest
# 安装 Vue Vite 插件
$ pnpm install --save-dev @vitejs/plugin-vue
3、导入 Vue
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
// 引入 vue
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/components/app.vue
<template>
<h1>Laravel 11 & Vue 3</h1>
</template>
挂载组件：resources/js/app.js
import './bootstrap';
// 导入组件
import app from './components/app.vue';
// 导入挂载方法
import { createApp } from 'vue';
// 挂载 vue
createApp(app).mount('#app')
5、使用组件
resources/views/welcome.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel 11 & Vue 3 & Vite 5 开发单页应用</title>
@vite('resources/css/app.css')
</head>
<body id="app">
@vite('resources/js/app.js')
</body>
</html>
6、启动服务
启动 laravel 服务
$ php artisan serve
启动 vue 服务
$ pnpm dev
接下来，浏览器中访问 http://localhost:8000/ 就可以看到效果啦。
Laravel 11.x 使用 Vue 3 开发单页应用
趁热打铁，续接上文，进行单页应用开发。
1、安装路由
$ pnpm i vue-router
2、创建组件
首页：resources/js/components/HomePage.vue
<template>
<h1>主页</h1>
</template>
关于：resources/js/components/AboutPage.vue
<template>
<h1>关于</h1>
</template>
404 页面：resources/js/components/NotFoundPage.vue
<template>
<h1>404</h1>
</template>
3、创建路由
resources/js/router/index.js
import {createRouter, createWebHistory} from 'vue-router';
import HomePage from '../components/HomePage.vue';
import AboutPage from '../components/AboutPage.vue';
import NotFoundPage from '../components/NotFoundPage.vue';
const routes = [
{
path: '/',
component: HomePage,
meta: {
title:'首页'
}
},
{
path:'/about',
component:AboutPage,
meta: {
title:'关于我'
}
},
{
path:'/:patchMatch(.*)',
component:NotFoundPage,
meta: {
title:'404'
}
}
];
const router = createRouter({
history:createWebHistory(),
routes
})
export default router
4、导入 router
产resources/js/app.js
import './bootstrap';
import app from './components/app.vue';
import { createApp } from 'vue';
// 导入 router
import router from './router';
createApp(app).use(router).mount('#app')
5、使用路由
resources/js/components/app.vue
<template>
<h1>Laravel 11 & Vue 3</h1>
<nav>
<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>
</nav>
<main>
<router-view />
</main>
</template>
6、启动服务
服务启动后，在浏览器中访问 http://localhost:8000/ 就可以看到效果了。
假设我们修改访问地址为 http://localhost:8000/aboutaaa 时，由于路由不存在，此时访问的是 Laravel 中的 404 页面，而不是我们自己定义的 Vue 404 页面。现在，下面开始处理这个问题。
7、处理 404
routes/web.php
Route::get('/{patchMatch}', function() {
return view('welcome');
});
此时，再去访问一个不存在的路由时，将会走到我们定义的 Vue 404 路由了。
8、CSS 样式
我们要为选中的导航添加样式。
修改路由：resources/js/router/index.js
...
const router = createRouter({
history:createWebHistory(),
linkExactActiveClass:'active',
routes
})
export default router
添加样式：resources/css/app.css
.link {
padding: 5px;
margin: 5px;
}
.link.active {
background-color: orchid;
color: white;
}
使用样式：resources/js/components/app.vue
<template>
<h1>Laravel 11 & Vue 3</h1>
<nav>
<!-- 添加样式 -->
<router-link to="/" class="link">首页</router-link>
<router-link to="/about" class="link">关于</router-link>
</nav>
<main>
<router-view />
</main>
</template>
至此，Laravel 11 中如何使用 Vue 3 及开发单页应用就已经演示完毕了。