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

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

2：下載好swiper相關的js和css，js放在static目錄下，css放在assets目錄下。

3：安裝runtime：

npm install babel-runtime

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

'globals': {

"Swiper": true

} //這個地方是新加入的 全局注入

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

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

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

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

7： html 結構

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

});

}

以上這篇vue-cli webpack 引入swiper的操作方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的html如何引入swiper,vue-cli webpack 引入swiper的操作方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。