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组件呈现为评论？

1 个答案: