vue引入swiper插件

 

步骤一：安装vue，
           $ npm install vue
步骤二：创建vue项目
          # 全局安装 vue-cli
          $ npm install -g vue-cli
          $ cd my-project
          $ npm install
          $ npm run dev

上面这些就是安装好vue项目，最主要的就是下面的步骤

 

步骤三：下载好swiper相关的js和css，js放在static目录下，css放在assets目录下。

步骤四：
安装runtime：
终端命令：npm install babel-runtime

步骤五：
修改.eslintrc.js文件如下：
// http://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: 'standard',
  // required to lint *.vue files
  plugins: [
    'html'
  ],
  // add your custom rules here
  'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  },
  'globals': {
    "Swiper": true
  }   //这个地方是新加入的   全局注入
}

步骤六：在自己的vue文件中添加轮播图代码

<div v-on:mouseenter="stopPlay()" v-on:mouseleave="play()" class="swiper-container gallery-top swiper-container-horizontal">
    <div class="swiper-wrapper">
       <div v-for="value in lbt" class="swiper-slide swiper-slide-next" style="width: 100%; margin-right: 10px;" v-bind:style="{backgroundImage: 'url(' + value.imgs + ')'}"></div>
    </div>
    <div class="swiper-button-next swiper-button-white"></div>
    <div class="swiper-button-prev swiper-button-white swiper-button-disabled"></div>
</div>
<div class="swiper-container gallery-thumbs swiper-container-horizontal">
    <div class="swiper-wrapper">
        <div v-for="value in lbt" class="swiper-slide swiper-slide-next" style="margin-right: 10px;" v-bind:style="{backgroundImage: 'url(' + value.imgs + ')'}"></div>
    </div>
</div>

import Swiper from '../../static/swiper-3.4.2.min.js'
let galleryTop
let galleryThumbs
export default {
  name: 'main',
  data () {
    return {
      lbt: [
        {
          'imgs': '../static/product/lbt1.jpg'
        }, {
          'imgs': '../static/product/lbt2.jpg'
        }, {
          'imgs': '../static/product/lbt3.jpg'
        }
      ]
    }
  },
  mounted () {
    this.lunbo()
  },
  methods: {
    lunbo () {
      galleryTop = new Swiper('.gallery-top', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 10,
        grabCursor: true,
        initialSlide: 1,
        autoplayDisableOnInteraction: false
      })
      galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 10,
        autoplay: 4000,
        initialSlide: 1,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true,
        autoplayDisableOnInteraction: false,
        grabCursor: true
      })
      galleryTop.params.control = galleryThumbs
      galleryThumbs.params.control = galleryTop
    },
    stopPlay () {
      galleryTop.stopAutoplay()
      galleryThumbs.stopAutoplay()
    },
    play () {
      galleryTop.startAutoplay()
      galleryThumbs.startAutoplay()
    }
  }
}

@import url("../assets/swiper-3.4.2.min.css");
.gallery-top{
    height:32rem;
    width:100%;
}
.gallery-thumbs{
    height:20%;
    box-sizing:border-box;
    padding:10px 0;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
}
.gallery-thumbs .swiper-slide{
    width:30%;
    height:6rem;
    opacity:0.3;
}
.gallery-thumbs .swiper-slide-active{
    opacity:1;
}
.swiper-slide{
  background-size: 100% 160%;
  -webkit-background-size: 100% 160%;
}

这里还有一个很重要的问题，在模板里面设置背景图，写法应该是

v-bind:style="{backgroundImage: 'url(' + value.imgs + ')'}"