一、环境配置

此文默认composer为全局安装（可察看相关文章，保证composer为全局安装）

1、创建laravel项目

如果已有项目，也可以使用，简单方法可以直接将laravel8文件夹中的文件直接复制到项目目录下。
如果没有项目，
使用artisan命令创建项目：

composer create-project laravel/laravel demo

其中的“demo”是自己项目的名称，可以是“lv8vue2”、“blog”、“spa”等等。

2、引入laravel/ui

这里需要注意的是，引入laravel/ui是指项目引入，因此一定要切换到项目根目录

（1）切换到根目录

cd */*/demo

(2)引入laravel/ui

composer require laravel/ui

3、初始化vue

这里需要注意的是有的文章并没有交待清楚laravel8与vue2的关系，讲到vue-loader等问题时让人误认为需要安装vue-loader,可是自己安装的vue-loader与laravel8自带的vue出现兼容问题，总是会出些莫名其妙的错误，所以不用重新安装vue及相关组件，在使用vue及相关组件时只需要初始化就可以了

php artisan ui vue

vue初始化完成以后，项目根目录下的package.json中devDependencies内容会增加vue及相关组件

"vue-loader": "^15.9.6",
"vue-router": "^3.5.1",
"vue-template-compiler": "^2.6.10"

安装完成后，Vue组件和JS文件在resources/js目录下；

4、入口文件resources/js/app.js文件改造

当然，laravel8是自动生成的，无需自己动手改造。

require('./bootstrap');
window.Vue = require('vue');
// 注册组件
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
// 挂载实例
const app = new Vue({
   el: '#app',
});

5、编写一个vue组件并注册

（1）在resources/js/components目录下创建DemoComponent.vue组件

<template>
<div class="container">
   <div class="jumbotron">
        这里是我的第一个laravel+vue单页
   </div>
</div>
</template>
<script>
export default {
 // 导出组件
 name:'DemoComponent'
}
</script>
<style scoped>
</style>

（2）在入口文件resources/js/app.js中注册组件

此时的app.js应该是这样的：
require(‘./bootstrap’);

window.Vue = require('vue');
// 注册组件
//Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('demo-component', require('./components/DemoComponent.vue').default);
// 挂载实例
const app = new Vue({
   el: '#app',
});

6、改造laravel8自带的欢迎页面视图welcome.blade.php

`<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
   <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title>Laravel</title>
       <!--1、 引入支持 Bootstrap 的 CSS 样式文件 -->
       <link href="{{ asset('css/app.css') }}" rel="stylesheet">
   </head>
   <body>
     <div id="app">
         <div>
      <!-- 3、使用组件 -->
           <demo-component></demo-component>
         </div>
     </div>  
    <!-- 2、引入支持Vue框架和Vue组件的app.js文件 -->
     <script src="{{ asset('js/app.js') }}"></script>
   </body>
</html>`

7、在routes/web.php中定义一个万能路由：

Route::get(‘/{any}’, [SpaController::class,’index’])->where(‘any’, ‘.*’);

8、安装依赖

npm install

9、测试代码

npm run dev

原来的欢迎视图改造后如下：

laravel8+vue2单页面应用