环境配置

确保已安装Node.js（用于Vue开发）和Composer（用于Laravel依赖管理）。Laravel项目可通过以下命令创建：

composer create-project laravel/laravel project-name

前端项目初始化

在Laravel项目根目录下初始化Vue2项目：

npm install -g vue-cli
vue init webpack vue-app

将生成的Vue项目文件夹（如vue-app）放置在Laravel的resources目录下。

依赖整合

在Vue项目中安装axios用于API通信：

cd resources/vue-app
npm install axios --save

在Laravel中安装前端依赖：

npm install

配置webpack.mix.js

修改Laravel根目录下的webpack.mix.js，指向Vue项目的入口文件：

mix.js('resources/vue-app/src/main.js', 'public/js')
   .sass('resources/vue-app/src/assets/scss/app.scss', 'public/css');

API路由设置

在Laravel的routes/api.php中定义API端点：

Route::get('/data', function () {
    return response()->json(['message' => 'Vue+Laravel数据']);
});

Vue组件调用API

在Vue组件中使用axios调用Laravel接口：

import axios from 'axios';

export default {
  data() {
    return { responseData: '' }
  },
  mounted() {
    axios.get('/api/data')
      .then(response => {
        this.responseData = response.data.message;
      });
  }
}

跨域处理

若遇到跨域问题，在Laravel中安装fruitcake/laravel-cors：

composer require fruitcake/laravel-cors

在app/Http/Kernel.php的$middleware数组中添加：

\Fruitcake\Cors\HandleCors::class,

构建与部署

开发环境下运行：

npm run dev

生产环境构建：

npm run production

Laravel视图层通过<script>引入编译后的JS文件：

<script src="{{ mix('js/app.js') }}"></script>