Laravel 集成 Vue.js 可通过 Laravel Mix 快速实现：1. 创建 Laravel 项目并进入目录；2. 确保安装 Node.js 与 NPM；3. 执行 npm install 安装前端依赖；4. 在 webpack.mix.js 中确认启用 .vue() 支持；5. 在 resources/js/components/ 下创建 Vue 组件；6. 在 app.js 中引入并注册组件；7. 在 Blade 模板中添加 #app 容器并引入 app.js；8. 运行 npm run dev 或 watch 编译资源；9. 启动 php artisan serve 查看效果。
Laravel 集成 Vue.js 是一个非常常见的开发组合，Laravel 提供了开箱即用的前端工具链 Laravel Mix，可以轻松地将 Vue.js 集成到项目中。以下是完整的配置流程，帮助你在 Laravel 项目中搭建 Vue.js 开发环境。
1. 创建 Laravel 项目（如未创建）
如果你还没有 Laravel 项目，可以通过 Composer 快速创建：composer create-project laravel/laravel my-vue-app
进入项目目录：
cd my-vue-app
2. 确保安装 Node.js 和 NPM
Laravel Mix 基于 Webpack，依赖 Node.js 和 NPM 来处理前端资源。请确保已安装：运行以下命令检查版本：
node -v
npm -v
推荐使用 Node.js 14+ 版本。
3. 安装前端依赖
Laravel 默认包含 Vue.js 的基础配置和相关依赖。进入项目后，安装 Node 依赖：npm install
这个过程会读取 package.json 并安装包括 laravel-mix、vue、vue-loader 等必要的包。4. 配置 webpack.mix.js 支持 Vue
Laravel 的 webpack.mix.js 文件是前端资源编译的配置入口。默认情况下，它已经配置好支持 Vue 单文件组件（.vue 文件）。打开 webpack.mix.js，确认有如下代码：
mix.js('resources/js/app.js', 'public/js')
.vue() // 启用 Vue 支持
.sass('resources/sass/app.scss', 'public/css');
5. 编写 Vue 组件
在 resources/js/components/ 目录下创建一个简单的 Vue 组件，例如 ExampleComponent.vue：
6. 在主 JS 文件中注册 Vue 应用
打开 resources/js/app.js，引入 Vue 并挂载根实例：
require('./bootstrap');
import Vue from 'vue';
import ExampleComponent from './components/ExampleComponent.vue';
const app = new Vue({
el: '#app',
components: {
ExampleComponent
}
});
7. 在 Blade 模板中加载 JS 并挂载 Vue
编辑 resources/views/welcome.blade.php 或你自定义的页面，在 body 中添加容器并引入编译后的 JS：
8. 编译前端资源
运行以下命令编译资源：npm run dev —— 编译并生成资源（用于开发）
或
npm run watch —— 监听文件变化自动重新编译
生产环境使用：
npm run production
9. 启动开发服务器
使用 Laravel 内置服务查看效果：php artisan serve
访问 http://localhost:8000 查看页面是否正确渲染 Vue 组件。
基本上就这些。只要 Laravel Mix 正确配置，Vue 组件就能顺利加载。遇到问题时可检查控制台报错、确保 .vue() 已启用、路径是否正确、组件是否注册等。
立即学习“前端免费学习笔记（深入）”；
