[英]Vue component rendered out as comment?
I'm trying to include a Vue npm package called Vue Carousel as a component in my project.我正在尝试在我的项目中包含一个名为Vue Carousel的 Vue npm 包作为组件。
This specific example of how to use the component employs a template string for its template , so I've tried to include this component in the same way. 这个如何使用组件的具体示例为其 template 使用了一个模板字符串,所以我尝试以相同的方式包含这个组件。
carousel.vue
: 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>
I then try to include this component in my main component, app.vue
:然后我尝试将此组件包含在我的主要组件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>
I assumed the component would be ready to use within app.html
at this point:我假设该组件此时可以在app.html
中使用:
<div id="app">
<testcarousel />
</div>
Unfortunately, I don't see the carousel displayed in the browser, and the component appears to be commented out in the DOM, appearing like this:不幸的是,我没有看到浏览器中显示的轮播,组件似乎在 DOM 中被注释掉了,如下所示:
<!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->
I also get this error in the console:我也在控制台中收到此错误:
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. [Vue 警告]:您正在使用 Vue 的仅运行时构建,模板编译器不可用。 Either pre-compile the templates into render functions, or use the compiler-included build.要么将模板预编译为渲染函数,要么使用包含编译器的构建。
After doing some research, it seems that I will need to have the runtimeCompiler option set to true , but after adding a vue.config.js
with this setting:在做了一些研究之后,似乎我需要将 runtimeCompiler 选项设置为 true ,但是在使用此设置添加vue.config.js
之后:
module.exports = {
runtimeCompiler: true,
}
..I'm not seeing any changes. ..我没有看到任何变化。 I don't have Webpack installed in this project.我没有在这个项目中安装 Webpack。 Do I need to do that to make this work?我需要这样做才能完成这项工作吗? Bonus dumb question: will it affect my project if I install Webpack after the initial project creation?额外的愚蠢问题:如果我在初始项目创建后安装 Webpack 会影响我的项目吗?
I think that you forgot about Vue.use(VueCarousel).我想你忘记了 Vue.use(VueCarousel)。 Add Vue.use(VueCarousel) before:在之前添加 Vue.use(VueCarousel):
export default {
name: 'testcarousel',
template: '<div><carousel :navigationEnabled="true">' + buildSlideMarkup(10) + '</carousel></div>',
Carousel,
Slide
}
If this won't work try to recreate your project with vue-cli and choose WEBPACK option it should work.如果这不起作用,请尝试使用 vue-cli 重新创建您的项目并选择WEBPACK选项,它应该可以工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.