[譯]如何基於Laravel構建Vue應用（一）

使用Laravel能優雅的構建API而且與Vue單頁面應用程序（SPA）完美結合。在本教程中，咱們將展現如何啓動和運行Vue路由器以及用於構建SPA的Laravel後端。咱們將重點關注所需的全部部分，而後在後續教程中，咱們將進一步演示如何使用Laravel做爲API層。

Vue SPA如何運行的：

• 第一個請求命中服務器端Laravel路由器
• Laravel渲染SPA佈局
• 後續請求利用history.pushStateAPI進行URL導航，而無需從新加載頁面

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經過將組件傳遞給componentsVue構造函數中的屬性來使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包含AppVue將呈現的組件的必需元素，以及基於URL呈現適當的組件。

運行應用程序

該基礎用於構建具備Vue和Vue路由器的SPA。咱們須要構建或JavaScript來測試它：

yarn watch # or npm run watch

若是您在瀏覽器中加載應用程序，您應該看到以下內容：

原文地址https://laravel-news.com/usin...