当我们在vue项目中使用轮播图插件swiper时，直接引入swiper需要消耗大量资源vue-swiper是swiper的精简化
在这里，我介绍一下我的经验。
步骤一：安装vue，
# 最新稳定版本
$ npm install vue
# 最新稳定 CSP 兼容版本
$ npm install vue@csp
如果你已经安装了vue，可以忽略。
步骤二：创建vue项目
# 全局安装 vue-cli
$ npm install -g vue-cli
如果安装过就直接下一步
# 创建一个基于 "webpack" 模板的新项目
$ vue init webpack projectName
# 安装依赖
$ cd projectName
$ npm install //npm自动根据安装package.json文件安装依赖
$ npm run dev //启动服务
启动服务后如果弹出Vue的起始界面就是安装成功了
步骤三：
安装vue-swiper
npm install vue-awesome-swiper --save
步骤四：
在main.js中引入
import Vue from'vue'
import VueAwesomeSwiper from'vue-awesome-swiper'
然后再mian.js里面全局注册
Vue.use(VueAwesomeSwiper)
步骤五：
在.vue文件中使用
<script>
import { swiper, swiperSlide } from'vue-awesome-swiper'
require('./../static/swiper-3.3.1.min.css') //不建议这样引CSS
exportdefault{
name:'carrousel',
data() {
return{
swiperOption:{ //以下配置不懂的，可以去swiper官网看api，链接http://www.swiper.com.cn/api/
autoplay:0, //自动切换的时间间隔（单位ms），不设定该参数slide不会自动切换。
loop:false, //是否循环
direction:'horizontal', //Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)
pagination:'.swiper-pagination',//分页器容器的css选择器或HTML标签
}
}
}，
computed: {
swiper() {
return this.$refs.mySwiperA.swiper
}
}
</script>
<style scoped>
@import "../../static/swiper.min.css"; //css建议这样引入
</style>
之后再配置路由在网页中就可以看到
