nuxt.js中使用swiper(vue-awesome-swiper) & vue cli

查了不少的文章以及官网,发现版本号是个大问题,记录一下,下次闭着眼睛复制

1.下载包

npm install vue-awesome-swiper@3 --save

npm install swiper@4 --save

或者直接用我的package.json

 "dependencies": {
    "swiper": "^4.5.1",
    "vue-awesome-swiper": "^3.1.3",
  },

我们nuxt版本为"nuxt": "^2.0.0",应该不影响吧,我猜的

2.在plugins中写入插件

在plugins建立plugins/swiper.js

import Vue from 'vue'
const VueAwesomeSwiper = require("vue-awesome-swiper/dist/ssr")
Vue.use(VueAwesomeSwiper)

3.在nuxt.config.js中引入css和swiper插件

module.exports = {
     css: [
        'swiper/dist/css/swiper.css',
     ],
     plugins: [
        { 
          src: "~/plugins/swiper.js", ssr: false
        },
    ],
}

4.template

html

   <div class="game-screen">
      <div class="swiper-content">
        <div v-swiper:mySwiper="swiperOption">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item, idx) in swiperData" :key="idx">
              <img :src="item.imgUrl" />
            </div>
          </div>
          <div class="swiper-pagination swiper-pagination-bullets"></div>
        </div>
      </div>
    </div>

css

.game-screen {
    overflow: hidden;
    margin-top: 40px;
    @include backgroundImage(641px, 826px, $imgBaseUrl + "/gameScreen.png")
    padding: 145px 44px 66px 65px ;
    .swiper-slide {
      width: 534px!important;
      img{
        width: 478px;
        height: 842px;
      }
    }
  }

js

export const swiperData = [
  { imgUrl: require('@/assets/image/exchangeActivity/1.png') },
  { imgUrl: require('@/assets/image/exchangeActivity/2.png') },
  { imgUrl: require('@/assets/image/exchangeActivity/3.png') },
  { imgUrl: require('@/assets/image/exchangeActivity/4.png') },
  { imgUrl: require('@/assets/image/exchangeActivity/5.png') },
]

data() {
    return {
       swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          bulletClass: 'my-bullet-swiper', // 自定义设置默认类名
          bulletActiveClass: 'my-bullet-active-swiper', // 自定义滑块活跃类名
          clickable: true, // 点击当前滑块切换到对应的轮播图片
        },
        paginationClickable: true,
        speed: 800,
        loop: true,
        observer: true,
        observeParents: true,
        autoplayDisableOnInteraction: false,
        slidesPerView: 2,
      },
      swiperData,
    }
}

比较重要的一点是:在你写完nuxt.config.js里面的样式配置之后,一定要npm run dev重新运行一下项目,我上面的css,你根据你的项目样式来调整,不过.game-screen的子元素下面的样式结构不要乱动~

5.效果

6.参考与推荐

nuxt正确使用vue-awesome-swiper