Vue-Swiper使用

当我们在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>

之后再配置路由在网页中就可以看到