Symfony 4.3 + Vue + VueRouter = SPA

Недавно, работая над проектом, я нашла этот учебник от Aiden Koh. Это прекрасная интеграция Vue с Laravel, которую обязательно должен прочитать каждый, кто хочет реализовать эту реализацию.

Однако, работая над личным проектом, я не обнаружил такой статьи, которая бы так кратко описывала этот же процесс при работе с Symfony.

Предположения

Фундаментальное понимание Symfony 4.3
Фундаментальное понимание Vue
Основное понимание Encore

Установка Symfony

Сначала вам нужно установить Symfony Client - замечательный инструмент, который был добавлен в новые версии Symfony, чтобы избавиться от необходимости запускать команды через композитор.

Перейдите на symfony.com и следуйте инструкциям для своей операционной системы.

После того, как вы установили клиент Symfony, вы сможете создать новый проект.

$ symfony new --full my_project

Установка Encore

У Symfony есть доступ к компоненту под названием Encore, который представляет собой оболочку для веб-пакета, позволяющую вам легко интегрировать его в свой проект.

$ composer require symfony/webpack-encore-bundle

Обязательно запустите npm install после завершения этого процесса, чтобы установить необходимые модули узлов, которые были добавлены в ваш package.json

К сожалению, Vue не включен по умолчанию, но не волнуйтесь, это относительно простой процесс.

Добавьте следующее в свой webpack.config.js вместе с остальными активаторами.

//enable VueJs
.enableVueLoader()

После того, как вы завершите это дополнение, вам нужно будет установить несколько модулей npm для его поддержки.

$ npm install vue-loader@^15.0.11 vue-template-compiler --save-dev
$ npm install @symfony/webpack-encore vue vue-router vuetify

Это позволит Encore понять и скомпилировать ваши шаблоны Vue.

Шаблоны Twig

Сначала создайте базовый шаблон.

//templates/base.html.twig
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Home{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
    </head>
    <body>
        {% block content %}{% endblock %}
        {% block javascripts %}{% endblock %}
    </body>
</html>

Затем создайте свой первоначальный шаблон приложения.

//templates/app.html.twig
{% extends 'base.html.twig' %}
{% block stylesheets %}
    {{ encore_entry_link_tags('app') }}
{% endblock %}
{% block content %}
    <div id="app">
    </div>
{% endblock %}
{% block javascripts %}
     {{ encore_entry_script_tags('app') }}
{% endblock %}While this is a tutorial for an SPA it is important to remember that application demands change over time. Setting your templates up in this manner gives your application room to expand, for instance, into a collection of micro applications. It’s important in application development to be in the here and now but also remain flexible enough to meet future requirements.

Маршрутизация Symfony

Чтобы позволить этому функционировать как SPA, необходимо создать профиль маршрутизации для Symfony, чтобы убедиться, что ваше приложение Vue контролирует маршрутизацию.

// config/routes.yaml
index:
    path: /{wildcard}
    controller: App\Controller\BaseController::index
    requirements:
        wildcard: .*

Базовый контроллер

Теперь давайте создадим контроллер, на который есть ссылка в приведенном выше маршруте.

// src/Controller.BaseController.php
<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;

class BaseController extends AbstractController
{
    public function index()
    {
        return $this->render('app.html.twig');
    }
}

Теперь, когда маршрутизатор Symfony указывает на шаблон, который вы создали ранее, пора сосредоточиться на Vue.

Изменение app.js

Добавьте следующие строки в файл app.js.

// assets/js/app.js
import Vue from 'vue';
import Vuetify from 'vuetify';

import Routes from './routes.js';

import App from './views/App';

Vue.use(Vuetify);

const app = new Vue({
  el: '#app',
  router: Routes,
  render: h => h(App),
});

export default app;

Структура каталога

Создайте структуру каталогов, которая выглядит следующим образом.

|assets
|--js
|  |--components
|  |--layouts
|  |--pages
|  |--stores
|  |--views

Компоненты Vue

Сначала создайте /assets/js/views/App.vue

<template>
    <v-app>
        <v-content>
            <v-container fluid>
                <router-view></router-view>
            </v-container>
        </v-content>
    </v-app>
</template>

<script>
  export default {
    name: "App"
  }
</script>

<style scoped>

</style>

Это будет основная точка доступа к вашему приложению Vue.

Теперь создайте /assets/js/components/Home.vue

<template>
    <div>
        Home
    </div>
</template>

<script>
  export default {
    name: "Home"
  }
</script>

<style scoped>

</style>

Настройка маршрутизатора Vue

Создайте /assets/js/routes.js

import Vue from 'vue';
import VueRouter from 'vue-router';

import Home from './components/Home';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes:[
    {path:'/', name:'home', component:Home}
  ]
});

export default router;

Это даст вам доступ к исходному компоненту, и этот шаблон следует соблюдать при добавлении дополнительных маршрутизаторов.

Чтобы получить доступ к вашим маршрутам из любого компонента, добавьте следующий код

<router-link to="<my_route>">My Component</router-link>

Компиляция и просмотр

Во время разработки, чтобы сэкономить время, вы можете попросить Encore следить за изменениями вашего javascript с помощью следующей команды

$ npm run watch

В зависимости от того, компилируете ли вы для разработки или производственного развертывания, выполните одну из следующих двух команд.

$ npm run dev
$ npm run build

Веб-сервер Symfony

Наконец, запустите веб-сервер Symfony и перейдите к http://127.0.0.1:8000 в своем браузере.

$ symfony server:start

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

Дайте мне знать, что вы думаете в комментариях!

Symfony 4.3 + Vue + VueRouter = SPA

Похожие вопросы