大康致远 / typo3-ux-vue
轻松在Fluid模板中渲染Vue.js组件
v1.0.1
2023-04-18 12:31 UTC
Requires
- ssch/typo3-encore: ^5.0.5
- symfony/ux-vue: ^2.6
Requires (Dev)
- ergebnis/composer-normalize: ^2.24
- friendsoftypo3/phpstan-typo3: ^0.9.0
- phpstan/extension-installer: ^1.2
- phpstan/phpstan: ^1.4
- typo3/coding-standards: ^0.6.1
Suggests
- ssch/typo3-encore: Integrates Webpack Encore into TYPO3
README
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中。
此外
# 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>
贡献
请参阅此存储库中包含的贡献文档。