在nuxt中使用swiper 整理和報錯解決

在nuxt中使用swiper

1、安裝npm install swiper vue-awesome-swiper --save      （swiper是必須要  vue-awesome-swiper是為了使用vue的寫法 ）

2、在plugins目錄下建立檔案swiper.js
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// import 'swiper/css/swiper.css'; //使用的是swiper版本号為6.0以下的
import 'swiper/swiper-bundle.css'; //swiper版本号為6.0以上的的css的引入方式
Vue.use(VueAwesomeSwiper)



3、nuxt.config.js中添加建立檔案的引用
plugins: [
    '@/plugins/swiper',
    { src: '~/plugins/swiper.js', ssr: false },
  ],


4、test.vue檔案的使用
<template>
    <section class="">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">slider1</div>
                <div class="swiper-slide">slider2</div>
                <div class="swiper-slide">slider3</div>
            </div>
        </div>

    </section>
</template>

<script>
import Swiper from 'swiper' 
export default {
    name: '',
    components: {},
    data() {
       return {}
    },
    async asyncData(app) {
    },
    mounted() {
        var mySwiper = new Swiper('.swiper-container', {
            autoplay: true,//可選選項，自動滑動
        })
    },
}
</script>
           

使用過程中可能會遇到的問題 <由于swiper有原生版本和vue封裝版本差别 有 swiper6或者是swiper543以下的各個版本的使用差别 導緻有坑>

**可能的問題一：我想使用new Swiper 但是報錯了 要如何用呢，還有些寫法是不需要用new swiper的差别是什麼呢 **

<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">slider1</div>
            <div class="swiper-slide">slider2</div>
            <div class="swiper-slide">slider3</div>
        </div>
    </div>
    import Swiper from 'swiper' 
    mounted() {
        // 相容原先舊的原生插件 使用的是new Swiper 需要在指定頁面中import Swiper from 'swiper'  來使用
        var mySwiper = new Swiper('.swiper-container', {
            autoplay: true,//可選選項，自動滑動
        })
    }

分割線********************************************************分割線


    <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide>I'm Slide 1</swiper-slide>
        <swiper-slide>I'm Slide 2</swiper-slide>
        <swiper-slide>I'm Slide 3</swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
    data() {
        return {
            swiperOption: {
                autoplay: true,//可選選項，自動滑動
            }
        }
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper.swiper
        }
    },
    mounted() {
        // 使用vue插件封裝過後文法vue-awesome-swiper，使用的是swiper6  則是使用swiper的文法寫
        console.log("直接擷取swiper", this.swiper);
    }
           

**可能的問題二： import 'swiper/css/swiper.css';報錯了 如何解決**

這是由于package.json裡的新安裝的"swiper": "^6.5.6", 版本号比較高， <注意自己版本和網上方法裡版本差異>
    import 'swiper/css/swiper.css'; //使用的是swiper版本号為6.0以下的
    import 'swiper/swiper-bundle.css'; //使用的是swiper版本号為6.0以上  
           

**拓展：概括下版本的差别**

swiper2或3 4 5的初始化     環境是 jq或js

<div class="swiper-container"></div>

var mySwiper = new Swiper('.swiper-container',{

    autoplay : 5000,//可選選項，自動滑動

})

vue預設使用的是swiper6的初始化    環境是vue 使用

<swiper ref="mySwiper"></swiper>

computed: {

    swiper() {

    return this.$refs.mySwiper.swiper

    }

},