vue-cli webpack 引入swiper的操作方法

 更新时间:2018年09月15日 10:11:30   作者:爱lv行  
今天小编就为大家分享一篇vue-cli webpack 引入swiper的操作方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

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

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

3:安装runtime:

npm install babel-runtime 

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

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

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

import Swiper from '@/../static/js/swiper.min.js';

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

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

7: html 结构

 <!-- Swiper -->
 <div class="home_banner">
  <div class="swiper-container">
  <div class="swiper-wrapper">
   <div class="swiper-slide">
    <img src="./../../assets/img/sec_3_top_2@2x.jpg">
   </div>
   <div class="swiper-slide">
    <img src="./../../assets/img/sec_3_top_2@2x.jpg">
   </div>
   <div class="swiper-slide">
    <img src="./../../assets/img/sec_3_top_2@2x.jpg">
   </div>
  </div>
  </div>
 </div>
 <!-- Swiper end -->

8:vue js

 mounted() {
 var mySwiper = new Swiper('.home_banner .swiper-container', {
  direction: 'horizontal',
  loop: true
 });
 // Swiper 推荐课程
 var swiper2 = new Swiper('.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-cli webpack 引入swiper的操作方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue elementUI实现树形结构表格与懒加载

    Vue elementUI实现树形结构表格与懒加载

    这篇文章主要介绍了通过Vue和elementUI实现树形结构表格与懒加载,文中的示例代码讲解详细,感兴趣的小伙伴快来跟随小编一起学习一下吧
    2022-01-01
  • vue中v-for指令完成列表渲染

    vue中v-for指令完成列表渲染

    这篇文章主要给大家分享的是vue中v-for指令完成列表渲染,下面文化章就围绕中v-for的相关资料在Vue中列表渲染做个简单总结和使用演示,需要的朋友可以参考一下,希望对大家有所帮助
    2021-11-11
  • vue3中Vant的使用及说明

    vue3中Vant的使用及说明

    这篇文章主要介绍了vue3中Vant的使用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue的ssr服务端渲染示例详解

    vue的ssr服务端渲染示例详解

    这篇文章主要给大家介绍了关于vue的ssr服务端渲染的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • nuxt实现封装axios并且获取token

    nuxt实现封装axios并且获取token

    这篇文章主要介绍了nuxt实现封装axios并且获取token,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue3中addEventListener的用法详解

    vue3中addEventListener的用法详解

    vue3中定义全局指令时,往往会碰到一个问题:事件无法解绑,为什么会这样,因为通常在指令的mounted钩子中绑定事件,事件处理函数也定义在mounted中,本文讲给大家讲讲vue3中addEventListener的妙用,需要的朋友可以参考下
    2023-08-08
  • Vue常用传值方式、父传子、子传父及非父子实例分析

    Vue常用传值方式、父传子、子传父及非父子实例分析

    这篇文章主要介绍了Vue常用传值方式、父传子、子传父及非父子,结合实例形式分析了vue.js常见的传值方式及相关操作注意事项,需要的朋友可以参考下
    2020-02-02
  • vue中electron框架自定义外部配置文件的配置与读取办法

    vue中electron框架自定义外部配置文件的配置与读取办法

    使用Electron开发本地跨平台的本地程序时,有时需要添加一些程序的配置文件,下面这篇文章主要给大家介绍了关于vue中electron框架自定义外部配置文件的配置与读取的相关资料,需要的朋友可以参考下
    2023-12-12
  • Vue组件实现卡片动画倒计时示例详解

    Vue组件实现卡片动画倒计时示例详解

    这篇文章主要介绍了Vue组件实现卡片动画倒计时示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Vue组件之间的通信方式详细讲解

    Vue组件之间的通信方式详细讲解

    对于vue来说,组件之间的消息传递是非常重要的,用vue可以是要组件复用的,而组件实例的作用域是相互独立,这意味着不同组件之间的数据无法互相引用,一般来说,组件之间可以有几种关系,下面是我对组件之间消息传递的常用方式的总结
    2022-08-08

最新评论