如何正确安装Vue Hooper滑块?

Question

我已经为我的应用程序学习Vue.js 2几个星期了，我不想使用Bootstrap carousel，因为没有内置的滑动功能。

所以我尝试使用Vue.js滑块，如Flickity和Hooper。但是由于某些原因，CSS没有导入，所以我在滑块上看不到任何样式。下面是测试滑动条

的步骤

vue create slider-test

然后

npm install hooper

然后我试着跟着这个https://vuejsexamples.com/a-customizable-carousel-slider-optimized-for-vue/

Answer 1

确保导入了CSS:

import 'hooper/dist/hooper.css';

另外，在链接的安装过程中有两个错别字:

• import { Hooper, Slide } from 'hooper'; // from not form

• 结束的</template>标记缺少斜杠。

下面是他们的示例组件的工作版本:

<template>
<hooper>
<slide>
slide 1
</slide>
<slide>
slide 2
</slide>
</hooper>
</template>
<script>
import { Hooper, Slide } from 'hooper';
import 'hooper/dist/hooper.css';
export default {
name: 'App',
components: {
Hooper,
Slide
}
}
</script>