vue引入swiper vue使用swiper vue腳手架使用swiper /引入js文件/引入css文件

vue引入swiper vue使用swiper vue腳手架使用swiper /引入js文件/引入css文件

歡迎加入前端交流群來獲取視頻資料以及前端學習資料:749539640


              轉(zhuǎn)載文章請注明出處科汗!               

如果只是要使用輪播效果的話可以參考下一些vue組件钦幔;比如這篇文章

--------2019.7.9------------------

請參考swiper官方插件:https://github.com/surmon-china/vue-awesome-swiper

--------2019.7.9------------------

方法一:( 請先使用這種方法;更新于2018-05-14)

下載swiper:

npm install swiper --save-dev

swiper4.0使用入口:http://www.swiper.com.cn/usage/index.html

html:

<div class="swiper-container">
   <div class="swiper-wrapper">
       <div class="swiper-slide">Slide 1</div>
       <div class="swiper-slide">Slide 2</div>
       <div class="swiper-slide">Slide 3</div>
   </div>
   <!-- 如果需要分頁器 -->
   <div class="swiper-pagination"></div>
   
   <!-- 如果需要導航按鈕 -->
   <div class="swiper-button-prev"></div>
   <div class="swiper-button-next"></div>
   
   <!-- 如果需要滾動條 -->
   <div class="swiper-scrollbar"></div>
</div>

在需要使用swiper的組件里引入swiper魂拦,swiper的初始化放在mounted里(可以把官網(wǎng)例子的啟動 var mySwiper = 刪掉);

js:

<script>
import Swiper from 'swiper';
export default {
 name: 'HelloWorld',
 data () {
   return {
     msg: 'Welcome to Your Vue.js App'
   }
 },
 mounted(){
    new Swiper ('.swiper-container', {
   loop: true,
   // 如果需要分頁器
   pagination: '.swiper-pagination',
   // 如果需要前進后退按鈕
   nextButton: '.swiper-button-next',
   prevButton: '.swiper-button-prev',
   // 如果需要滾動條
   scrollbar: '.swiper-scrollbar',
 })        
 }
}
</script>

css:

在main.js里引入css

  import Vue from 'vue'
  import 'swiper/dist/css/swiper.css';

然后我們在用到swiper的組件里寫點樣式

<style scoped>
 .swiper-container {
        width: 500px;
        height: 300px;
        margin: 20px auto;
    }
</style>

-----------------------------------我是分割線-----------------------------------------------------------

方法二:(以下是2017年10月寫的,廢棄)

1.安裝vue-cli

參考地址:https://github.com/vuejs/vue-cli

如果不使用嚴格語法需要在后三項打no蚁吝;(加了挺頭疼的宇立,老是報錯,但是對自己的代碼規(guī)范性也是有很大的幫助的)

2.swiper下載示例代碼

參考地址:http://www.swiper.com.cn/usage/index.html

一:單個組件使用:

3.在剛下載好的vue-cli里的helloworld.vue進行代碼編寫步势。

3.1html部分:
 1 <template>
 2   <div class="hello">
 3     <div class="swiper-container">
 4     <div class="swiper-wrapper">
 5         <div class="swiper-slide">Slide 1</div>
 6         <div class="swiper-slide">Slide 2</div>
 7         <div class="swiper-slide">Slide 3</div>
 8     </div>
 9     <!-- 如果需要分頁器 -->
10     <div class="swiper-pagination"></div>
11     
12     <!-- 如果需要導航按鈕 -->
13     <div class="swiper-button-prev"></div>
14     <div class="swiper-button-next"></div>
15     
16     <!-- 如果需要滾動條 -->
17     <div class="swiper-scrollbar"></div>
18 </div>
19   </div>
20 </template>

3.2 js部分:

這里使用import引入swiper.js文件氧猬;

swiper的啟動放在mounted里執(zhí)行;

<script>
import'../assets/js/swiper.min.js'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
     var mySwiper = new Swiper ('.swiper-container', {
    loop: true,
    // 如果需要分頁器
    pagination: '.swiper-pagination',
    // 如果需要前進后退按鈕
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    // 如果需要滾動條
    scrollbar: '.swiper-scrollbar',
  })        
  }
}
</script>
3.3css部分:
 1 <style scoped>
 2 @import'../assets/css/swiper.min.css';
 3     body {
 4         margin: 0;
 5         padding: 0;
 6     }
 7     .swiper-container {
 8         width: 500px;
 9         height: 300px;
10         margin: 20px auto;
11     }
12    
13 
14     </style>

4.看似大工告成坏瘩,這時候會報錯:

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

這個錯誤查文檔說是:

在webpack打包的時候盅抚,可以在js文件中混用require和export。但是不能混用import 以及module.exports倔矾。

因為webpack 2中不允許混用import和module.exports

