vue-cli webpack 引入swiper的操作方法
更新時間：2018年09月15日 10:11:30 作者：愛lv行
今天小編就為大家分享一篇vue-cli webpack 引入swiper的操作方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
1：下載需要 swiper 的js文件和css文件
http://www.swiper.com.cn/
2：下載好swiper相關(guān)的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 結(jié)構(gòu)
<!-- Swiper -->
<div class="home_banner">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./../../assets/img/sec_3_top_2@2x.jpg">
</div>
<div class="swiper-slide">
<img src="./../../assets/img/sec_3_top_2@2x.jpg">
</div>
<div class="swiper-slide">
<img src="./../../assets/img/sec_3_top_2@2x.jpg">
</div>
</div>
</div>
</div>
<!-- Swiper end -->
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的操作方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue?elementUI實現(xiàn)樹形結(jié)構(gòu)表格與懶加載
這篇文章主要介紹了通過Vue和elementUI實現(xiàn)樹形結(jié)構(gòu)表格與懶加載，文中的示例代碼講解詳細(xì)，感興趣的小伙伴快來跟隨小編一起學(xué)習(xí)一下吧2022-01-01
這篇文章主要給大家分享的是vue中v-for指令完成列表渲染，下面文化章就圍繞中v-for的相關(guān)資料在Vue中列表渲染做個簡單總結(jié)和使用演示,需要的朋友可以參考一下，希望對大家有所幫助2021-11-11
這篇文章主要介紹了vue3中Vant的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要給大家介紹了關(guān)于vue的ssr服務(wù)端渲染的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要介紹了nuxt實現(xiàn)封裝axios并且獲取token,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue3中定義全局指令時,往往會碰到一個問題：事件無法解綁,為什么會這樣,因為通常在指令的mounted鉤子中綁定事件,事件處理函數(shù)也定義在mounted中,本文講給大家講講vue3中addEventListener的妙用,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Vue常用傳值方式、父傳子、子傳父及非父子,結(jié)合實例形式分析了vue.js常見的傳值方式及相關(guān)操作注意事項,需要的朋友可以參考下2020-02-02
vue中electron框架自定義外部配置文件的配置與讀取辦法
使用Electron開發(fā)本地跨平臺的本地程序時,有時需要添加一些程序的配置文件,下面這篇文章主要給大家介紹了關(guān)于vue中electron框架自定義外部配置文件的配置與讀取的相關(guān)資料,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue組件實現(xiàn)卡片動畫倒計時示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
對于vue來說，組件之間的消息傳遞是非常重要的，用vue可以是要組件復(fù)用的，而組件實例的作用域是相互獨立，這意味著不同組件之間的數(shù)據(jù)無法互相引用，一般來說，組件之間可以有幾種關(guān)系，下面是我對組件之間消息傳遞的常用方式的總結(jié)2022-08-08