乐趣区

通过-Laravel-创建一个-Vue-单页面应用一

jiezi

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

使用 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 !

退出移动版