經過 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 !