Laravel8配置Vue且实现SPA
Laravel8和Vue安装
创建新的Laravel8项目
//使用composer安装
composer create-project --prefer-dist laravel/laravel "项目名称"
//如果有Laravel安装器
laravel new "项目名称"
项目创建完毕，把Vue整合进Laravel项目
composer require laravel/ui
php artisan ui vue
安装依赖
npm install
在发生变化时编译Vue
npm run dev
Vue Router
想要做到SPA(单页面),要加一个库VueRouter
使用npm安装vue-router的时候报错的话，很有可能是因为版本问题,当前vue-router安装默认安装最新版适配Vue3，所以如果你是Vue2安装的时候需要指定版本
npm install vue-router
//Vue2
npm install vue-router@3
文件结构
resources/js目录下创建新的文件夹及文件，结构如下图:
在resources/js目录下，创建了名为layouts的目录，及pages目录。
- layouts/App.vue:页面的主组件，所有页面都在App.vue下进行切换，App.vue负责构建定义及页面组件归集。
- pages:专门用于存放我们的子页面
- 创建一个router.js用来储存路由
SPA(单页面实现)
修改router.js文件(在resources/router.js)
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './pages/Home.vue';
import About from './pages/About.vue';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
linkExactActiveClass: 'active',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
]
});
export default router;
在此配置了路由并且还设置了两个页面，目前我们还没有这两个页面。随后我们将会创建它们。
路由准备完毕，现在我们将在布局文件App.vue中展示这些页面
<template>
<div>
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">
<router-link class="nav-link" :to="{ name: 'home' }">Home</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" :to="{ name: 'about' }">About</router-link>
</li>
</ul>
</div>
</nav>
<div class="container">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
};
</script>
还有首页(Home)和关于(About)页面没有创建呢。打开pages目录下的Home.vue页面。
<template>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">About</div>
<div class="card-body">About Page</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
关于(About)的创建跟首页(Home)一样
接下来修改Vue的入口文件app.js(resources/js/app.js)
require('./bootstrap');
window.Vue = require('vue').default;
import router from './router';
import App from './layouts/App.vue';
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
router,
el: '#app',
render: h => h(App)
});
以上就完成了SPA的创建，接下来就是通知Laravel了
打开routes/web.php创建入口
<?php
use Illuminate\Support\Facades\Route;
Route::get('/{any}', function () {
return view('layouts.vue');
})->where('any', '.*');
上述代码，我们告诉Laravel用户所有的访问都将返回resources/views/layouts/vue.blade.php文件。目前我们还没有vue.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>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div id="app"></div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
这里有两个重点<div id="app"></div>将页面渲染到id为“app”的标签上,<script src="{{ asset('js/app.js') }}"></script>我们引入了编译后的VueJS文件。
这样就完成了，在去测试之前，一定确保你编译了VueJS：
npm run dev
实时编译
现在的情况是，每改动一次Vue组件就要重新执行npm run dev，这样非常麻烦；
可以使用npm run watch命令编译前端资源，每改动一次就会自动进行重新编译
然后运行服务器并在浏览器打开
php artisan serve
成品:
浙公网安备 33010602011771号