在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
    }
},