如何将光滑的旋转木马添加到Nuxt

Question

我基本上是想把它添加到网站上

https://codepen.io/pnmcosta/pen/GYpxgr

将其放置在其中一个组件上，它会给出以下错误

render function or template not defined in component: FirstPageSecondSection

基本上只是将其添加到脚本、样式和模板中

以下是我添加脚本时的一个示例

<script>
export default {
data:() =>({

})
}
$(function() {
$('.slider-services').slick({
dots: true,
appendDots: '.slider-dots',
arrows: true,
infinite: false,
slidesToScroll: 3,
slidesToShow: 3,
accessibility: true,
variableWidth: false,
focusOnSelect: false,
centerMode: false,
responsive: [
{
breakpoint: 992,
settings: {
slidesToScroll: 2,
slidesToShow: 2
}
},
{
breakpoint: 600,
settings: {
slidesToScroll: 1,
slidesToShow: 1
}
}
]
});
});  
</script>

我是Nuxtjs的新手，希望能从前辈那里得到提升。

Answer 1

这个使用光滑的旋转木马。它基于jQuery。由于您使用的是VueJS，我建议您使用任何其他转盘，而不是尝试使用一些命令式的黑客代码
VueJS是声明性的，因此不依赖jQuery(命令式(可能是个好主意。此外，VueJS本身就足以不将整个jQuery放在代码库之上(实际上，更多的JS是免费的(。

以下是您可以使用的转盘的完整列表：https://github.com/vuejs/awesome-vue#carousel

我发现并使用了vue silentbox，不是最小的，但做得很好。

我在这个网站上用过它，点击一张图片，你就会看到旋转木马
可以在此处找到代码示例：https://github.com/kissu/pet-friends/blob/master/src/views/Home.vue#L26

---

OP的格式化和修改代码，这个代码本身不起作用，因为我们也需要定义jQuery(否则$将未定义(。不过，NOT是我推荐的解决方案。

<script>
export default {
mounted() {
$(function () {
$('.slider-services').slick({
dots: true,
appendDots: '.slider-dots',
arrows: true,
infinite: false,
slidesToScroll: 3,
slidesToShow: 3,
accessibility: true,
variableWidth: false,
focusOnSelect: false,
centerMode: false,
responsive: [
{
breakpoint: 992,
settings: {
slidesToScroll: 2,
slidesToShow: 2,
},
},
{
breakpoint: 600,
settings: {
slidesToScroll: 1,
slidesToShow: 1,
},
},
],
})
})
},
}
</script>