nuxt使用vue-awesome-swiper的配置教程

本文记叙关于swiper框架有很多功能不能正常使用的情况以及解决办法
和使用版本关系不大，还是尽量使用最新框架版本

简单介绍下步骤

虽然github上有
点击进入(https://github.com/surmon-china/vue-awesome-swiper)

安装

npm install swiper vue-awesome-swiper --save

# or
yarn add swiper vue-awesome-swiper

nuxt plugin相关

方式一，全局配置

此配置为全局配置，适合页面比较少的项目，然后按照文档的demo直接使用就行，在vue文件也不需要import

创建plugin文件

命名无所谓，

import Vue from 'vue'

import { Swiper as SwiperClass, Pagination, Mousewheel, Autoplay } from 'swiper/core'

import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'

// Swiper modules
SwiperClass.use([Pagination, Mousewheel, Autoplay])

// class.use必须要引用这些组件，不然只能用最基础的功能，并不能用自带的标识器，和滚动效果

// Global use
Vue.use(getAwesomeSwiper(SwiperClass))

配置plugin

打开nuxt.config
swiper=上一个步骤文件名

plugins: [
    { src: '@/plugins/swiper', ssr: false }
  ],

配置css

  css: [
    'swiper/swiper-bundle.css'
  ],

方式二，局部配置

适合页面比较多的项目，需要控制局部资源

script代码

import { Swiper as SwiperClass, Pagination, Autoplay } from 'swiper/core'

import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'

import 'swiper/swiper-bundle.css'

// Swiper modules
SwiperClass.use([Pagination, Autoplay])
// 模块引入和之前一样的没什么好说的
const { Swiper, SwiperSlide } = getAwesomeSwiper(SwiperClass)
// 导出组件
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      swiperOptions: { // swiperOptions对应template里面的swiper options属性
        pagination: { // 添加指示器
          el: '.swiper-pagination'
        },
        loop: true, //循环
        autoplay: true, //自动滚动
        on: { //事件响应
          click () {
            console.log('被点击了')
          }
        }
      }
    }
  }
}

template代码

      
        Slide 1
      
      
        Slide 2
      
      
        Slide 3