Question

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

我试图在扩展程序中实现vue组件。

我不能包含自定义Vue.js组件。我跟着https://pagekit.com/docs/developer-basics/vuejs-and-webpack创建了一个组件，该组件应该提供一个模式字段，该字段应该包含在我的扩展的设置视图中。这个模式应该在具有不同内容的同一页面上多次使用，所以我更喜欢使用自定义组件而不是一遍又一遍地对其进行硬编码到设置视图（e.g. <OpenURLButton url={'ical://www.example.com/calendar/event.ical'} />）。

为了存档，我创建了以下文件：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' );
        }
    ]

但是没有显示测试字符串

Answer 1

您正在命名您的组件＆＃39;模板＆＃39;这样做的时候：

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

将其更改为：

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

Pagekit / VueJS：添加VueJS组件失败

1 个答案: