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

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

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

---

轉載文章請註明出處！

---

若是隻是要使用輪播效果的話能夠參考下一些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裏（能夠把官網例子的啓動 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；（加了挺頭疼的，總是報錯，可是對本身的代碼規範性也是有很大的幫助的）

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裏執行；

<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.好了問題解決；

二：全局使用：

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文件代碼：

常見報錯解決：

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

.babelrc文件裏的插件項"plugins": ["transform-runtime"],中的transform-runtime刪掉便可；