webpack - 页面包/VueJS : Adding VueJS-component fails

Question

也许你可以成为我一天的救世主。

我正在尝试为我的扩展实现 vue-components。

我不能包含自定义 Vue.js 组件。我关注了https://pagekit.com/docs/developer-basics/vuejs-and-webpack创建一个应该提供模态字段的组件，该模态字段应该包含在我的扩展的设置 View 中。这个模式应该在同一页面上多次使用不同的内容，所以我更喜欢使用自定义组件而不是一遍又一遍地硬编码到设置 View (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 中的东西正常工作

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

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

但是没有显示测试字符串

Answer 1

您在执行此操作时将组件命名为"template":

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

将其更改为:

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