日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間:8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
怎么在vue-cliwebpack中引入swiper-創(chuàng)新互聯(lián)

怎么在vue-cli webpack中引入swiper?很多新手對(duì)此不是很清楚,為了幫助大家解決這個(gè)難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來學(xué)習(xí)下,希望你能有所收獲。

成都創(chuàng)新互聯(lián)是網(wǎng)站建設(shè)技術(shù)企業(yè),為成都企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作,網(wǎng)站設(shè)計(jì),網(wǎng)站制作,網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制適合企業(yè)的網(wǎng)站。十年品質(zhì),值得信賴!

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
 } //這個(gè)地方是新加入的 全局注入

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)

 
 
  
  
   
    
   
            
            
  
  
 
 

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
 });
 }

看完上述內(nèi)容是否對(duì)您有幫助呢?如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章,請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝您對(duì)創(chuàng)新互聯(lián)的支持。


分享題目:怎么在vue-cliwebpack中引入swiper-創(chuàng)新互聯(lián)
網(wǎng)站鏈接:http://www.dlmjj.cn/article/djjojd.html