当我们在vue项目中使用轮播图插件swiper时，可能不知道如何引入，或者引入中总有一些坑，在这里，我介绍一下我的经验。
步骤一：安装vue，
             # 最新稳定版本
            $ npm install vue
           # 最新稳定 CSP 兼容版本
           $ npm install vue@csp
         如果你已经安装了vue，可以忽略。

步骤二：创建vue项目
     # 全局安装 vue-cli
    $ npm install -g vue-cli
     # 创建一个基于 "webpack" 模板的新项目
    $ vue init webpack my-project
    # 安装依赖，走你
    $ cd my-project
   $ npm install
   $ npm run dev

步骤三：下载swiper相关的js，然后导入到static文件夹下，swiperjs网址如下：https://pan.baidu.com/s/1hrmDpcw 和 https://pan.baidu.com/s/1Ixthk
效果如下图：

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

步骤五：
修改.eslintrc.js文件如下：

步骤六：在App.vue中添加轮播图代码，注意，这只是app.vue中的代码，需要复制粘贴到app.vue中，不能看出演示结果。

[HTML] 纯文本查看 复制代码

<template>
  <div id="app">
    <div class="swiper-container">
      <div class="swiper-wrapper">

        <div class="swiper-slide">
          <img class="imgload" src="http://mooc.inxedu.com/images/upload/image/20151026/1446026886181.jpg" alt="首页banner图片01">
        </div>
        <div class="swiper-slide">
          <img class="imgload" src="http://mooc.inxedu.com/images/upload/image/20151026/1446026905031.jpg" alt="首页banner图片02">
        </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>
  </div>
</template>

<script>
 import Swiper from './../static/swiper-3.3.1.min.js'
 require('./../static/swiper-3.3.1.min.css')

 export default {
   components: {},
   mounted () {
     console.log('挂载好了')
     var mySwiper = new Swiper('.swiper-container', {
       direction: 'horizontal',
       loop: true,
       pagination: '.swiper-pagination',
       nextButton: '.swiper-button-next',
       prevButton: '.swiper-button-prev'
     })
     console.log(mySwiper)
   }
 }
</script>

<style>
html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#app {
  color: #2c3e50;
  margin-top: -100px;
  max-width: 600px;
  font-family: Source Sans Pro, Helvetica, sans-serif;
  text-align: center;
}

#app a {
  color: #42b983;
  text-decoration: none;
}

.logo {
  width: 100px;
  height: 100px
}
  .swiper-container{
    width: 500px;
    height: 360px;
  }

</style>

当我们在vue项目中使用轮播图插件swiper时，可能不知道如何引入，或者引入中总有一些坑，在这里，我介绍一下我的经验。
步骤一：安装vue，
             # 最新稳定版本
            $ npm install vue
           # 最新稳定 CSP 兼容版本
           $ npm install vue@csp
         如果你已经安装了vue，可以忽略。

步骤二：创建vue项目
     # 全局安装 vue-cli
    $ npm install -g vue-cli
     # 创建一个基于 "webpack" 模板的新项目
    $ vue init webpack my-project
    # 安装依赖，走你
    $ cd my-project
   $ npm install
   $ npm run dev

步骤三：下载swiper相关的js，然后导入到static文件夹下，swiperjs网址如下：https://pan.baidu.com/s/1hrmDpcw 和 https://pan.baidu.com/s/1Ixthk
效果如下图：

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

步骤五：
修改.eslintrc.js文件如下：

步骤六：在App.vue中添加轮播图代码，注意，这只是app.vue中的代码，需要复制粘贴到app.vue中，不能看出演示结果。

[HTML] 纯文本查看 复制代码

<template>
  <div id="app">
    <div class="swiper-container">
      <div class="swiper-wrapper">

        <div class="swiper-slide">
          <img class="imgload" src="http://mooc.inxedu.com/images/upload/image/20151026/1446026886181.jpg" alt="首页banner图片01">
        </div>
        <div class="swiper-slide">
          <img class="imgload" src="http://mooc.inxedu.com/images/upload/image/20151026/1446026905031.jpg" alt="首页banner图片02">
        </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>
  </div>
</template>

<script>
 import Swiper from './../static/swiper-3.3.1.min.js'
 require('./../static/swiper-3.3.1.min.css')

 export default {
   components: {},
   mounted () {
     console.log('挂载好了')
     var mySwiper = new Swiper('.swiper-container', {
       direction: 'horizontal',
       loop: true,
       pagination: '.swiper-pagination',
       nextButton: '.swiper-button-next',
       prevButton: '.swiper-button-prev'
     })
     console.log(mySwiper)
   }
 }
</script>

<style>
html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#app {
  color: #2c3e50;
  margin-top: -100px;
  max-width: 600px;
  font-family: Source Sans Pro, Helvetica, sans-serif;
  text-align: center;
}

#app a {
  color: #42b983;
  text-decoration: none;
}

.logo {
  width: 100px;
  height: 100px
}
  .swiper-container{
    width: 500px;
    height: 360px;
  }

</style>