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’);
.vue() 方法告诉 Laravel Mix 使用 vue-loader 来处理 .vue 文件，这是必须的。
5. 编写 Vue 组件
在 resources/js/components/ 目录下创建一个简单的 Vue 组件，例如 ExampleComponent.vue：
<script><br> export default {<br> name: ‘ExampleComponent'<br> }<br> </script>
6. 在主 JS 文件中注册 Vue 应用
打开 resources/js/app.js，引入 Vue 并挂载根实例：
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() 已启用、路径是否正确、组件是否注册等。
立即学习“前端免费学习笔记（深入）”；