Vue компонент вынесен в качестве комментария? - PullRequest
Новая
       3

Vue компонент вынесен в качестве комментария?

0 голосов
/ 24 марта 2019

Я пытаюсь включить пакет Vue npm под названием Vue Carousel в качестве компонента в моем проекте.

Этот конкретный пример того, как использовать компонент, использует шаблонную строку для своего шаблона , поэтому я попытался включить этот компонент таким же образом.

carousel.vue: 

<script>
    import { Carousel, Slide } from 'vue-carousel'

    const buildSlideMarkup = (count) => {
        let slideMarkup = '';
        for (var i = 1; i <= count; i++) {
            slideMarkup += '<slide><span class="label">' + i + '</span></slide>'
        }
    return slideMarkup;
    };

    export default {
        name: 'testcarousel',
        template: '<div><carousel :navigationEnabled="true">' + buildSlideMarkup(10) + '</carousel></div>',
        Carousel,
        Slide
    }
</script>

Затем я пытаюсь включить этот компонент в мой основной компонент, app.vue: 

<style scoped src="./app.css"></style>
<template src="./app.html"></template>

<script>
  import testcarousel from '../carousel/carousel'

  export default {
    name: 'app',
    components: { testcarousel }
  }
</script>

Я предполагал, что компонент будет готов к использованию в app.html на этом этапе: 

<div id="app">
    <testcarousel />
</div>

К сожалению, я не вижу карусели, отображаемой в браузере, и компонент выглядит закомментированным в DOM, выглядя так: 

<!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->

Я также получаю эту ошибку в консоли:

[Предупреждение Vue]: вы используете сборку Vue только для времени выполнения, где Компилятор шаблонов недоступен. Либо предварительно скомпилируйте шаблоны в функции рендеринга или используйте компилятор, включенный в сборку.

После некоторого исследования кажется, что Мне нужно будет установить для параметра runtimeCompiler значение true , но после добавления vue.config.js с этим параметром: 

module.exports = {
    runtimeCompiler: true,
}

.. Я не вижу никаких изменений. У меня не установлен Webpack в этом проекте. Нужно ли делать это, чтобы сделать эту работу? Бонус тупой вопрос: повлияет ли это на мой проект, если я установлю Webpack после первоначального создания проекта?

1 Ответ

1 голос
/ 24 марта 2019

Я думаю, что вы забыли о Vue.use (VueCarousel). Добавьте Vue.use (VueCarousel) до: 

    export default {
        name: 'testcarousel',
        template: '<div><carousel :navigationEnabled="true">' + buildSlideMarkup(10) + '</carousel></div>',
        Carousel,
        Slide
    }
...