大康致远/typo3-ux-vue

轻松在Fluid模板中渲染Vue.js组件

安装次数: 0

依赖者: 0

建议者: 0

安全性: 0

星标: 0

关注者: 0

分支: 0

开放问题: 0

类型:typo3-cms-extension

v1.0.1 2023-04-18 12:31 UTC

This package is auto-updated.

Last update: 2024-09-07 10:29:37 UTC


README

Latest Stable Version Total Downloads Monthly Downloads Latest Unstable Version License PHP Version Require

TYPO3 扩展 "typo3-ux-vue"

它做了什么?

在Fluid模板中直接渲染Vue组件

此扩展允许您在Fluid模板中直接渲染Vue组件。它将symfony/ux-vue集成到TYPO3中。

安装

推荐通过使用Composer安装此扩展。在您的基于Composer的TYPO3项目根目录下,只需运行

composer require dskzpt/typo3-ux-vue

设置

在开始之前,请确保您已安装EXT:typo3_encore。此扩展将Webpack Encore集成到TYPO3中。

请遵循Symfony UX Vue官方文档

此外

# Add this line to your package.json dependencies:
"@symfony/ux-vue": "file:vendor/symfony/ux-vue/assets"

# Add these two lines to your app.js:
import {registerVueControllerComponents} from '@symfony/ux-vue';
registerVueControllerComponents(require.context('./vue/controllers', true, /\.vue$/));

# Install Vue.js
$ npm i vue

# or
$ yarn add vue

# Add these lines to your controllers.json:
"@symfony/ux-vue": {
    "vue": {
        "enabled": true,
        "fetch": "eager"
    }
}

# run
$ npm install --force
$ npm run watch

# or
$ yarn install --force
$ yarn watch

用法

在任何Fluid模板中:只需注册命名空间,然后使用提供的ViewHelper来渲染您的组件

<html xmlns:ux="http://typo3.org/ns/DSKZPT/UX/Vue/ViewHelpers">
    <div {ux:vueComponent(name:'MyComponent',props:"{'name':'John Doe'}")}></div>
</html>

贡献

请参阅此存储库中包含的贡献文档。