Vue组件呈现为评论？

Question

我正在尝试在我的项目中包含一个名为 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，它会影响我的项目吗？

Answer 1

我认为你忘记了 Vue.use(VueCarousel)。在前面添加 Vue.use(VueCarousel)：

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

如果这不起作用，请尝试使用 vue-cli 重新创建您的项目并选择 WEBPACK 选项它应该可以工作。