在vue项目中使用 swiper vue-awesome-swiper 插件实现无缝轮播

涉及到 vue-awesome-swiper 插件，这个插件适用于 Vue 的轮播组件，支持服务端渲染和单页应用。所以用来开发vue项目，很ok。但是值得注意的是，用这个开发移动端的话，有时候会有一点不流畅问题，关于ios和Android的兼容性问题。

• 使用之前现在项目中安装此插件

npm install vue-awesome-swiper --save

• 然后呢，就是在vue项目中引入此插件

全局引入。在 main.js 中引入

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.min.css'     // 引入css 文件

Vue.use(VueAwesomeSwiper)     // 全局使用

局部引入。只引入相关组件模块，在某一个需要使用swiper的页面中

//     引入样式文件
import 'swiper/dist/css/swiper.css'
//     然后引入相关模块
import { swiper, swiperSlide } from 'vue-awesome-swiper'

• 使用。图片无缝轮播

swiper 还可以用于做app启动的轮播图，等等。具体可以看swiper 的官方示例：https://www.swiper.com.cn/demo/index.html