# Symfony Vue 教程

> 原文： [http://zetcode.com/symfony/vue/](http://zetcode.com/symfony/vue/)

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

## Symfony

Symfony 是一组可重用的 PHP 组件和一个用于 Web 项目的 PHP 框架。 Symfony 于 2005 年发布为免费软件。Fabien Potencier 是 Symfony 的原始作者。 Symfony 的灵感来自 Ruby on Rails，Django 和 Spring 框架。

Symfony Encore 是 JavaScript 库，用于在 Symfony 应用中管理 CSS 和 JavaScript。 Encore 使将 Webpack 集成到 Symfony 应用中变得更加容易。 它包装了 Webpack，并提供了一个干净而强大的 API，用于捆绑 JavaScript 模块，预处理 CSS 和 JavaScript 以及编译和缩小项目。

## Vue

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

## Symfony Vue 示例

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

除了 PHP，我们还需要安装 Node.js。 看看 ZetCode 的 [Node.js 教程](/javascript/nodejs)了解更多详细信息。

### 设置项目

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

```php
$ composer create-project symfony/skeleton symvue

```

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

```php
$ cd symvue

```

我们转到项目目录。

```php
$ composer require maker --dev

```

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

```php
$ composer require server --dev

```

我们安装开发 Web 服务器。

```php
$ composer require encore 
$ npm install

```

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

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

```

我们安装 Vue 及其库。

### 项目文件

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

`webpack.config.js`

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

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

```php
<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 应用由组件组成。 一个组件由三部分组成：模板，脚本和样式。

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

```

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

```php
<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`输出。

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

```

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

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

```php
body {
    background-color: lightgray;
}

```

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

```php
$ php bin/console make:controller HomeController

```

`HomeController`由 Symfony 制造商创建。

`src/Controller/HomeController.php`

```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
        ]);
    }
}

```

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

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

```

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

`templates/home/index.html.twig`

```php
{% 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-*`）的读/写访问。

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

```

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

`templates/base.html.twig`

```php
<!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>

```

这是基本模板文件。

```php
{{ encore_entry_link_tags('app') }}

```

CSS 文件加载有`encore_entry_link_tags`。

```php
{{ encore_entry_script_tags('app') }}

```

JavaScript 文件加载有`encore_entry_script_tags`。

## 构建项目

我们需要构建项目。

```php
$ npm run dev

```

使用`npm run dev`命令为开发环境构建项目。

## 运行应用

我们启动开发服务器并找到应用页面。

```php
$ php bin/console server:run

```

我们启动开发服务器。 然后我们找到`localhost:8000/home`页面。

在本教程中，我们创建了一个在前端使用 Vue 的 Symfony 应用。

您可能也对以下相关教程感兴趣： [Symfony 简介](/symfony/intro/)， [Doctrine DBAL `QueryBuilder`教程](/doctrine/querybuilder/)， [Symfony 表单教程](/symfony/form/)， [Symfony 翻译教程](/symfony/translation/)， [PHP 教程](/lang/php/)。