Vue组件呈现为评论？

Posted 2021-03-30

我正在尝试将名为Vue Carousel的Vue npm包作为我项目中的一个组件。

This specific example of how to use the component employs a template string for its template，所以我试图以同样的方式包含这个组件。

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的仅运行时版本，其中模板编译器不可用。将模板预编译为渲染函数，或使用包含编译器的构建。

在做了一些研究后，似乎I will need to have the runtimeCompiler option set to true，但在添加了vue.config.js之后：

module.exports = {
    runtimeCompiler: true,
}

..我没有看到任何变化。我没有在这个项目中安装Webpack。我需要这样做才能使这项工作成功吗？额外的愚蠢问题：如果我在创建初始项目后安装Webpack，它会影响我的项目吗？

答案

我想你忘记了Vue.use（VueCarousel）。之前添加Vue.use（VueCarousel）：

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