在nuxt中使用swiper 整理和报错解决

我就是我 2023-01-13 01:58 27阅读 0赞

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