0

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

加载页面后，我的 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

提前致谢。

4

1 回答 1

2

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

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

于 2019-04-26T22:34:20.890 回答