如何正确安装 Vue Hooper 滑块？

Posted 2023-02-16

【中文标题】如何正确安装 Vue Hooper 滑块？

【英文标题】：How to install Vue Hooper slider properly?

【发布时间】：2021-06-01 23:01:23

【问题描述】：

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

所以我尝试使用像 Flickity 和 Hooper 这样的 Vue.js 滑块。但由于某种原因，CSS 没有导入，所以我在滑块上看不到任何样式。这些是我为测试滑块所做的步骤

vue create slider-test

然后

npm install hooper

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

【问题讨论】：

嘿丹尼尔，你能添加更多上下文吗？例如，您能否向我们展示您尝试放置 hooper 组件的源代码？谢谢！

【参考方案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>

【讨论】：

兄弟你的救命稻草！我以为我只需要按照文档上的说明进行操作。我看过很多滑块文档，但没有一个说要导入 css。

很高兴它有帮助 :) 即使 Hooper 也不会在他们的主页示例中导入它（他们应该），尽管他们在他们的 getting started 页面上导入它（但仅在 4 个示例中的 1 个）跨度>