如何正确安装 Vue Hooper 滑块？

Question

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

所以我正在尝试使用 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>

如何正确安装 Vue Hooper 滑块？

How to install Vue Hooper slider properly?

javascript

vue.js

vue-component

vuejs2

vue-cli