小部件非导入组件的Vue中未知的自定义元素元素

Question

通常，人们会使用 Vue.component() 来注册导入的组件。但是，我在我的代码中包含了一个小部件片段而不是导入的模块：

<template>
  <v-dialog>
      <script type="application/javascript" defer src="some/hosted/javascript/app.js"></script> 
      <link href="some/hosted/css/app.css" rel="stylesheet" />
      <example-vue-widget some-prop="some-data"></example-vue-widget>
  </v-dialog>
</template>

这是我按照本教程使用 webpack 创建的一个小部件：https://itnext.io/vuidget-how-to-create-an-embeddable-vue-js-widget-with-vue-custom-element-674bdcb96b97

这个小部件本质上是一个可以正常工作的第三方元素。

但是，我得到这个：

[Vue warn]: Unknown custom element: <example-vue-widget> - did you register the
component correctly? For recursive components, make sure to provide the "name" option.

我明白为什么 Vue 将上面的警告显示为控制台错误。但是，我怎样才能解决这个问题或至少抑制这个特定的警告？

Answer 1

您可以在 main.js 文件中注册该组件。 This 文章对此做了很好的解释。您基本上只需将这一行添加到主文件中，然后再添加 new Vue({}) 语句。希望对您有所帮助！

// Globally register your component
Vue.component('example-vue-widget', exampleVueWidget);

Answer 2

将和元素移动到 index.html 中，同时将 widget snipped 标签保留在应该解决问题的位置。

小部件非导入组件的Vue中未知的自定义元素元素

Unknown custom element element in Vue for a widget non-imported component

html

javascript

widget

webpack

vue.js