Symfony Vue 教程

{% raw %}

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 教程了解更多详细信息。

设置项目

我们展示了如何使用 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>

这是基本模板文件。

{{ encore_entry_link_tags('app') }}

CSS 文件加载有encore_entry_link_tags。

{{ encore_entry_script_tags('app') }}

JavaScript 文件加载有encore_entry_script_tags。

构建项目

我们需要构建项目。

$ npm run dev

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

运行应用

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

$ php bin/console server:run

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

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

您可能也对以下相关教程感兴趣： Symfony 简介， Doctrine DBAL QueryBuilder教程， Symfony 表单教程， Symfony 翻译教程， PHP 教程。

{% endraw %}

ZetCode 中文系列教程

103.md