vue开发：vue-cli引入swiper

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

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

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

3：安装runtime：

npm install babel-runtime 
1

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

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

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

import Swiper from '@/../static/js/swiper.min.js';
1

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

@import url("../../assets/css/swiper-3.4.2.min.css");
1

7: html 结构

    <!-- Swiper -->    <div class="home_banner">      <div class="swiper-container">        <div class="swiper-wrapper">          <div class="swiper-slide">              <img src="./../../assets/img/[e-mail]">          </div>          <div class="swiper-slide">              <img src="./../../assets/img/[e-mail]">          </div>          <div class="swiper-slide">              <img src="./../../assets/img/[e-mail]">          </div>        </div>      </div>    </div>    <!-- Swiper end  -->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

8：vue js

  mounted() {    var mySwiper = new Swiper('.home_banner .swiper-container', {      direction: 'horizontal',      loop: true    });    // Swiper 推荐课程    var swiper2 = new Swiper('.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    });  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16