vue3项目脚手架如何使用swiper， ‘vue-awesome-swiper‘报错解决（简单示例）

目录

前言

 使用方法

效果图

1.下载swiper

2. 写入需要的页面

3.在对应页面引入组件

4.推荐页完整代码

---

前言

        Vue3和Vue2在使用swiper时是有差别的，Vue3引入swiper需要注意Vu3的版本和swiper的版本，如果不匹配通常会报错

如下：当引用版本过高的swiper时报错（版本不相符）

解决方案是：引用版本较低的swiper

 使用方法

效果图

1.下载swiper

2. 写入需要的页面

<div class="swiper">
  <swiper :modules="modules" :navigation="false" :loop="true" :pagination="{ clickable: true }">
  <!-- modules为导入的模块，绑定导入的模块导航模块和分页模块，loop实现轮播图循环模式 -->
  <swiper-slide>
    <img src="../assets/2.jpeg">
  </swiper-slide>
  <swiper-slide>
    <img src="../assets/3.jpeg">

  </swiper-slide>
  <swiper-slide>
    <img src="../assets/4k3.jpg">
  </swiper-slide>

</swiper>


    </div>

3.在对应页面引入组件

//引入组件
import { Swiper, SwiperSlide } from 'swiper/vue';
//引入模块 
import { Pagination,Navigation } from 'swiper/modules';
//引入样式, 
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import 'swiper/css';
export default {
    name: '1130127Recommend',
    components: {
    Swiper,
    SwiperSlide,
  },
    data() {
        return {
            modules: [Navigation, Pagination]
        };
    },

4.推荐页完整代码

<template>
  <div class="swiper">
  <swiper :modules="modules" :navigation="false" :loop="true" :pagination="{ clickable: true }">
  <!-- modules为导入的模块，绑定导入的模块导航模块和分页模块，loop实现轮播图循环模式 -->
  <swiper-slide>
    <img src="../assets/2.jpeg">
  </swiper-slide>
  <swiper-slide>
    <img src="../assets/3.jpeg">

  </swiper-slide>
  <swiper-slide>
    <img src="../assets/4k3.jpg">
  </swiper-slide>

</swiper>


    </div>
    <div class="wp">
        <h2>热播连载</h2>
        <ul class="list">
            <li>
                <img src="../assets/2.jpeg" alt="">
                <h3>三国演义</h3>
                <p>阿阿斯顿哈萨克老大大</p>
            </li>
            <li>
                <img src="../assets/3.jpeg" alt="">
                <h3>水浒传</h3>
                <p>士别三日当刮目相待</p>
            </li>
            <li>
                <img src="../assets/4k3.jpg" alt="">
                <h3>西游记</h3>
                <p>妖怪哪里跑</p>
            </li><li>
                <img src="../assets/wallhaven-859vdk_1920x1080.png" alt="">
                <h3>红楼梦</h3>
                <p>红楼梦</p>
            </li>
        </ul>
    </div>

</template>

<script>
//引入组件
import { Swiper, SwiperSlide } from 'swiper/vue';
//引入模块 
import { Pagination,Navigation } from 'swiper/modules';
//引入样式, 
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import 'swiper/css';
export default {
    name: '1130127Recommend',
    components: {
    Swiper,
    SwiperSlide,
  },
    data() {
        return {
            modules: [Navigation, Pagination]
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
    modules:{
        
    }
};
</script>

<style lang="scss" scoped>
* {
    margin: 0;padding: 0;
}
.swiper {
    width: 75rem;
    height: 34.4rem;
    img{
        width: 100%;
        height: 100%;
    }
}
.wp {
    width: 100%;
    background-color: #f6f6f6;
    margin:0 auto ;
    h2 {
        width: 71rem;
        height: 8.6rem;
        margin: 0 2rem;
        line-height: 8.6rem;
        font-size: 3.4rem;
        font-weight: normal;
    }
    .list {
        width: 71rem;
        margin: 0 auto ;
        background-color: #fff;
        list-style-type: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li {
            width: 34.8rem;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            img {
                width: 34.8rem;
                height: 26.2rem;
                margin-bottom: 1.5rem;
            }
            h3 {
                width: 34.8rem;
                height: 2.8rem;
                line-height: 2.8rem;
                margin-bottom: 1.2rem;
                font-size: 2.8rem;
                color: #2D2D2D;
            }
            p {
                width: 34.8rem;
                height: 2.4rem;
                line-height: 2.4rem;
                font-size: 2.4rem;
                margin-bottom: 2.8rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        
        }
    }
}

</style>