经过 Laravel 建立一个 Vue 单页面应用（一）

文章转发自专业的Laravel开发者社区，原始连接：learnku.com/laravel/t/3…

使用 laravel 建立一个 Vue 单页面应用 (SPA) 能够构建一个整洁的由 API 驱动的应用。在此教程中，咱们将学习如何构建并运行一个以 Vue 路由为前端，laravel 为后端的 SPA 应用。首先咱们将注意力集中在编写每个小的功能代码块上，而后在后续的教程中，咱们再演示如何将 Laravel 做为 API 层而构建一个完整的应用。

一个以 Laravel 为后端的 Vue SPA 应用的基本运行流程以下：

• 第一个请求触发服务端的 Laravel 路由
• Laravel 渲染 SPA 布局
• 接下来的请求使用 history.pushState API 触发页面跳转而无需重载页面

Vue router 有两种模式，分别为 history 模式和默认的 hash 模式。hash 模式使用 URL hash 来模拟一个完整的 URL，这样就可使 URL 变化时页面却无需从新加载。

咱们这里将要使用 history 模式，也就是说咱们须要配置一个 Laravel 路由来匹配全部用户在 SPA 页面中能够进入的 URL。举个例子， 若是用户在浏览器中刷新了 /hello 这个路由，咱们 (Laravel) 须要匹配到它并返回对应的 Vue 模板。Vue Router 将会识别该路由并渲染对应的 Vue 页面组件。

安装

首先咱们会建立一个 Laravel 项目，而后再安装 Vue 的 NPM 路由包：

laravel new vue-router
cd vue-router

# 当使用 Valet 时，创建项目连接
valet link

# 安装 NPM 依赖，添加 vue-router 包
yarn install
yarn add vue-router # or npm install vue-router

复制代码

咱们已经完成了 Laravel 项目的安装，并且 vue-router 包也已经就绪。接下来，配置路由，定义一系列路由和组件。

配置 Vue 路由

Vue 路由执行的过程是为 Vue 组件定义一个路由，而后在应用中下面的标签中渲染:

<router-view></router-view>

复制代码

router view 是在整个 Vue 应用组件中都生效的。咱们暂时回到 APP 组件中。

首先，咱们将更新最主要的 JavaScript 文件 resources/assets/js/app.js 以及配置 Vue 路由。将 app.js 中的内容替换成下面这个样子:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import App from './views/App'
import Hello from './views/Hello'
import Home from './views/Home'

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/hello',
            name: 'hello',
            component: Hello,
        },
    ],
});

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

复制代码

咱们须要添加一些文件，可是在这以前，咱们来检查一下 app.js ：

• 经过  Vue.use() 来导入和安装 VueRouter 插件
• 咱们导入三个 Vue 组件：
  • App 组件（最外层的应用组件）
  • Hello 组件匹配 /hello 路由
  • Home 组件匹配 / 路由
• 建立一个新的 VueRouter 对象，来存储相关配置
• 经过在 Vue 的构造方法中添加 App 组件，来让 Vue 知道 App 组件
• 将 router 常量添加到这个 Vue 应用中，经过 this.$router 和 this.$route 来调用

VueRouter 构造器包含一个路由数组，在这个数组中定义路由的路径，名称（相似于 Laravel 的命名路由）和这个路径对应的页面组件。

我通常会把路由定义在一个单独的路由模块中，而后再引入主应用文件，但这里为了简便，我会直接在主应用文件（app.js）中定义这些路由。

为了让 Laravel mix 成功运行，咱们须要定义以下三个组件：

mkdir resources/assets/js/views
touch resources/assets/js/views/App.vue
touch resources/assets/js/views/Home.vue
touch resources/assets/js/views/Hello.vue

复制代码

首先是 App.vue 文件，这是应用的最外层的容器元素。在这个组件中，咱们使用 Vue Router 的 <router-link/> 标签订义一个「头部」和一些导航：

<template>
    <div>
        <h1>Vue Router Demo App</h1>

        <p>
            <router-link :to="{ name: 'home' }">Home</router-link> |
            <router-link :to="{ name: 'hello' }">Hello World</router-link>
        </p>

        <div class="container">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
    export default {}
</script>

复制代码

App 组件中最重要的标签是 <router-view></router-view>，其它经过路由匹配到的组件（如 Home 和 Hello）都是在这里进行渲染的。

下一个须要定义的组件是 resources/assets/js/views/Home.vue：

<template>
  <p>This is the homepage</p>
</template>

复制代码

最后，咱们在 resources/assets/js/views/Hello.vue 路径下定义一个 Hello 组件。

<template>
  <p>Hello World!</p>
</template>

复制代码

我倾向于把复用组件从页面组件中分离出来，作法是把页面组件放在 resources/assets/js/views 文件夹下，把复用组件放在 resources/assets/js/components 文件夹下。我一般会这么作，由于这可让我轻松地分辨出哪些是可复用的组件，哪些是纯页面组件。

前端页面作到这些，就已达到运行咱们的 Vue 应用所须要的了。接下来，咱们须要定义好后端路由和服务端模板。

服务器端

咱们使用带有Vue SPA的Laravel应用程序框架，能够很方便的在咱们的应用程序中构建服务端API。咱们还可使用Blade渲染应用程序而且经过全局JavaScript对象来配置公共环境，我认为这是很方便的。

在本教程中，咱们不会去构建一个API实例，可是咱们将在后续教程中介绍。 这篇文章主要是关于链接Vue路由的。

咱们在服务器端要解决的第一件事是定义路由。 打开 routes/web.php 文件而且替换 welcome 路由为一下内容：

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| 你能够在这里为你的应用程序注册web路由。 这些
| 路由由RouteServiceProvider加载到一个包含「web」
| 的中间件组中。如今让咱们建立一些很棒的东西！
|
*/

Route::get('/{any}', 'SpaController@index')->where('any', '.*');

复制代码

咱们为 SpaController控制器定义了一个综合路由，这意味着任何 web 路由都将映射到咱们的SPA。若是咱们不这样作, 当用户发送了一个 /hello请求时, Laravel 将返回 404 响应.

接下来， 咱们须要建立 SpaController 控制器而且定义视图：

php artisan make:controller SpaController

复制代码

打开 SpaController 控制器而且输入如下内容：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class SpaController extends Controller
{
    public function index()
    {
        return view('spa');
    }
}

复制代码

最后, 输入如下内容到 resources/views/spa.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue SPA Demo</title>
</head>
<body>
    <div id="app">
        <app></app>
    </div>

    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

复制代码

咱们定义了必需的 ~#app 元素 ，其中包含了将要呈现的 App 组件，以及根据URL所呈现的其余组件。

运行项目

自此， 咱们完成了一个使用 Vue 和 Vue Router 的 SPA 应用的基本框架， 接下来让咱们经过运行 JavaScript 让它显示出来：

yarn watch # 或 npm run watch
复制代码

当咱们在浏览器中输入对应 URL 时，将会看到以下页面：

下一步

咱们已经创建起了一个使用 Laravel 做为 API 层的 Vue SPA 应用的骨架。但这个应用仍有不少功能须要咱们在后续的教程中来实现：

• 在前端定义一个 404 路由
• 使用路由参数
• 子路由
• 在组件中向 Laravel 发起一个 API 请求
• 可能还有不少，但我不许备所有列在这里...

本篇教程经过这些基础准备工做展现了咱们能够轻松地使用 Vue Router 来开始一个 SPA 应用。若是你还不熟悉 Vue Router，请查阅 Vue Router 文档。

进入 Part 2 !