Vue-cli3中优雅的使用Swiper库创建轮播

在使用swiper创建轮播前，需要先知道一件事，原生代码可以直接使用swiper库。
但是在Vue-CLI中使用的是vue-awesome-swiper插件，以下只介绍vue脚手架中使用swiper，所以文章中的swiper特指vue-awesome-swiper。

在vue-cli2中引入swiper

// vue-cli2 中通过npm安装
npm install vue-awesome-swiper --save-dev

vue-cli3中通过vue ui界面安装

vue ui界面 > 依赖 > 安装依赖 > 搜索vue-awesome-swiper > 选择并安装

在框架中引入swiper库

// 在vue根目录下 找到main.js文件，此处以vue-cli3项目为例
// 根目录 > src > main.js 
import Vue from 'vue
import vueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

Vue.use(vueAwesomeSwiper)

在代码中插入swiper轮播

// html片段
<swiper :options="swiperOptions" ref="mySwiper">
	<swiper-slide> 轮播内容，可以是文字或图片swiper-slide>
	<swiper-slide> 轮播内容，可以是文字或图片swiper-slide>
	<swiper-slide> 轮播内容，可以是文字或图片swiper-slide>
	// 显示分页器，类名可以自定义， slot固定，可选
	<div class="swiper-pagination" slot="pagination">div>
	// 显示切换按钮，类名可以自定义，slot固定，可选
	<div class="swiper-button-prev" slot="button-prev">div>
	<div class="swiper-button-next" slot="button-next">div>
	// 显示滚动条，类名自定义，slot固定，可选
	<div class="swiper-scrollbar" slot="scrollbar">div>
swiper>

// js部分
data(){
	return{
		swiperOption: {
			loop: true, // 前后衔接循环
			navigation: { // 绑定按钮，否则按钮不生效
				prevEl: '.swiper-button-prev',
				nextEl: '.swiper-button-next'
			},
			pagination: { // 绑定分页器，否则分页器不显示
				el: '.swiper-pagination',
				type: 'progressbar' // 将分页器显示为进度条，可选配置项
			},
			scrollbar: { // 绑定滚动条，否则滚动条不生效
				el: '.swiper-scrollbar',
				hide: true // 自定隐藏滚动条，可选配置项
			}
		}
	}
}

写在最后

起初是打算直接用swiper库写的，但是发现没用，然后找到了vue-awesome-swiper插件库，但是发现绑定元素的方式和swiper不大一样，就去看GitHub上的项目代码才发现不一样。
此外针对react框架，也有对应的react-awesome-swiper。
官方部分配置应用demo地址
github上项目地址