vue-awesome-swiper已经安装了,但是依然又报错。
Failed to compile. ./node_modules/vue-awesome-swiper/dist/vue-awesome-swiper.js Module not found: Error: Can’t resolve ‘swiper’ in ‘E:\xiaomishopping-vue\mimall\node_modules\vue-awesome-swiper\dist’
这个时候就要去看看npm官网里面的具体操作步骤了。前往vue-awesome-swiper
一、需要install一下依赖
npm install swiper vue-awesome-swiper --save-dev
二、main.js进行引入
import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // import style import 'swiper/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default options with global component } */)
三、模块引入
<template> <swiper ref="mySwiper" :options="swiperOptions"> <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> <swiper-slide>Slide 4</swiper-slide> <swiper-slide>Slide 5</swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> </template> <script> export default { name: 'carrousel', data() { return { swiperOptions: { pagination: { el: '.swiper-pagination' }, // Some Swiper option/callback... } } }, computed: { swiper() { return this.$refs.mySwiper.$swiper } }, mounted() { console.log('Current Swiper instance object', this.swiper) this.swiper.slideTo(3, 1000, false) } } </script>