如何忽略 VuePress 中的自定义元素以避免“未知自定义元素”错误？答案

【问题标题】：How to ignore custom elements in VuePress to avoid the "Unknown custom element" error?如何忽略 VuePress 中的自定义元素以避免“未知自定义元素”错误？
【发布时间】：2019-09-16 09:23:21
【问题描述】：

我正在使用 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

提前致谢。

【问题讨论】：

嗨，我也在尝试这样做。你能告诉我你如何以及在哪里导入自定义元素（nova-timeline）吗？

标签： vue.js vuepress

【解决方案1】：

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

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

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 组件。

【讨论】：