vue插件Vue-Awesome-Swiper使用问题

Question

npm install vue-awesome-swiper --save

Vue-Awesome-Swiper按照官网提示的按照方式安装成功了

可是在main.js引用的时候就是提示找不到该模块是什么原因啊

Answer 1

跟我一样都遇到这个问题的童鞋，可以考虑直接直接引用swiper

npm install swiper --save-dev

官网API https://www.swiper.com.cn/api...

<script>
import Swiper from 'swiper';
export default {
  name: "home",
  data() {
    return {
      msg: "这是首页",
    };
  },
  mounted(){
     new Swiper ('.swiper-container', {
    loop: true,
    // 如果需要分页器
   pagination: {
      el: '.swiper-pagination',
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    // 如果需要滚动条
    //   scrollbar: {
    //   el: '.swiper-scrollbar',
    // },
  })        
  }
};
</script>

参考：vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

Answer 2

楼主，你好！这个影响你正常使用吗？如果不影响，应该是和你的 vscode 配置有关系吧。

Answer 3

你好，我问一下，您的那个vue轮播图插件模块找不到问题解决了吗，我这里也出现了这个问题，能给我看一下吗，谢谢，qq 1018715564

Answer 4

import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

Data里配置：

components: {
        swiper,
        swiperSlide
    },
swiperOption: {
                direction: 'vertical',
                slidesPerView: 1,
                spaceBetween: 0,
                mousewheel: true,
                autoHeight: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: false,
                    type : 'fraction'
                },
                effect:'slide',
                speed:500,
                longSwipesRatio:0.3,
                resistanceRatio:0.1
            }

computed方法：

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

模板代码：

<swiper :options="swiperOption" class="swiper-box" ref="pageSwiper">
                <swiper-slide class="swiper-item">
                    
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination" v-show="true"></div>
            </swiper>