在本详尽的教程中，我们将深入浅出地阐述如何将 Vue.js 与 Vite 巧妙地集成到 Laravel 项目之中。这种前沿的技术组合不仅充分发挥了 Laravel 作为强大后端框架的各项功能，更通过 Vue.js 赋予了项目构建现代、响应式用户界面的能力。尤为值得一提的是，Vite 的快速且高度优化的构建过程将极大提升项目的开发效率与性能表现，使得整个开发流程更为流畅与高效。通过本教程的学习，您将能够轻松掌握这一技术组合的应用，为您的 Laravel 项目注入更多活力与创新。

Vue.js

先决条件：

在开始之前，请确保您的系统上已安装以下必要的软件工具，以确保后续的流程能够顺利进行：

  • PHP：这是一种流行的服务器端脚本语言，对于构建动态网页和Web应用程序至关重要。

  • Composer：作为PHP的依赖管理工具，它可以帮助您轻松管理项目中的库和依赖项，确保代码的稳定性和可维护性。

  • Node.js 和 npm：Node.js 是一个强大的JavaScript运行环境，而npm（Node包管理器）则是用于安装和管理Node.js模块和库的工具。这些工具对于构建前端应用程序和提供丰富的交互体验至关重要。

请确保这些软件已经正确安装在您的系统上，以便您能够顺利进行后续的开发工作。

步骤 1：设置您的 Laravel 项目。

首先，请跟随我们的指引，共同打造一个全新的 Laravel 项目。请打开您的终端窗口，然后键入以下命令，以启动项目的创建过程：

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

cd my-laravel-app

步骤 2：安装 Laravel Breeze（可选）

Laravel Breeze 提供了一种快捷而便利的搭建方案，其中包含了一套身份验证脚手架和整合了 Vite 的 Vue.js。虽然这一步骤并非必需，但我们强烈推荐执行，以便能够快速高效地设置您的项目环境。

composer require laravel/breeze --dev
php artisan breeze:install vue
npm install

如果您不想使用 Laravel Breeze，请按照以下说明使用 Vite 手动配置 Vue.js。

npm install vite vue @vitejs/plugin-vue

还请检查你的 vite.config.js 并添加以下代码

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
       
    ],
    resolve: { 
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
});

步骤 3：设置 Vue 组件

首先，请确保您的 resources/js 目录下存在 components 子目录。若该目录尚未创建，请先行创建。接下来，在 components 目录中新建一个名为 ExampleComponent.vue 的文件，并将以下内容填充至该文件：

<template>
  <div>
    <h1>Hello Vue!</h1>
  </div>
</template>

<script setup>

</script>
<style scoped>
h1 {
  color: #42b983;
}
</style>

步骤4：在welcome.blade.php文件中添加以下代码。

<!DOCTYPE html>
<html>
<head>
    <title>Laravel with Vue and Vite</title>
    @vite('resources/js/app.js')
</head>
<body>
    <div id="app">
        <example-component></example-component>
    </div>
</body>
</html>

编译资产

npm run dev

为您的Laravel应用程序服务

php artisan serve

请按照以下方式润色文本：

请启动您的浏览器，并输入地址http://localhost:8000进行访问。一旦页面加载完成，您将会看到您的Vue组件已经成功渲染出“Hello, Vue!”这条温馨的问候信息。

恭喜您！至此，您已经将Vue.js顺利地集成到了您的Laravel项目之中。接下来，您可以开始着手构建更为复杂且功能丰富的Vue组件，并在您的Laravel应用程序中充分利用Vue.js的强大功能，为您的项目增添更多的交互性和动态效果。