{% raw %} # 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/)。 {% endraw %}