VueJS - анализ шаблона DOM и пользовательских элементов

Question

В основном мне нужен VueJS, чтобы предупредить меня о незарегистрированных компонентах в режиме парсинга шаблонов DOM. В настоящее время похоже, что Vue не заботится о собственном HTML при использовании шаблонов DOM, в то время как ошибки правильно генерируются при использовании однофайловых компонентов, строковых шаблонов и x-шаблонов (согласно документам ).

Один простой способ воспроизвести проблему - зарегистрировать компонент:

Vue.component('existing', {
  template: `
    <div>
      <p>Existing component</p>
    </div>
  `
})

и затем смонтировать простой экземпляр Vue

new window.Vue({
  el: '#app',
  data() {
    return {
      text: 'text'
    }
  },
  mounted() {
    console.log('mounted')
  }
})

где в DOM под элементом #app есть незарегистрированный элемент, как в

<div id="app">
  {{text}}
  <existing></existing>

  <!-- Should give an error -->
  <non-existing></non-existing>
</div>

Я подготовил CodePen для воспроизведения этой простой среды.

Answer 1

Vue в этом случае выдает ошибку [Vue warn].

Однако вы используете производственную сборку Vue в своем примере CodePen (vue.min.js), который подавляет эти предупреждения.

Вот пример использования непроизводственной сборки Vue:

Vue.config.devtools = false;

Vue.component('existing', {
  template: `
    <div>
      <p>Existing component</p>
    </div>
  `
})

new Vue({
  el: '#app',
  data() {
    return {
      text: 'text'
    }
  },
  mounted() {
    console.log('root mounted')
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{text}}
  <existing></existing>
  
  <!-- Should give an error -->
  <non-existing></non-existing>
</div>