# vue-symfony

**Repository Path**: tjy-cool/vue-symfony

## Basic Information

- **Project Name**: vue-symfony
- **Description**: 这是一个vue-symfony的模版
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-08-08
- **Last Updated**: 2023-08-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-symfony

#### 介绍
这是一个vue-symfony的模版

#### 软件架构
- symfony 6.3
- php 8.2

#### 实现步骤

- 1. symfony 项目创建

```sh
# 创建项目
symfony new vue-symfony

```

- 2. 安装symfony必要模块，创建controller

```sh
# 安装maker-bundle
composer require symfony/maker-bundle --dev

# 安装twig bundle
composer req twig

# 创建路由和控制器, 执行命令后输入 Home, 然后就可以访问http://127.0.0.1:8000/home了
symfony console make:controller
```

- 3. 安装encore，且安装node模块，通过yarn启动node

```sh
# 安装encore 和 stimulus bundle
composer req encore
composer req stimulus

# 安装node模块
yarn install

# 另起终端，启动node, 再次刷新 http://127.0.0.1:8000/home , 背景变为灰色了
yarn watch
```

- 4. 安装vue，安装完后需要重新执行`yarn watch`

```sh
yarn add vue vue-loader vue-template-compiler
```

- 5. 配置vue

##### 5.1 修改`webpack.config.js`

将line 23修改如下
```js
    // .addEntry('app', './assets/app.js')
    .addEntry('app', './assets/vue/app.js')
```

##### 5.2 创建`./assets/vue/app.js`
```js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
```

##### 5.3 创建`./assets/vue/App.vue`
```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>
```

##### 5.4 修改`HomeController`
```php
#[Route('/home', name: 'app_home')]
public function index(): Response
{
    $words = ['sky', 'cloud', 'wood', 'rock', 'forest', 'mountain', 'breeze'];

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

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

##### 5.5 修改home的`index.html.twig`
```html
{% block body %}
<div id="app">
    <app></app>
</div>

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

##### 5.6 重新执行`yarn watch`，然后刷新页面，可以看到页面改变了


#### 首次项目启动
```sh
# 安装symfony bundles
composer install

# 启动项目 正常启动, 然后可以访问http://127.0.0.1:8000了
symfony server:start --port=8000 --no-tls
# 启动项目 后台启动 
symfony serve -d

# 安装node模块
yarn install

# 另起终端，启动node, 再次刷新 http://127.0.0.1:8000/home , 背景变为灰色了
yarn watch
```

#### Reference
[Symfony Vue教程](https://geek-docs.com/php/symfony-tutorial/symfony-vue.html#ftoc-heading-5)