我們只需要吧.babelrc文件里的第11行代碼插件項"plugins": ["transform-runtime"],中的transform-runtime刪掉即可妄均;

 1 {
 2   "presets": [
 3     ["env", {
 4       "modules": false,
 5       "targets": {
 6         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7       }
 8     }],
 9     "stage-2"
10   ],
11   "plugins": [],
12   "env": {
13     "test": {
14       "presets": ["env", "stage-2"],
15       "plugins": ["istanbul"]
16     }
17   }
18 }

5.好了問題解決柱锹;

1010526960-68dbdcf94fe41125_articlex.jpeg

二:全局使用:

6.當然也可以全局使用swiper;代碼如下丰包;

還是在剛才的helloworld.vue進行代碼編寫禁熏;只是去掉js和css文件的引入!

helloworld.vue代碼:

 1 <template>
 2   <div class="hello">
 3     <div class="swiper-container">
 4     <div class="swiper-wrapper">
 5         <div class="swiper-slide">Slide 1</div>
 6         <div class="swiper-slide">Slide 2</div>
 7         <div class="swiper-slide">Slide 3</div>
 8     </div>
 9     <!-- 如果需要分頁器 -->
10     <div class="swiper-pagination"></div>
11     
12     <!-- 如果需要導航按鈕 -->
13     <div class="swiper-button-prev"></div>
14     <div class="swiper-button-next"></div>
15     
16     <!-- 如果需要滾動條 -->
17     <div class="swiper-scrollbar"></div>
18 </div>
19   </div>
20 </template>
21 
22 <script>
23 
24 export default {
25   name: 'HelloWorld',
26   data () {
27     return {
28       msg: 'Welcome to Your Vue.js App'
29     }
30   },
31   mounted(){
32      var mySwiper = new Swiper ('.swiper-container', {
33     loop: true,
34     // 如果需要分頁器
35     pagination: '.swiper-pagination',
36     // 如果需要前進后退按鈕
37     nextButton: '.swiper-button-next',
38     prevButton: '.swiper-button-prev',
39     // 如果需要滾動條
40     scrollbar: '.swiper-scrollbar',
41   })        
42   }
43 }
44 </script>
45 
46 <!-- Add "scoped" attribute to limit CSS to this component only -->
47 <style scoped>
48 
49     body {
50         margin: 0;
51         padding: 0;
52     }
53     .swiper-container {
54         width: 500px;
55         height: 300px;
56         margin: 20px auto;
57     }
58    
59 
60     </style>

main.js文件代碼:


3460406315-042da1bea5daf8b9_articlex.png

常見報錯解決:

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

.babelrc文件里的插件項"plugins": ["transform-runtime"],中的transform-runtime刪掉即可邑彪;

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末瞧毙,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子寄症,更是在濱河造成了極大的恐慌宙彪,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,348評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件有巧,死亡現(xiàn)場離奇詭異释漆,居然都是意外死亡,警方通過查閱死者的電腦和手機篮迎,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,122評論 2 385
  • 文/潘曉璐 我一進店門灵汪,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人柑潦,你說我怎么就攤上這事享言。” “怎么了渗鬼?”我有些...
    開封第一講書人閱讀 156,936評論 0 347
  • 文/不壞的土叔 我叫張陵览露,是天一觀的道長。 經(jīng)常有香客問我譬胎,道長差牛,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,427評論 1 283
  • 正文 為了忘掉前任堰乔,我火速辦了婚禮偏化,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘镐侯。我一直安慰自己侦讨,他們只是感情好,可當我...
    茶點故事閱讀 65,467評論 6 385
  • 文/花漫 我一把揭開白布苟翻。 她就那樣靜靜地躺著韵卤,像睡著了一般。 火紅的嫁衣襯著肌膚如雪崇猫。 梳的紋絲不亂的頭發(fā)上沈条,一...
    開封第一講書人閱讀 49,785評論 1 290
  • 那天,我揣著相機與錄音诅炉,去河邊找鬼蜡歹。 笑死屋厘,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的月而。 我是一名探鬼主播擅这,決...
    沈念sama閱讀 38,931評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼景鼠!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起痹扇,我...
    開封第一講書人閱讀 37,696評論 0 266
  • 序言:老撾萬榮一對情侶失蹤铛漓,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后鲫构,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體浓恶,經(jīng)...
    沈念sama閱讀 44,141評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,483評論 2 327
  • 正文 我和宋清朗相戀三年结笨,在試婚紗的時候發(fā)現(xiàn)自己被綠了包晰。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,625評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡炕吸,死狀恐怖伐憾,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情赫模,我是刑警寧澤树肃,帶...
    沈念sama閱讀 34,291評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站瀑罗,受9級特大地震影響胸嘴,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜斩祭,卻給世界環(huán)境...
    茶點故事閱讀 39,892評論 3 312
  • 文/蒙蒙 一劣像、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧摧玫,春花似錦耳奕、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至颅停,卻和暖如春谓晌,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背癞揉。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工纸肉, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留溺欧,地道東北人。 一個月前我還...
    沈念sama閱讀 46,324評論 2 360
  • 正文 我出身青樓柏肪,卻偏偏與公主長得像姐刁,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子烦味,可洞房花燭夜當晚...
    茶點故事閱讀 43,492評論 2 348