Laravel 11.x 中使用 Vue 3 构建单页

作者: 温新

分类: 【Laravel】

阅读: 1112

时间: 2024-04-27 22:27:29

本篇文章将学习如何在 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 及开发单页应用就已经演示完毕了。

请登录后再评论