Laravel5.7引入vue做spa单页面的应用_laravel spa elm-优快云博客

本文详细介绍如何使用Laravel和Vue构建单页应用(SPA)，包括安装步骤、配置过程及前端路由设置，为开发者提供实战指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="csrf-token" content="@{{ csrf_token }}">
  <title>Laravel & Vue</title>
  <link rel="stylesheet" type="text/css" href="/css/app.css">
</head>
<body>
  <div id="app">
    <nav class="navbar navbar-inverse">
      <div class=" container">
         <div class="navbar-header">
            <a class="navbar-brand" href="/">LaravelVue</a>
        </div>
      </div>
    </nav>    
    <div class="container main">
      <router-view />
    </div>
  </div>
  <script type="text/javascript" src="/js/app.js"></script>
</body>
</html>

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') },
];