Laravel5.7引入vue做spa单页面的应用

1，安装 laravel
composer create-project --prefer-dist laravel/laravel laravel-spa
2, 安装前端依赖包
npm install
3,安装完之后，为了便于开发，使用热更新模式,在 webpack.mix.js 中添加配置
mix.browserSync({
proxy: ‘localhost:8000’
});
4, 先执行 php artisan serve ，在执行 ‘npm run watch’
(可能npm run watch 会让你安装yarn add browser-sync browser-sync-webpack-plugin@2.0.1 --dev --production=false)
5， 到这里我们准备工作已经完毕，正式接下来开发Vue的单页应用，在开发单页应用中，对应Route Api Vuex Components这些，下面我们就来定义这些。

在首先首页引入对应的app.css状语从句：app.js文件。

resource/vies/welcome.blade.php

  
  
  
  


  

    

      

         

            LaravelVue
        
      
    
    
    

      
    
  
  

6，配置启动app.js
应用对应的入口文件是app.js，所以在这个入口文件中，我们实例化 Vue实例，初始化和加载所需的组件。

# resource/js/app.js
require('./bootstrap');

window.Vue = require('vue');
import Hello from './components/Home.vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

import routes from './routes';    // 路由配置文件
// 实例化路由
const router = new VueRouter({
    routes
})

const app = new Vue({
    el: '#app',
    router,
    render: h => h(Hello)
});

路由
前端页面主要有3个路由，如下

# resource/js/routes.js
export default[
  { path: '', redirect: '/index' },
  { path: '/index', component: require('./components/Home.vue') },
];