Laravel8+Vuejs如何创建SPA单页面应用

这篇文章主要讲解了“Laravel8+Vuejs如何创建SPA单页面应用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Laravel8+Vuejs如何创建SPA单页面应用”吧！

10年积累的网站设计、网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有云浮免费网站建设让你可以放心的选择与我们合作。

我们都知道，Laravel 是一个很赞的框架！它允许全栈工程师们一站式构建前后端网站。因此，我们可以快速构建、交付高质量且安全的 web 项目。但它的强大不止于此。

Laravel 还有很多事情可供探索发现。举个栗子，我们已经编写了一系列 Vue JS 的组件，这些组件可被嵌入到 Laravel 的页面中，动态的给用户提供 UI 交互。

很有意思吧？但接下来我们需要探究的是，是否可以在 Laravel 项目中构建单页面应用（SPA）？当然可以，有何不可！【相关推荐：vue.js教程】

在一切开始之前，我们首先要知道为何我们的项目需要 SPA？不可否认，SPA 给予了用户更好的体验。它令页面加载更快，无需重载，哪怕用户没有网络也能访问网站！这些例子不胜枚举。

当然，这也会带来一些缺点，在用前仍需三思。无论是构建 SPA 或者 MPA（多页面应用），都应确保其满足你的需求。不过 Laravel 默认使我们构建一个 MAP 项目，不是嘛？所以我认为是时候让我们探索下如何在 Laravel 项目中构建 SPA 了。正式启程！

内容概览

• 我们的目标

• Laravel 及 Vue JS 的安装

• Vue Router 以及文件结构

• SPA 实现

1 我们的目标

在本文结束时我们需要构建出来一个什么来呢？很简单，我们将拥有一个内含两个页面的 SPA。如果我们点击其他页面，它将不会重载。下面看看项目最终效果。

2 Laravel 及 Vue JS 的安装

我们将以全新的 Laravel 为起点。通常我们可以通过如下指令创建一个新项目：

composer create-project laravel/laravel --prefer-dist laravel-vue-spa

创建完毕，已经拥有新项目了。随后需要在其中安装 Vue JS。

composer require laravel/ui

最后需要做的是，把 Vue JS 整合进 Laravel 项目。感谢上苍，我们可以用如下指令帮助我们整合。非常之简单。

php artisan ui vue

不要忘了在发生变化之时编译 Vue。

npm install && npm run dev

3 Vue Router 以及文件结构

由于在 SPA 中，用户可以通过路由导航到他们想要抵达的页面。所以需要在其中安装一个附加库，Vue Router。

npm install vue-router

实现 SPA 前最重要的步骤就是文件结构。在 resources/js 目录下创建新的文件夹及文件，代码结构如下图所示。

在 resources/js 目录下，需要创建一个名为 layouts 的新目录，以及 pages 目录。layouts 目录所包含的内容如你所想，用于展示 pages 目录下页面的布局文件。疑惑么？这在随后实现 SPA 的过程中会让其结构更为清晰。

不要忘记创建 router.js 文件，用于存储我们所需的所有路由。

4 SPA 实现

是时候实现 SPA 了！首先，修改下 router.js 文件（在 resources/js/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;

在第四行和第五航，我们需要在这里配置两个页面，主页和关于页。我知道，目前还没有这两个页面。随后我们将会创建它们。在第 9-24 行，我们将注册需要的所有路由信息。因此每个路由对象都有 path，name 以及 component 属性用于渲染/展示。

已经把路由准备完毕了，现在要做什么呢？我们将在布局文件中展示这些页面。记得已经在 layouts 目录中的 App.vue 么？来创建它吧。

注意 17-23 行，这里使用了 \ 标签。这个路由链接与 \ 标签很像，用于在多个页面中导航跳转。所以问题来了，页面会在哪里渲染呢？看 40行的 \ 标签，所以页面将会在 \ 标签处被渲染。

好了，还有首页和关于页面没有创建呢。打开 pages 目录下的 Home.vue 页面。

直到这一步，我们才设置 SPA 页面间跳转的路由以及展示页面的布局。最后我们需要做的是，修改 Vue JS 的入口文件。

打开 resource/js/app.js 然后修改。

/**
 * 首先，我们将重载项目中所有包含 Vue 或其他库的 JavaScript 依赖
 * 使用 Vue 和 Laravel 构建健壮、强大的 web 应用，这是个很好的开始。
 */

require('./bootstrap');

window.Vue = require('vue').default;

import router from './router';
import App from './layouts/App.vue';

/**
 * 如下代码块可用于自动注册 Vue 组件。这将递归的扫描 Vue 组件目录
 * 并按照其 "文件名" 自动注册。
 *
 * 比如 . ./components/ExampleComponent.vue -> 
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

/**
 * 随后，我们将创建一个新的 Vue 应用实例并将其挂载到页面。
 * 然后，你可以附加组件到应用中或自定义 JavaScript 脚手架以满足特殊需求。
 */

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

在第 11 行和 12 行，引入了布局文件和路由文件，在 34 行，告诉 Vue 使用路由并在 36 行指定渲染到指定布局。

万事俱备，是时候告诉 Laravel 通过 Vuejs 实现 SPA 了。打开 routes/web.php 并在此创建其他入口。

where('any', '.*');

在如上代码中，我们告诉 Laravel 用户所有访问都将返回 resources/views/layouts/vue.blade.php 文件。很明显，我们还没有这个文件，一起创建下。

getLocale()) }}">