swiper引入报错了，怎么搞？

Question

官网现在swiper的版本是4.04了，我按官网方式去引，图片不行啊

Answer 1

河畔一角 2020-03-27 10:57:29

请安装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>

• 慕移动9059126 #1

  老师，分开安装的话，是不是每一个后面都得加上    --save-dev  ？还是不用加，我已经分开安完了，没有加 
    --save-dev 需要加的话，现在是怎么加，还是说只能都卸载然后重新安装吗？

• 河畔一角 回复 慕移动9059126 #2

  --save加一下

• 慕移动9059126 回复 河畔一角 #3

  老师，是先卸载了，然后重新安装，在后面加上 --save 吗？

点开查看后面1条评论

Answer 2

慕标1076797 2021-03-25 11:45:16

按照老师的装上了  还是报错： 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