2024.12.01 | 作者：Adlerian
着 Web 技术的不断发展，前后端分离架构已成为现代 Web 开发的主流模式。作为 PHP 最受欢迎的框架之一，Laravel 提供了强大的工具链和完善的生态系统，非常适合处理后端逻辑和 API 服务。Vue 3 则是一个轻量级但功能强大的前端框架，凭借其 Composition API 提供的灵活编程方式，能够高效构建复杂且交互丰富的用户界面。结合 Laravel 11 强大的后端支持与 Vue 3 的响应式组件能力，开发者能够轻松构建高性能、易维护的 Web 应用。
作者使用开发环境版本如下
- Node.js v20.10.0
- PNPM V8.10.5
- PHP 8.2.19
- Composer version 2.7.6
1. 安装 Laravel 11 并配置开发环境
1.1：安装 Composer
Composer 是 Laravel 项目依赖管理的工具。首先确保已经安装 Composer。如果尚未安装，请访问 Composer 官方文档 下载安装。
1.2：创建新的 Laravel项目
使用 Composer 创建一个新的 Laravel 项目：
composer create-project --prefer-dist laravel/laravel laravel-vue-app
这个命令会创建一个名为 laravel-vue-app 的新项目，并安装 Laravel 11 及其依赖。
或者可以通过 Composer 全局安装 Laravel 安装程序，来创建新的 Laravel 项目：
composer global require laravel/installer
laravel new laravel-vue-app
1.3：设置环境配置
进入项目目录：
cd laravel-vue-app
然后复制 .env.example 文件并将其重命名为 .env，这是 Laravel 的环境配置文件：
cp .env.example .env
编辑 .env 文件，配置数据库连接（根据您的数据库设置）：
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database
DB_USERNAME=your_username
DB_PASSWORD=your_password
1.4：生成应用密钥
Laravel 使用密钥来加密应用数据，运行以下命令生成应用密钥：
php artisan key:generate
使用 Laravel Artisan 的 serve 命令启动 Laravel 的本地开发服务器：
php artisan serve
如其他问题详见作者文章 ===>Laravel 11 框架创建与创建遇到的问题【全解析】
2. 安装 Vue 3
Laravel 默认支持 Vue ，但我们可以轻松地为其升级为 Vue 3。接下来，我们将安装 Vue 3 和相关的前端依赖。
2.1：安装 Node.js 和 npm
Vue 3 依赖 Node.js 和 npm（pnpm、 Yarn）来管理前端依赖。如果您的系统中尚未安装 Node.js，请访问 Node.js 官网 下载并安装。
2.2：安装 Vue 3
进入项目目录，并安装 Vue 3 和相关依赖：
$ pnpm install vue@latest
这将安装最新版本的 Vue 3 和 Vue Loader，它们用于处理 .vue 文件。
2.3：安装其他前端依赖
继续安装一些开发所需的工具：
npm install --save-dev @vitejs/plugin-vue
npm install axios
Axios 是一个流行的 HTTP 客户端，用于与后端进行数据通信。我们将用它来从 Vue 组件向 Laravel API 发起请求。
3. 配置 Vite（用于前端构建）
Vite 是一个现代的构建工具，它比传统的 Webpack 更快、更简洁。Laravel 11 已经支持 Vite。
3.1：安装 Vite
运行以下命令安装 Vite：
npm install --save-dev vite
3.2：配置 Vite
在 vite.config.js 文件并配置 Vite 来支持 Vue 3：
// 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,
},
},
}),
],
});
3.3：修改 resources/js 目录
编辑 resources/js/app.js，引入 Vue 和您的 Vue 组件：
import './bootstrap';
//引入vue
import app from './components/BlogPost.vue'
import { createApp } from 'vue';
createApp(app).mount('#app');
在 resources/js/components 目录下创建一个新的 Vue 组件 BlogPost.vue：
<!-- resources/js/components/BlogPost.vue -->
<template>
<div>
<h1 class="text-3xl font-bold">Welcome to the Laravel + Vue Blog!</h1>
<p>This is a sample blog post using Vue 3.</p>
</div>
</template>
<script setup>
</script>
<style scoped>
h1 {
color: #2d3748;
}
</style>
3.4 ：使用组件
编辑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 </title>
@vite('resources/css/app.css')
</head>
<body id="app">
@vite('resources/js/app.js')
</body>
</html>
4. 编译和运行
4.1：安装前端依赖
在项目根目录下运行以下命令安装所有前端依赖：
npm install
4.2：启动开发服务器
使用 Vite 启动开发服务器：
pnpm dev
启动PHP服务
php artisan serve
注意两个服务必须同时打开如果不想启动开发服务器下进行访问
需要对vue代码进行打包
pnpm run build
4.3：访问应用
此时，可以访问 http://localhost:8000
通过本文，我们已经成功搭建了一个 Laravel 11 + Vue 3 的开发环境，并完成了基础配置。接下来，就可以继续开发自己的全栈应用，利用 Laravel 提供的强大功能和 Vue 3 提供的响应式组件来构建现代 Web 应用。
END
