Symfony Vue 教程|极客教程

Symfony Vue 教程展示了如何使用 Vue 前端创建一个简单的 Symfony 应用。

Vue

Vue 是用于构建用户界面和单页应用的开源 JavaScript 框架。它是 Angular 和 React 的替代方案。

Symfony Vue 示例

在下面的示例中，我们创建了一个简单的 Symfony 应用，该应用在模板中发送数据。数据由 Vue 处理并显示在组件中。

除了 PHP，我们还需要安装 Node.js。

设置项目

我们展示了如何使用 Vue 设置 Symfony。

$ composer create-project symfony/skeleton symvue

使用composer，我们创建一个新的 Symfony 骨架项目。

$ cd symvue

我们转到项目目录。

$ composer require maker --dev

另外，我们安装了 maker 组件。 maker软件包提供了脚手架。

$ composer require server --dev

我们安装开发 Web 服务器。

$ composer require encore 
$ npm install

我们安装了 Symfony Encore。这将安装并启用 WebpackEncoreBundle，添加assets目录，创建webpack.config.js文件，并将node_modules添加到.gitignore。

$ npm i vue vue-loader vue-template-compiler

我们安装 Vue 及其库。

项目文件

我们显示了重要的项目文件。

webpack.config.js

var Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')

    .enableVueLoader()

    .addEntry('app', './assets/js/app.js')

    .splitEntryChunks()

    .enableSingleRuntimeChunk()

    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())

;

module.exports = Encore.getWebpackConfig();

在webpack.config.js文件中，我们启用 Vue 加载程序并设置公共路径和构建路径。

assets/js/app.js

import Vue from 'vue';
import App from './components/App';

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

这是启动 Vue 的主要 Vue 文件。

Symfony 将静态文件（如 CSS 和 JavaScript）存储在assets目录中。

assets/js/components/App.vue

<template>
  <div>
    <h2 class="center">My Application</h2>
    <div v-text="message"></div>
    {{ message }}
    <ul>
      <li :key="word.id" v-for="word in words">{{ word }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "A list of words",
      words: []
    };
  },
  mounted() {

    let el = document.querySelector("div[data-words]");
    let mywords = el.dataset.words.split(",");

    this.words.push.apply(this.words, mywords);
  }
};
</script>

<style>
.center {
  text-align: center;
}
</style>

这是 Vue 组件。 Vue 应用由组件组成。一个组件由三部分组成：模板，脚本和样式。

<div v-text="message"></div>
{{ message }}

在 Vue 中有两种输出变量的方法：第二个与 Twig 相同。

<ul>
    <li :key="word.id" v-for="word in words">{{ word }}</li>
</ul>

使用v-for指令，我们遍历words数组并显示列表项中的每个元素。 :key指令可帮助 Vue 渲染列表。它包含元素的 ID。

数据来自 Symfony Twig 模板；它由 JavaScript 处理，最后在 Vue 组件中与v-for输出。

data() {
    return {
        message: "A list of words",
        words: []
    };
},

在data()函数中，我们启动一个消息变量和words数组。

mounted() {

    let el = document.querySelector("div[data-words]");
    let mywords = el.dataset.words.split(",");

    this.words.push.apply(this.words, mywords);
}

words数组在mounted()函数中填充了数据，该函数解析元素数据集中的数据。它以字符串形式存储在此；我们将字符串分成单词。数据将插入 Symfony 的 Twig 模板内的数据集中。

assets/css/style.css

body {
    background-color: lightgray;
}

style.css中有一些基本的 CSS。

$ php bin/console make:controller HomeController

HomeController由 Symfony 制造商创建。

src/Controller/HomeController.php

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;

class HomeController extends AbstractController
{
    /**
     * @Route("/home", name="home")
     */
    public function index()
    {
         $words = ['sky', 'cloud', 'wood', 'rock', 'forest', 'mountain', 'breeze']; return$ this->render('home/index.html.twig', [
            'words' => $words
        ]);
    }
}

控制器方法将单词列表发送给客户端。

return  $this->render('home/index. html .twig', [ 'words' =>$ words
]);

我们渲染向其发送单词的index.html.twig模板。

templates/home/index.html.twig

{% extends 'base.html.twig' %}

{% block title %}Home page{% endblock %}

{% block body %}

<div ref="words" data-words="{{ words|join(',') }}">

</div>

<div id="app">
    <app></app>
</div>
{% endblock %}

在模板中，我们将单词数组添加到data-words属性。使用 Twig join过滤器将数组连接成字符串。 HTMLElement 接口上的dataset属性提供对在元素上设置的所有自定义数据属性（data- *）的读/写访问。

<div id="app">
    <app></app>
</div>

这是主要 Vue 组件的入口点。

templates/base.html.twig

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}
            {{ encore_entry_link_tags('app') }}
        {% endblock %}
    </head>
    <body>

        {% block body %}{% endblock %}

        {% block javascripts %}
            {{ encore_entry_script_tags('app') }}
        {% endblock %}
    </body>
</html>

这是基本模板文件。