Pagekit/VueJS:添加VueJS-组件失败

Question

也许你可以成为我那个时代的救世主。

我正在尝试将vue-组件实现到我的扩展。

我不能包括自定义Vue.js组件。我按照https://pagekit.com/docs/developer-basics/vuejs-and-webpack创建了一个组件，该组件应该提供一个应该包含在扩展的设置视图中的模式字段。这个模式应该在同一个页面上使用多次，内容不同，所以我更喜欢使用自定义组件，而不是反复对其进行硬编码，而不是设置-视图(views/settings.php)。

为了存档这个文件，我创建了以下文件：app/components/template.vue

<template>
<div>Test</div>
</template>

<script>

    module.exports = {

        section: {
            label: 'Template',
            priority: 100
        }
    };

    window.Settings.components['template'] = module.exports;

</script>

我还更新了webpack.config.js

module.exports = [

    {
        entry: {
            "settings": "./app/views/admin/settings",
            "template": "./app/components/template.vue"

        },
        output: {
            filename: "./app/bundle/[name].js"
        },
        module: {
            loaders: [
                {test: /\.vue$/, loader: "vue"}
            ]
        }
    }

];

我在index.php中注册了组件

    'events'      => [
        'view.scripts' => function ( $event, $scripts ) {
            $scripts->register( 'template', 'isp:app/bundle/template.js', '~settings' );
        }
    ]

现在我试着让这些东西在视野中运作

$view->script( 'settings', 'isp:app/bundle/settings.js', [ 'vue', 'uikit-form-password', 'editor' ] )
;

<component :is="template"></component>

但是没有显示测试字符串。

Answer 1

在执行此操作时，您正在将组件命名为“模板”：

window.Settings.components['template'] = module.exports;

改为：

window.Settings.components['component'] = module.exports;