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>