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

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

2：下載好swiper相關(guān)的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 結(jié)構(gòu)

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

});?

?}