怎么在vue-cli webpack中引入swiper

怎么在vue-cli webpack中引入swiper？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

1：下载需要 swiper 的js文件和css文件

http://www.swiper.com.cn/

2：下载好swiper相关的js和css，js放在static目录下，css放在assets目录下。

3：安装runtime：

npminstallbabel-runtime

4：修改.eslintrc.js文件如下： 最后一行添加

'globals':{
"Swiper":true
}//这个地方是新加入的全局注入

5： vue模板中引入 swiper.min.js

importSwiperfrom'@/../static/js/swiper.min.js';

6： vue模板中引入 swiper-3.4.2.min.css

@importurl("../../assets/css/swiper-3.4.2.min.css");

7： html 结构

<!--Swiper-->
<divclass="home_banner">
<divclass="swiper-container">
<divclass="swiper-wrapper">
<divclass="swiper-slide">
<imgsrc="./../../assets/img/sec_3_top_2@2x.jpg">
</div>
<divclass="swiper-slide">
<imgsrc="./../../assets/img/sec_3_top_2@2x.jpg">
</div>
<divclass="swiper-slide">
<imgsrc="./../../assets/img/sec_3_top_2@2x.jpg">
</div>
</div>
</div>
</div>
<!--Swiperend-->

8：vue js

mounted(){
varmySwiper=newSwiper('.home_banner.swiper-container',{
direction:'horizontal',
loop:true
});
//Swiper推荐课程
varswiper2=newSwiper('.course_swiper_wrap.swiper-container',{
slidesPerView:3,
paginationClickable:true,
nextButton:'.swiper-button-next-01',
prevButton:'.swiper-button-prev-01',
spaceBetween:30,
freeMode:true,
loop:true
});
}

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注恰卡编程网行业资讯频道，感谢您对恰卡编程网的支持。