在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文件的使用

使用过程中可能会遇到的问题 <由于swiper有原生版本和vue封装版本差别 有 swiper6或者是swiper543以下的各个版本的使用差别 导致有坑>

**可能的问题一：我想使用new Swiper 但是报错了 要如何用呢，还有些写法是不需要用new swiper的差别是什么呢 **

    

        

            
slider1
            
slider2
            
slider3
        
    
    import Swiper from 'swiper' 
    mounted() {
        // 兼容原先旧的原生插件 使用的是new Swiper 需要在指定页面中import Swiper from 'swiper'  来使用
        var mySwiper = new Swiper('.swiper-container', {
            autoplay: true,//可选选项，自动滑动
        })
    }

分割线********************************************************分割线


    
        I'm Slide 1
        I'm Slide 2
        I'm Slide 3
        

        

        

    
    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

var mySwiper = new Swiper('.swiper-container',{
    autoplay : 5000,//可选选项，自动滑动
})

vue默认使用的是swiper6的初始化    环境是vue 使用

computed: {
    swiper() {
    return this.$refs.mySwiper.swiper
    }
},