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