vue.js 注册Web组件

Question

我正在使用 vue.js 并使用 stencil.js 创建了一个 web 组件。我不想将 Web 组件发布到 npm，这就是为什么我只是将其包含在我的 vue 项目的 src/assets 目录中。

但是我收到错误

[Vue warn]: Unknown custom element: <my-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 
    found in ---> 
        <App> at src/app.vue
            <Root>

它与我在资产目录中已有的另一个组件一起工作没有问题。

它也无助于使用

Vue.config.ignoredElements = ['my-component'];

因为当我在本地运行该组件时，该组件仍然是空的。

感谢您的帮助！

Answer 1

如果您在本地包含 Web 组件，则可以使用 @vue/web-component-wrapper：

import Vue from 'vue'
import wrap from '@vue/web-component-wrapper'

const Component = {
  // any component options
}

const CustomElement = wrap(Vue, Component)

window.customElements.define('my-element', CustomElement)