Pagekit/VueJS：添加 VueJS 组件失败答案

【问题标题】：Pagekit/VueJS: Adding VueJS-component failsPagekit/VueJS：添加 VueJS 组件失败
【发布时间】：2016-10-05 04:44:12
【问题描述】：

也许你可以成为我这一天的救星。

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

我不能包含自定义 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>

但是没有显示测试字符串

【问题讨论】：

标签： webpack vue.js pagekit

【解决方案1】：

这样做时，您将组件命名为“模板”：

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

改成：

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

【讨论】：

您好，很遗憾，这仍然不起作用。正如您在 github.com/pagekit/extension-blog/blob/master/app/components/… 中看到的那样，其他扩展在这里也不使用 ['components'] 。此组件包含在名称 post-meta 中。
这是您命名组件的地方，在您的情况下，您尝试使用 <component :is="template"></component>，这意味着您的组件名称必须是 component。您可以将其更改为其他内容，例如 'my-component, then use it like this , but you would need to declare it like this window.Settings.components['my-component'] = module .exports;`