vue-cli 脚手架配置 swiper

1:下载需要 swiper 的js文件和css文件

http://www.swiper.com.cn/


2:下载好swiper相关的js和css,js放在static目录下,css放在assets目录下。

3:安装runtime:

npminstallbabel-runtime


4:修改.eslintrc.js文件如下: 最后一行添加

'globals': {"Swiper":true}//这个地方是新加入的  全局注入


5: vue模板中引入 swiper.min.js

importSwiperfrom'@/../static/js/swiper.min.js';


6: vue模板中引入 swiper-3.4.2.min.css

@importurl("../../assets/css/swiper-3.4.2.min.css");


7: html 结构


8:vue js

mounted() {varmySwiper=newSwiper('.home_banner .swiper-container', {

            direction:'horizontal',loop:true

});

varswiper2=newSwiper('.course_swiper_wrap .swiper-container', {

      slidesPerView:3,

      paginationClickable:true,      

      nextButton:'.swiper-button-next-01',

      prevButton:'.swiper-button-prev-01',

      spaceBetween:30,

      freeMode:true,loop:true

}); 

 }

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在从零学习vue之简单演练——构建单页面项目中,我对vue脚手架的架构做了一个很简单的分析。在这篇文章中,将会深入...
    小前seant阅读 3,122评论 1 7
  • 转载 :OpenDiggawesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库...
    果汁密码阅读 23,202评论 8 124
  • 班上热闹如菜市 同学一群群 独自一人坐发呆 回忆如海深 杂乱的声音 复杂的心情 欲忘了过去 却睹物思人 钟声传四方...
    泽秦阅读 270评论 1 15
  • 梦是一种欲望,想是一种行动.梦想是梦与想的结晶.
    张伟kk阅读 184评论 0 0
  • 我买了点豆豆 他买了雪糕,吃完了 你吃点香蕉就好了 晚安.
    触角_阅读 116评论 1 0