Как игнорировать пользовательские элементы в VuePress, чтобы избежать ошибки «Неизвестный пользовательский элемент»? - PullRequest
Новая
       27

Как игнорировать пользовательские элементы в VuePress, чтобы избежать ошибки «Неизвестный пользовательский элемент»?

0 голосов
/ 26 апреля 2019

Я создаю документацию для библиотеки веб-компонентов W3C (Vanilla JavaScript) с использованием VuePress. Однако мои «пользовательские» веб-компоненты генерируют ошибку из-за того, что VuePress пытается «распознать» их как компоненты Vue при первой загрузке страницы.

После загрузки страницы мои веб-компоненты работают как положено , но ошибка все равно есть.

Это ошибка, которую я получаю: 

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

Заранее спасибо.

1 Ответ

0 голосов
/ 27 апреля 2019

Мне наконец-то удалось найти, как добавить мои игнорируемые элементы,

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 будет игнорировать наши пользовательские веб-компоненты.

...