项目中使用vue-awesome-swiper

Swiper常用于移动端网站的内容触摸滑动
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，以及PC端网站。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

打开 surmon-china/vue-awesome-swiper，参考安装使用教程。

项目目录

win7下，cmd终端，进入根目录，cnpm install vue-awesome-swiper@2.6.7 --save

我的网速慢，使用cnpm代替npm，@2.6.7表示安装的版本，--save本地测试还是项目上线，都会用到vue-awesome-swiper@2.6.7

安装完成后，在项目的node_modules目录下会找到

全局挂载：

import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'// require stylesimport 'swiper/dist/css/swiper.css'Vue.use(VueAwesomeSwiper, )

组件挂载

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

由于我们要在很多地方用到该插件，选用全局方式，把上述全局代码复制到src/main.js中
2.SPA在单页面开发中的应用
新建一个.vue文件，按照以下代码模式更改

例如：

// >>>穿透作用，因为swiper-pagination-bullet-active类在组件内部定义的，想要wrapper也能作用到，可以用>>>
    .wrapper >>>.swiper-pagination-bullet-active
        background #fff !important
    .wrapper
        overflow:hidden
        width 100%
        height:0
        padding-bottom:26.6666667%
        background :#ccc
        .swiper-item
            width:100%
            .swiper-img
                width:100%

作者：fenerchen
链接：https://www.jianshu.com/p/c4925ef55eaa