Как вывести шаблон в Vue?

Question

[chelkaz]

Чем больше вникаю, тем больше непонимания...
Например почему у меня ничего не выводит и нет ошибок?

import Vue from 'vue'
// В Example.vue есть <template><div>TEST</div></template>
import Example from './components/Example.vue'

new Vue({
    el: '#example',
    components: {Example}
});

Ну и в основной странице
После npm run dev На странице не отображается контент из Example.vue
Но если специально изменяю Example.vue на Example12345.vue
То в консоле ошибки что нет такого.

Например как понять где ошибки? В консоле почти при любой ошибки пишет не конкретно, а как то абстрактно и понять не получается.

Comments

[Антон Антон]

Ошибки компиляции (например в import указан несуществующий файл или в шаблоне незакрыт тег) - в консоль на сервере, в которой npm run dev
Ошибки выполнения (например когда нет какого-то свойства) - в консоль javascript инструментов разработчика браузера, например в firefox открывается по F12

[Aslan]

у вас example экспортируется?

[Evgeny Kulakov]

Что у ваc в самом контейнере #example? Вы сам компонент где-то используете вообще?)

[chelkaz]

Evgeny Kulakov: просто <div id="example"></div>

[chelkaz]

Антон Антон: Да как смотреть логи я знаю) Я про то, что они не конкретные!
Например:

error code ELIFECYCLE
22 error errno 2
23 error @ dev: `npm run development`
23 error Exit status 2
24 error Failed at the @ dev script.
24 error This is probably not a problem with npm. There is likely additional logging output above.
25 verbose exit [ 2, true ]

И что это и как понять?

[chelkaz]

Aslan: Как понять example экспортируется... Где он должен экспортироваться?

[Evgeny Kulakov]

chelkaz: Т.е. у вас компонент вообще не выводится в шаблоне, сделайте так для начала: <div id="example"><example></example></div>

[chelkaz]

Evgeny Kulakov: Так вывелся! А почему? Я ведь не указывал имя example

[Evgeny Kulakov]

chelkaz: Вы импортировали компонент, но ни где его не используете.
Вот эта запись: components: {Example} есть components: {Example: Example}
см. синтаксис ES6

Answer 1

[Илья]

1. Вы не вывели сам плагин <example></example>

2. Установите VueDevTools плагин для хрома

Answer 2

[Gennadiy Balachkov]

Компонента выводится таким образом

import Vue from 'vue'
// В Example.vue есть <template><div>TEST</div></template>
import Example from './components/Example.vue'

new Vue({
    el: '#example',
    template: '<Example/>',
    components: {Example}
});