搭建 Laravel 11 与 Vue 3 开发环境

入门：搭建 Laravel 11 与 Vue 3 开发环境

随着 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 项目：

bash 复制代码

composer create-project --prefer-dist laravel/laravel laravel-vue-app

这个命令会创建一个名为 laravel-vue-app 的新项目，并安装 Laravel 11 及其依赖。

或者可以通过 Composer 全局安装 Laravel 安装程序，来创建新的 Laravel 项目：

bash 复制代码

composer global require laravel/installer

laravel new laravel-vue-app

1.3：设置环境配置

进入项目目录：

bash 复制代码

cd laravel-vue-app

然后复制 .env.example 文件并将其重命名为 .env，这是 Laravel 的环境配置文件：

bash 复制代码

cp .env.example .env

编辑 .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 使用密钥来加密应用数据，运行以下命令生成应用密钥：

bash 复制代码

php artisan key:generate

使用 Laravel Artisan 的 serve 命令启动 Laravel 的本地开发服务器：

bash 复制代码

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 和相关依赖：

bash 复制代码

$ pnpm install vue@latest

这将安装最新版本的 Vue 3 和 Vue Loader，它们用于处理 .vue 文件。

2.3：安装其他前端依赖

继续安装一些开发所需的工具：

bash 复制代码

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：

bash 复制代码

npm install --save-dev vite

3.2：配置 Vite

在 vite.config.js 文件并配置 Vite 来支持 Vue 3：

javascript 复制代码

// 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 组件：

javascript 复制代码

import { createApp } from 'vue';
import BlogPost from './components/BlogPost.vue';

const app = createApp({
  components: {
    BlogPost,
  },
});

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

在 resources/js/components 目录下创建一个新的 Vue 组件 BlogPost.vue：

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>
export default {
  name: 'BlogPost',
};
</script>

<style scoped>
h1 {
  color: #2d3748;
}
</style>

3.4 ：使用组件

编辑resources/views/welcome.blade.php

php+HTML 复制代码

<!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：安装前端依赖

在项目根目录下运行以下命令安装所有前端依赖：

bash 复制代码

npm install

4.2：启动开发服务器

使用 Vite 启动开发服务器：

bash 复制代码

pnpm  dev

启动PHP服务

bash 复制代码

php artisan serve

注意两个服务必须同时打开如果不想启动开发服务器下进行访问

需要对vue代码进行打包

bash 复制代码

pnpm run build

4.3：访问应用

此时，可以访问 http://localhost:3000

通过本文，我们已经成功搭建了一个 Laravel 11 + Vue 3 的开发环境，并完成了基础配置。接下来，就可以继续开发自己的全栈应用，利用 Laravel 提供的强大功能和 Vue 3 提供的响应式组件来构建现代 Web 应用。

搭建 Laravel 11 与 Vue 3 开发环境

入门：搭建 Laravel 11 与 Vue 3 开发环境

1. 安装 Laravel 11 并配置开发环境

1.1：安装 Composer

1.2：创建新的 Laravel项目

1.3：设置环境配置

1.4：生成应用密钥

2. 安装 Vue 3

2.1：安装 Node.js 和 npm

2.2：安装 Vue 3

2.3：安装其他前端依赖

3. 配置 Vite（用于前端构建）

3.1：安装 Vite

3.2：配置 Vite

3.3：修改 resources/js 目录

3.4 ：使用组件

4. 编译和运行

4.1：安装前端依赖

4.2：启动开发服务器

4.3：访问应用

3.3：修改 `resources/js` 目录