2回答

河畔一角

2020-03-27

请安装swiper：5.3.6版本，目前6.0版本使用有问题。

插件安装：

cnpm install swiper@^5.3.6 vue-awesome-swiper@4.0.4 --save

或者使用yarn add swiper@^5.3.6 vue-awesome-swiper@4.0.4 --save

需要同时安装swiper和vue-awesome-swiper两个插件。

用法：

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'

import 'swiper/css/swiper.css' 

export default {  

    components: {    Swiper,    SwiperSlide  }

}

如果报错的话，可能需要添加一个指令：

export default {  

    components: {    Swiper,    SwiperSlide  },

    directives: {

          swiper: directive

    }

}

Vue3大家可以采用这种写法：https://swiperjs.com/vue

npm i swiper 或者 yarn add swiper 

<template>
  <swiper
    :slides-per-view="3"
    :space-between="50"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    ...  </swiper></template><script>
  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
      };
    },
  };</script>

8

4

河畔一角

回复

慕移动9059126

不用卸载，从新安装一下就行了，--save加上去

2022-04-21

共4条回复

慕标1076797

2021-03-25

按照老师的装上了  还是报错： ERROR  Failed to compile with 1 errors                                                                                                                                   11:41:59 ├F10: AM┤

This dependency was not found:

* -!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!./swiper/css/swiper.css in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader-v16/dist/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/pages/index.vue?vue&type=style&index=0&id=57509004&lang=scss

2

0