这是我在做仿小米商城项目中遇到的bug,刚开始直接在vue ui中的依赖中直接下载的vue-awesome-swiper,会直接给我下载最新的版本,报错,于是就去 swiper 官方文档按照步骤下载,结果安装之后也是一路报错啊,卸了好几次 node_moduls,经多次查找方法,最终总结如下:
1、不能按照官方文档里安装 npm i swiper ,采用这个方法安装的会是最新的版本,导致安装失败
解决方法:安装 vue-awesome-swiper@3.1.3 成功
2、引入 swiper插件错误而报错:
错误引入:
import { Swiper, SwiperSlide } from "swiper/vue";
于是出现以下错误提示:
解决方法:正确引入方式是(采用解构赋值的方式按需引入)
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
3、引入swiper.css文件 报错
错误引入:
import "swiper.css";
报错,找不到这个文件:
解决方法:
import "swiper/dist/css/swiper.css";
问题成功解决
4、由于下载的是 vue-awesome-swiper": "^3.1.3"版本,然后引用时用成了 "swiper",
还会报这样的错误:
解决方法:
首先,检查一下自己安装的哪个版本的swiper
如果下的是:"vue-awesome-swiper": "^3.1.3",
那么就引入:import { Swiper, SwiperSlide } from "vue-awesome-swiper";
5、报错:TypeError: Cannot set property 'params' of undefined"
解决办法
@3.x 版本的 ---- 引入模块时使用小写
import { swiper, swiperSlide } from “vue-awesome-swiper”;
@4.x 版本的 ---- 引入模块时使用大写
import { Swiper, SwiperSlide } from “vue-awesome-swiper”;
我是3.1.3版本的改成小写的好使了
最后附上我完成的memo
<template>
<div class="index">
<div class="container">
<!-- 轮播 start -->
<div class="swiper-box">
<swiper :options="swiperOption">
<swiper-slide v-for="item in sliderList" :key="item.id">
<a :href="'/#/product/' + item.id">
<img :src="item.img" />
</a>
</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>
</div>
<!-- 轮播 end -->
<!-- 广告位 start-->
<div class="ads-box"></div>
<!-- 广告位 end-->
<!-- 横幅广告 start-->
<div class="banner"></div>
<!-- 横幅广告 end-->
<!-- 商品列表 start -->
<div class="product-box"></div>
<!-- 商品列表 start -->
</div>
<service-bar></service-bar>
</div>
</template>
<script>
import ServiceBar from "../components/ServiceBar.vue";
// 导入轮播图插件
import { swiper, swiperSlide } from "vue-awesome-swiper";
// // 其实当前目录下没有,但是它自己会去node module模块里面查找
import "swiper/dist/css/swiper.css";
export default {
name: "index",
data() {
return {
// 轮播图的选项
swiperOption: {
// 设置循环,自动播放
autoplay: true,
// 设置循环点击(否则当点到最后一张就点不动了)
loop: true,
// 设置动画
effect: "cube",
// 设置动画的一些参数
cubeEffect: {
slideShadows: true,
shadow: true,
shadowOffset: 100,
shadowScale: 0.6,
},
// 指定分页器是哪一个
pagination: {
el: ".swiper-pagination",
clickable: true,
},
// 设置前进后退的按钮(可点击跳转)
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
},
sliderList: [
{
id: "42",
img: require("../../public/imgs/slider/slide-1.jpg"),
},
{
id: "45",
img: require("../../public/imgs/slider/slide-2.jpg"),
},
{
id: "46",
img: require("../../public/imgs/slider/slide-3.jpg"),
},
],
};
},
components: {
swiper,
swiperSlide,
ServiceBar,
},
};
</script>
<style lang="scss" scoped>
.index {
.swiper-box {
.swiper-container {
height: 451px;
img {
width: 100%;
}
}
}
}
</style>
了解更多swiper功能,可查看swiper中文网官方文档: