Symfony UX Vue.js

编辑此页

Symfony UX Vue.js 是一个 Symfony 扩展包，集成了 Vue.js 到 Symfony 应用中。它是 Symfony UX 倡议的一部分。

Vue.js 是一个用于构建用户界面的 JavaScript 框架。 Symfony UX Vue.js 提供了从 Twig 渲染 Vue 组件的工具，处理渲染和数据传输。

Symfony UX Vue.js 仅支持 Vue.js v3。

安装

注意

此包最适合与 WebpackEncore 一起使用。要将其与 AssetMapper 一起使用，请参阅与 AssetMapper 一起使用。

使用 Composer 和 Symfony Flex 安装此扩展包

        1
        $ composer require symfony/ux-vue
    

Flex recipe 将自动为您设置，例如添加 .enableVueLoader() 到您的 webpack.config.js 文件，并在 assets/app.js 中添加代码以加载您的 Vue 组件。

接下来，安装一个包来帮助 Vue

        1
2
        $ npm install -D vue-loader --force
$ npm run watch
    

就是这样！现在，assets/vue/controllers/ 内的任何文件都可以渲染为 Vue 组件。

用法

Flex recipe 已经将 registerVueControllerComponents() 代码添加到您的 assets/app.js 文件中

        1
2
3
4
        // assets/app.js
import { registerVueControllerComponents } from '@symfony/ux-vue';

registerVueControllerComponents(require.context('./vue/controllers', true, /\.vue$/));
    

这将加载位于 assets/vue/controllers 目录中的所有 Vue 组件。这些被称为 Vue 控制器组件：旨在从 Twig 渲染的顶层组件。

您可以使用 vue_component() 在 Twig 中渲染任何 Vue 控制器组件。

        1
2
3
4
5
6
7
8
9
10
        // assets/vue/controllers/Hello.vue
<template>
    <div>Hello {{ name }}!</div>
</template>

<script setup>
    defineProps({
        name: String
    });
</script>
    

        1
2
        {# templates/home.html.twig #}
<div {{ vue_component('Hello', { 'name': app.user.fullName }) }}></div>
    

事件

事件 vue:before-mount 在组件挂载到页面之前调用。如果您需要修改 Vue 应用程序（例如：添加插件、添加全局指令、状态...），这是要监听的事件。

        1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
        // assets/app.js
document.addEventListener('vue:before-mount', (event) => {
    const {
        componentName, // The Vue component's name
        component, // The resolved Vue component
        props, // The props that will be injected to the component
        app, // The Vue application instance
    } = event.detail;

    // Example with Vue Router
    const router = VueRouter.createRouter({
        history: VueRouter.createWebHashHistory(),
        routes: [
            /* ... */
        ],
    });

    app.use(router);
});
    

注意

当使用 Vue Router 时，您可以使用 “hash” 或 “memory” 历史模式，以防止您的 Vue 路由通过 Symfony 控制器提供服务。如果您想使用 web 历史模式，请参阅 Symfony UX Vue.js

事件 vue:mount 在组件已挂载到页面上时调用

        1
2
3
4
5
6
7
        document.addEventListener('vue:mount', (event) => {
    const {
        componentName, // The Vue component's name
        component, // The resolved Vue component
        props, // The props that are injected to the component
    } = event.detail;
});
    

事件 vue:unmount 在组件已从页面卸载时调用

        1
2
3
4
5
6
        document.addEventListener('vue:unmount', (event) => {
    const {
        componentName, // The Vue component's name
        props, // The props that were injected to the component
    } = event.detail;
});
    

使用 Vue Router 的 Web 历史模式

要将 “web” 历史模式与 Vue Router 一起使用，将需要一个 catch-all 路由，该路由应渲染相同的模板和 Vue 组件

        1
2
3
4
5
        #Route('/survey/{path<.+>}')
public function survey($path = ''): Response
{
    // render the template
}
    

此控制器将捕获任何以 `/survey` 开头的 URL。然后，此前缀可用于所有 Vue 路由

        1
2
3
4
5
6
7
8
9
10
        const router = VueRouter.createRouter({
    history: VueRouter.createWebHistory(),
    routes: [
        { path: '/survey/list', component: ListSurveys },
        { path: '/survey/create', component: CreateSurvey },
        { path: '/survey/edit/:surveyId', component: EditSurvey },
    ],
});

app.use(router);
    

与 AssetMapper 一起使用

Vue 单文件组件 (即 .vue) 文件格式不是纯 JavaScript，目前无法在 Webpack Encore 或 Vite 等打包器之外转换为纯 JavaScript。这意味着 .vue 文件格式不能与 AssetMapper 一起使用。

如果您仍然想将 Vue 与 AssetMapper 一起使用，您可以通过避免 .vue 文件格式来做到这一点。例如，https://github.com/symfony/ux/blob/2.x/ux.symfony.com/assets/vue/controllers/PackageSearch.js。

向后兼容性承诺

此扩展包旨在遵循与 Symfony 框架相同的向后兼容性承诺：http://symfony.ac.cn/doc/current/contributing/code/bc.html

这项工作，包括代码示例，根据 Creative Commons BY-SA 3.0 许可协议获得许可。

版本