vue-cli 脚手架配置 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 结构

8：vue js

mounted() {varmySwiper=newSwiper('.home_banner .swiper-container', {

            direction:'horizontal',loop:true

});

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

}); 

 }