Vue项目中使用swiper插件

1还是老样子,先下载安装一波

 npm install swiper --save


 2.使用前,先自己在本地封装一下,方便后期进行维护和复用

Vue项目中使用swiper插件_第1张图片


3.把一些公共的属性可以放在里面,进行配置







4.在页面处引用我们封装好的swiper即可







5.到这一步,发现配置完全没有生效,完美  (历经半个小时的艰难险阻,发现还需要配置一个东西)
 

把配置传递过去后,需要导入对应的包,并且Vue来使用一下      (在最初的位置,封装Swiper的那个位置)

Vue项目中使用swiper插件_第2张图片

  //这里需要把对应的参数导入一下
  import { Pagination,Autoplay} from 'swiper';
  //使用一下
  Swiper.use([Pagination,Autoplay]);

6.好像写的有点乱,不过就是这样,自己琢磨一下即可

 

 

 

 

 

你可能感兴趣的:(vue,vue.js)