{% 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 %}