及时吐槽一下。。。vue-awesome-swiper 的使用

 

今天想要在 vue 中使用 swiper 来实现一个缩略图左右切换的效果，行，干起来吧！

 

开干：

在网上找了一段代码（养成良好的白嫖习惯：https://www.jianshu.com/p/ef47983e7d90）：

<template>
    <div class="moduleSeckill">
        <div class="seckill-header">今日秒杀</div>
        <div class="seckill-content">
            <swiper class="swiper-seckill" :not-next-tick="true" :options="swiperOption">
                <swiper-slide class="seckill-slide">
                    <a href="#">
                        <div class="goods_info">
                            <img src="../assets/logo.png" />
                            <div class="price">￥9.9</div>
                        </div>
                    </a>
                </swiper-slide>
                <swiper-slide class="seckill-slide">
                    <a href="#">
                        <div class="goods_info">
                            <img src="../assets/ocr.png" />
                            <div class="price">￥9.9</div>
                        </div>
                    </a>
                </swiper-slide>
                <swiper-slide class="seckill-slide">
                    <a href="#">
                        <div class="goods_info">
                            <img src="../assets/spd.png" />
                            <div class="price">￥9.9</div>
                        </div>
                    </a>
                </swiper-slide>
                <swiper-slide class="seckill-slide">
                    <a href="#">
                        <div class="goods_info">
                            <img src="../assets/controller.png" />
                            <div class="price">￥9.9</div>
                        </div>
                    </a>
                </swiper-slide>

                <swiper-slide class="seckill-slide">
                    <a href="#">
                        <div class="goods_info">
                            <img src="../assets/controller.png" />
                            <div class="price">￥9.9</div>
                        </div>
                    </a>
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>
<script>
    // 引入swiper相关组件
    import {swiper,swiperSlide} from 'vue-awesome-swiper'
    import 'swiper/css/swiper.css'

    export default {
        data() {
            return {
                swiperOption: {
                    slidesPerView: 'auto',
                    grabCursor: true,
                    setWrapperSize: true,
                    autoHeight: true,
                    freeMode: true,
                    observer: true
                }
            }
        },
        components: {
            swiper,
            swiperSlide
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.$swiper;
            }
        },
    }
</script>
<style type="text/less" lang="less" scoped="scoped">
    .moduleSeckill {
        width: 10rem;
        height: auto;
        margin: 0 auto;
        background: #fff;
        .seckill-header {
            width: 100%;
            height: 1.066667rem;
            background: #fff;
            line-height: 1.066667rem;
            font-size: 0.48rem;
            color: #333;
            text-align: center;
            border-bottom: 2px solid #ccc;
        }
        .seckill-content {
            width: 10rem;
            background: #fff;
            height: 3.68rem;
            .swiper-seckill {
                height: 3.68rem;
                .seckill-slide {
                    width: 2.293333rem;
                    margin: 0.32rem 0.32rem 0 0.32rem;
                    float: left;
                    a {
                        display: block;
                        overflow: hidden;
                        width: 100%;
                        height: 100%;
                        .goods_info {
                            width: 2.293333rem;
                            background: #fff;
                            img {
                                width: 2.293333rem;
                                height: 2.293333rem;
                            }
                            .price {
                                width: 2.293333rem;
                                height: 0.533333rem;
                                font-size: 0.373333rem;
                                color: #FD157A;
                                line-height: 0.533333rem;
                                margin-top: 0.32rem;
                                margin-bottom: 0.24rem;
                                text-align: center;
                            }
                        }
                    }
                }
            }
        }
    }
</style>

然而：

1、首先这段的 css 样式是用 less 写的，刚开始启动的时候没有注意，所以报错了：

To install it, you can run: npm install --save !!vue-style-loader!css-loader?{"sourceMap":true}!.....

看代码 + 百度，得出结果：没有安装 less 依赖的包，于是在 terminal 中执行（注意是两个包：less 和 less-loader）：

cnpm install less less-loader --save-dev

下载成功后，又重新 run 了一下，结果还是报上面一样的错....

为什么呢？接着搜索后，无意间发现 "版本" 两个字，对呀，会不会跟版本有关系呢？

于是带着疑问，卸载了最新版本的 less-loader（6.1.12），重新安装了 @4.1.0 版本的 less-loader，结果不报这个错了！

 

2、虽然上面的那个错不报了，但是又报了下面这个错：

vue Unknown custom element: <swiper> - did you register the component correc

明明已经在 main.js 中引入了 swiper，为什么还是报错说：没有这个 swiper 组件呢？

继续找个半天无果，后来又无意间发现了 "版本" 两个字，对呀，会不会跟版本有关系呢？

于是，又重新卸载了 vue-awesome-swiper 默认安装的版本，换成了 3.1.3 版本，

重启后，果然不报错了！

 

===============================================================

对于问题2，其实要是认真看 vue-awesome-swiper 的文档的话，应该是可以找到问题所在的！