安装 插件

$ npm install vue-awesome-swiper --save 

---毫不犹豫的使用了--save

安装过程如果比较慢 可以使用淘宝镜像

---安装好了之后先看看package.json是否更新

      "dependencies": {
        "axios": "^0.18.0",
        "vue": "^2.5.2",
        "vue-awesome-swiper": "^3.1.3",
        "vue-router": "^3.0.1"
      },     

安装完成之后我们进入main.js

    import Vue from 'vue'
    import App from './App'
    import router from './router'


    Vue.config.productionTip = false

    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })

引入插件

    import  vueSwiper from 'vue-awesome-swiper'//根据package.json中的value导入
    import 'swiper/dist/css/swiper.css'//引入样式
    Vue.config.productionTip = false

    Vue.use(vueSwiper)

首先我们看看基本结构

 <swiper>
        <swiper-slide class="swiper-slide">
          
        </swiper-slide>
 </swiper>

这个应该很好理解 会swiper的小伙伴一下就懂了

既然是vue-swiper 我们使用vue写法 就不一个个复制了 直接上v-for

      data(){
        return {
            slide:[1,2,3,4,5] //定义一个小数组用来区分
        }
      }

循环一下先

    <div>
      <swiper>
          <swiper-slide class="swiper-slide" v-for="(item,index) in slide" :key="index">
                slide{{item}}
          </swiper-slide>
      </swiper>
    </div>

效果已经出来了 这边就不放效果图了 放段丑丑的css 方便小伙伴测试

    .swiper-slide{
      height: 450px;
      background:cadetblue;
      font-size: 50px;
      text-align: center;
      line-height: 450px;    
    }

如果你也成功了 恭喜你 你已经入门咯

这边补充一下一个小bug

我们都知道vue中引入插件分局部跟全局,swiper这种用到的组件不是很多的建议局部引入

组件中引入swiper

    import 'swiper/dist/css/swiper.css'
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
        components: {
                swiper,
                swiperSlide
        }
    }

这边一定要在components中注册一下哦