[译]如何基于Laravel构建Vue应用（一）

栏目: PHP · 发布时间: 6年前

内容简介：使用Laravel能优雅的构建API并且与Vue单页面应用程序（SPA）完美结合。在本教程中，我们将展示如何启动和运行Vue路由器以及用于构建SPA的Laravel后端。我们将重点关注所需的所有部分，然后在后续教程中，我们将进一步演示如何使用Laravel作为API层。Vue SPA如何运行的：Vue路由器可以配置为

使用 Laravel 能优雅的构建API并且与Vue单页面应用程序（SPA）完美结合。在本教程中，我们将展示如何启动和运行Vue路由器以及用于构建SPA的Laravel后端。我们将重点关注所需的所有部分，然后在后续教程中，我们将进一步演示如何使用Laravel作为API层。

Vue SPA如何运行的：

history.pushState

Vue路由器可以配置为 history模式 或 hash模式 。默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 history 模式 ，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

这里我们使用 history 模式，所以需要我们需要配置一个Laravel路由，该路由将匹配所有可能的URL，具体取决于用户进入Vue SPA的路由。例如，如果用户刷新 /hello 路由，我们将需要匹配该路由并返回Vue SPA应用程序模板。然后，Vue路由器将确定路由并渲染相应的组件。

安装

首先，我们创建一个新的Laravel项目，然后安装Vue路由器NPM包：

laravel new vue-router
cd vue-router

# Link the project if you use Valet
valet link

# Install NPM dependencies and add vue-router
yarn install
yarn add vue-router # or npm install vue-router

配置Vue路由器

这里的 <router-view> 是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 <router-view> 。

<router-view></router-view>

首先，我们将更新主要的JavaScript文件 resources/assets/js/app.js 并配置Vue路由器。用以下内容替换 app.js 文件的内容：

import Vue from 'vue'
import VueRouter from 'vue-router'//导入并安装VueRouter插件

Vue.use(VueRouter)

import App from './views/App'//作为App最外层应用程序组件的组件
import Hello from './views/Hello'//导入自定义Hello组件
import Home from './views/Home'//导入自定义Home组件

//构造一个VueRouter带有配置对象的新实例
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 ：

我们导入并安装 VueRouter 插件 Vue.use()
我们导入三个Vue组件：
- 作为 App 最外层应用程序组件的组件，
- 一个 Hello 映射到组件 /hello
- 一个 Home 映射到组件 / home
我们构造一个 VueRouter 带有配置对象的新实例
我们 App 通过将组件传递给 components Vue构造函数中的属性来使Vue知道该组件
我们将 router 常量注入到新的Vue应用程序中以访问 this.$router 和 this.$route

该 VueRouter 构造函数采用的路线，我们定义的路径，名称（就像Laravel的命名路线），并映射到路径组件的数组。

我喜欢将我的路由定义移动到我导入的单独路由模块中，但为了简单起见，我们将在主应用程序文件中定义路由。

为了使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>

最后，我们定义 Hello 位于以下位置的组件 resources/assets/js/views/Hello.vue ：

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

我喜欢将我的可重用组件与特定于视图的组件分开，方法是将视图组织到 resources/assets/js/views 文件夹和我真正可重用的组件中 resources/assets/js/components 。这是我的惯例，我发现它运行良好，因此我可以轻松地分离哪些组件可以重用，哪些组件是特定于视图的。

就前端而言，我们拥有运行Vue应用程序所需的一切！接下来，我们需要定义后端路由和服务器端模板。

服务器端

我们利用像Laravel这样的应用程序框架和Vue SPA，以便我们可以构建服务器端API来使用我们的应用程序。我们还可以使用Blade来渲染我们的应用程序并通过全局JavaScript对象公开环境配置，这在我看来很方便。

在本教程中，我们不打算构建API，但我们将进行后续跟进。这篇文章是关于连接Vue路由器的全部内容。

我们将在服务器端解决的第一件事是定义路由。打开 routes/web.php 文件并使用以下内容替换欢迎路径：

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

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

我们定义了一条全能路线， SpaController 这意味着任何网络路线都将映射到我们的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 Vue将呈现的组件的必需元素，以及基于URL呈现适当的组件。