Создаем SPA с помощью Vue и Laravel Часть 1

В этой статье вы узнаете как настроить Vue Router и Laravel для SPA веб-сайта. Сегодня мы сосредоточимся на написании всего необходимого кода, а следующей статье мы покажем как все это использовать.

Как работают Vue SPA с Laravel в качестве backend:

  • Запрос от пользователя попадает в маршрутизатор Laravel
  • Laravel посылает в ответ отрендеренный шаблон SPA
  • Все дальнейшие запросы используют browser history API для навигации без перезагрузки страницы

Vue router может работать в двух режимах:

  • History mode - Vue router использует browser history API
  • Hash mode - Vue router использует хеши в качестве идентификатора URL (например: http://site/home#page1, где #page1 - это хеш)

Мы будем использовать History mode, поэтому нам необходимо настроить Laravel чтобы он возвращал SPA шаблон на любой запрос. Например, если пользователь запрашивает /hello, Laravel должен будет вернуть в ответ html шаблон нашего SPA, а дальше Vue Router самостоятельно определит как обрабатывать данный URL.

Установка

Для начала нам нужно создать новый проект Laravel, и установить Vue Router 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
# or npm install vue-router
$ yarn add vue-router

Теперь у нас есть новый Laravel проект и Vue-router библиотека. Далее мы настроим vue-router и добавим несколько маршрутов и компонентов.

Настройка Vue Router

Vue Router занимается тем, что сопостовляет запрошенный URL конкретному Vue компоненту, а затем выводит его в шаблоне в теге router-view:

Сперва нам требуется отредактировать наш главный JS файл resources/assets/js/app.js и настроить Vue Router. Замените содержимое файла 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:

  • Мы импортируем плагин VueRouter и затем указываем с помощью вызова Vue.use() что Vue должен его использовать.
  • Далее мы импортируем три дополнительных компонента:
    • App - главный компонент нашего приложения
    • Hello - который будет обрабатывать URL /hello
    • Home - ответсвенный за URL /
  • Создаем экземпляр объекта VueRouter и передаем ему в качестве аргумента набор опций.
  • Создаем новый экземпляр класса Vue, и передаем ему объект с настройками, в котором рассказываем Vue о том, что у нас есть компонент App, а так же инжектим экземпляр нашего VueRouter, чтобы иметь доступ к объектам this.$router и this.$route

В настройках VueRotuer мы указали массив routers, который определяет маршруты для нашего приложения. Для каждого маршрута мы можем задать: имя (точно так же как мы задаем имя для наших маршрутов в Laravel), путь (URI который он должен обрабатывать) и компонент который должен обрабатывать данный маршрут.

Обычно маршруты выносят в отдельный файл, который в дальнейшем импортируют и используют, но для простоты мы будем прописывать наши маршруты в 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, который является ключевым компонентом нашего приложения. В этом компоненте мы зададим шапку и навигацию для всех страниц, а так же поместим тег router-view в котором будут рендерится все остальные компоненты:

<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>

Дальше создадим компонент Home:

// 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>

Теперь у нас готов фронтенд для нашего Vue приложения. Далее мы настроим backend и определим несколько маршрутов и базовый html шаблон.

Настраиваем backend

Так как в качестве backend мы исползуем Laravel, нам будет очень просто реалзиовать API для нашего SPA. С помощью Blade шаблонизатора мы будем выводить начальный html шаблон и  javascript конфигурацию.

Для начала определим базовый маршрут для нашего приложения. Откройте файл routes/web.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}', '[email protected]')->where('any', '.*');

Тут мы задаем маршрут который отвечает на любой запрошенный URL и передает его в SpaController. Без этого маршрута пользователь будет получать 404 ошибку при попытке зайти по адресу /hello например.

Теперь сгенерируем SpaController с помощью artisan команды:

$ php artisan make:controller SpaController

Откройте и измените SpaController следующим образом:


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>

 

Запуск нашего приложения

Запустите команду ниже, чтобы собрать наше приложение и запустить watcher, который будет автоматически пересобирать код при любых изменениях:

$ yarn watch # или npm run watch

Если вы теперь откроете сайт в браузере, то должны будете увидеть такую картину:

SPA with Vue and Laravel

Заключение

Мы подготовили скелет SPA приложения, который мы продолжим улучшать в следующих частях этой серии статей.

Вторую часть вы можете прочитать по ссылке: Создаем SPA с помощью Vue и Laravel Часть 2

Это был перевод статьи Building a Vue SPA with Laravel.

Опубликовано:

Категории: Статьи