vue引入swiper

第一步，在控制台下载依赖包，下载成功后，会在 package.json 文件中多出一个   "swiper": "^3.4.2",   package.json 文件在根目录下

cnpm i swiper@3.4.2 -S

第二步，在 main.js 引入css文件，main.js 文件在 src 目录下

import 'swiper/dist/css/swiper.css';

第三步，在页面中的 script 标签中引入 swiper

import Swiper from 'swiper';

第四步，在 mounted 引入所需要的功能

  mounted(){
    new Swiper ('.swiper-container', {
        loop: true,
        // 如果需要分页器
        pagination: '.swiper-pagination',
        // 如果需要前进后退按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        // 如果需要滚动条
        scrollbar: '.swiper-scrollbar',
    })
  },

第五步，在 template 组件中添加 html 标签

  <template>
      <div class="swiper-container">
          <div class="swiper-wrapper">
              <div class="swiper-slide">Slide 1</div>
              <div class="swiper-slide">Slide 2</div>
              <div class="swiper-slide">Slide 3</div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
          <!-- 如果需要滚动条 -->
          <div class="swiper-scrollbar"></div>
      </div>
  </template>