如何使用 Typescript 在 Vue 应用程序中使用 webcomponents

Question

我正在尝试在我的 Vue 项目中使用 Web 组件。但是，它没有正确加载。我可以在我的 DOM 中看到该元素，但只是一个空标签，而不是它应该是的按钮。我得到的第一个错误是没有声明模块，所以我根据 tsconst.d.ts:

中错误消息的建议声明了一个

declare module 'wc-button';

现在，我在 Vue 的控制台中收到警告，它是一个未知的自定义元素，如果我忘记在组件下注册它。但是，因为它是一个 webcomponent，我不认为它应该是。我可以通过将 Web 组件添加到 vue.config.ignoredElements 来使消息消失，但这只是隐藏了消息。如果我将我的代码切换为 javascript，它工作正常。所以我希望我需要为它正确声明一个模块，但我不确定如何进行。有没有人有我可以比较的例子或回购协议？

我的组件：

<template>
  <div>
    <button class="btn btn-primary" @click="onClick()">
      Click!
    </button>
    <wc-button type="primary" @click="onClick()">
      Click
    </wc-button>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import wcButton from 'wc-button';

export default Vue.extend({
    data: () => ({
        buttonOutput: 'I was clicked!',
    }),
    methods: {
        onClick(): string {
            return this.buttonOutput;
        },
    },
});
</script>

Answer 1

通过从启动 Vue 应用程序的地方导入我的 app.js 中的 Web 组件找到了解决方法。这有点 hacky，但这让我避免了所有阻碍我的打字稿问题。

如何使用 Typescript 在 Vue 应用程序中使用 webcomponents

How can I use webcomponents in a Vue application using Typescript

web-component

typescript

vue.js

typescript-typings

vuejs2