如何在VuePress中忽略自定义元素，以避免出现“未知的自定义元素”错误？

Question

我正在使用VuePress创建W3C Web组件库（Vanilla JavaScript）的文档。但是，我的“自定义” Web组件由于VuePress试图在页面首次加载时试图将它们“识别”为Vue组件而产生了错误。

页面加载后，我的Web组件将按预期工作，但是仍然存在错误。

这是我得到的错误：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <nova-timeline> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <TimeLineWrapper> at docs/.vuepress/components/TimeLineWrapper.vue

我创建了与Vuepress相关的以下结构

.
├── docs
│   ├── .vuepress
│   │   ├── components
│   │   │   ├── TimeLineWrapper.vue
│   │   ├── config.js
│   │   └── theme
│   ├── README.md
│   ├── components
│   │   ├── README.md
│   │   └── Timeline.md

这是我的代码的一部分：

// docs/.vuepress/components/TimeLineWrapper.vue
<template>
    <nova-timeline ref="timeline"></nova-timeline>
</template>
<script>
  import timeLineJson from "./data/TimeLineData";

  export default {
    data() {
      return {
        timeLineJson: timeLineJson
      };
    },
    mounted() {
      this.$refs.timeline.data = this.timeLineJson.data;
      this.$refs.timeline.configuration = this.timeLineJson.configuration;
    }
  };
</script>

// This is my W3C web component:
<nova-timeline ref="timeline"></nova-timeline>

我想知道的是如何“忽略自定义组件”，我的意思是在哪里或如何使用VuePress方式进行这种配置。

Vue.config.ignoredElements = [
  // Use a `RegExp` to ignore all elements that start with "nova-"
  // 2.5+ only
  /^nova-/
]

https://vuejs.org/v2/api/#ignoredElements

谢谢。

Answer 1

我终于设法找到如何添加我忽略的元素，

1）在enhanceApp.js中创建一个名为docs/.vuepress/theme的文件

2）将此内容放入其中：

// https://vuepress.vuejs.org/guide/custom-themes.html#app-level-enhancements
export default ({ Vue, options, router, siteData }) => {
  Vue.config.ignoredElements = [
    // Use a `RegExp` to ignore all elements that start with "nova-"
    // 2.5+ only
    /^nova-/
  ];
}

现在，该错误将消失，因为Vue将忽略我们的自定义Web组件。