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部分：

<template>
  <div class="hello">
    <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>
  </div>
</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部分：

 

<style scoped>
@import'../assets/css/swiper.min.css';
    body {
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 500px;
        height: 300px;
        margin: 20px auto;
    }
   

    </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刪掉即可；

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": [],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["istanbul"]
    }
  }
}

5.好了問題解決；

二：全局使用：

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

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

helloworld.vue代碼：

<template>
  <div class="hello">
    <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>
  </div>
</template>

<script>

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>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

    body {
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 500px;
        height: 300px;
        margin: 20px auto;
    }
   

    </style>

main.js文件代碼：

 常見報錯解決：

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

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