vue-cli webpackはswiperに導入されます。

1：ダウンロードはswiperのjsファイルとcssファイルが必要です。

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

2：swiper関連のjsとcssをダウンロードして、jsはstaticディレクトリの下に置いて、cssはastesディレクトリの下に置きます。
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構造

    
    <div class="home_banner">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
              <img src="./../../assets/img/[email protected]">
          div>
          <div class="swiper-slide">
              <img src="./../../assets/img/[email protected]">
          div>
          <div class="swiper-slide">
              <img src="./../../assets/img/[email protected]">
          div>
        div>
      div>
    div>
    

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
    });
  }