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>

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

- MyFault

Answer 1

当你这样做时，你给你的组件命名为“template”：

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

将其更改为：

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

- crabbly

---

抱歉，crabbly，这仍然无法正常工作。而且其他扩展程序在此处也不使用 ['components']，正如您在 https://github.com/pagekit/extension-blog/blob/master/app/components/post-meta.vue#L36 中所看到的那样。该组件的名称为 post-meta。 - MyFault

这是你命名组件的地方，在你的情况下，你尝试使用<component :is="template"></component>，这意味着你的组件名称必须为component。你可以将其更改为其他名称，比如 my-component，然后像这样使用它 <my-component :is="template"></my-component>，但你需要这样声明它 window.Settings.components['my-component'] = module.exports;。 - crabbly