第一步:在终端的项目根目录下载安装swiper:

cnpm/npm install vue-awesome-swiper --save;

第二步:在程序入口文件main.js中引用:

import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/dist/css/swiper.css';

第三步:在main.js中使用swiper组件:

Vue.use(VueAwesomeSwiper)

部分引用:

import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

导出两个组件:

components: {

  swiper,

  swiperSlide

}

  

在vue中使用swiper组件的更多相关文章

  1. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  2. vue中的父子组件相互调用

    vue中的父子组件相互调用: 1.vue子组件调用父组件方法:子组件:this.$emit('xx'); 父组件:定义yy方法,并在引用子组件时传参,如@xx="yy" 2.vue ...

  3. vue中引用swiper轮播插件

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...

  4. vue中修改swiper样式

    问题 vue单文件组件中无法修改swiper样式. 解决 1,单文件组件中:新增一个style 不加scoped 让它最终成为全局样式.只在其中操作swiper的样式. <style lang= ...

  5. vue中使用keepAlive组件缓存遇到的坑

    项目开发中在用户由分类页category进入detail需保存用户状态,查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件. 上一篇讲了keep-alive的基本用法,现在说说遇到 ...

  6. Vue中,父组件向子组件传值

    1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...

  7. vue中兄弟之间组件通信

    我们知道Vue中组件之间的通信有很多方式,父子之间通信比较简单,当我们使用vuex时候,兄弟组件之间的通信也很好得到解决 当我们项目较小时候,不使用vuex时候Vue中兄弟组件之间的通信是怎样进行的呢 ...

  8. vue中修改子组件样式

    一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...

  9. Vue中iframe和组件的通信

    最近的项目开发中用到了Vue组件中嵌套iframe,相应的碰到了组件和HTML的通信问题,场景如下:demo.vue中嵌入 test.html 由于一般的iframe嵌套是用于HTML文件的,在vue ...

随机推荐

  1. essential

    essential - 必应词典 美[ɪ'senʃ(ə)l]英[ɪ'senʃ(ə)l] n.要点:要素:实质:必需品 adj.完全必要的:必不可少的:极其重要的:本质的 网络基本的:必需的 变形复数: ...

  2. Django微信小程序后台开发教程

    本文链接:https://blog.csdn.net/qq_43467898/article/details/83187698Django微信小程序后台开发教程1 申请小程序,创建hello worl ...

  3. 漫谈企业应用架构的演变 CRM & etc

    漫谈企业应用架构的演变 goYangKunhttps://mp.weixin.qq.com/s?__biz=MzIzMTc3NTA2NQ==&mid=2247483698&idx=1& ...

  4. Android开发--IntentService的用法,你错过了什么

    Android开发--IntentService的用法,你错过了什么 . 本文链接:https://blog.csdn.net/smbroe/article/details/45009721 Inte ...

  5. shell编程系列24--shell操作数据库实战之利用shell脚本将文本数据导入到mysql中

    shell编程系列24--shell操作数据库实战之利用shell脚本将文本数据导入到mysql中 利用shell脚本将文本数据导入到mysql中 需求1:处理文本中的数据,将文本中的数据插入到mys ...

  6. 手动卸载wine-stable卸载

    装了wine发现运行TIM全都乱码,于是手动卸载wine: 删除文件:(参考https://blog.csdn.net/taizhoufox/article/details/5496568) ~/.w ...

  7. 一、搭建简单的axis web服务

    转: 一.搭建简单的axis web服务 1.在官方网站下载axis的工程(这个等下就有用的)和源码.jar包等,下载地址是: http://labs.renren.com/apache-mirror ...

  8. js 实现复制粘贴

    js 实现复制粘贴 <!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" ...

  9. 【428】Dijkstra 算法

    算法思想:(单源最短路径) 1个点到所有其他点的最短路径 查找顶点到其他顶点的最短路径,无法到达的记为+∞,找到最小的,就找到了最短路径的顶点 查看上一轮找到的最小点到达其他点的最小值,找到最短路径的 ...

  10. 报错:org.apache.sqoop.common.SqoopException Message: CLIENT_0001:Server has returned exception NoClassDefFoundError: org/codehaus/jackson/map/JsonMappingException

    报错背景: CDH集成sqoop2服务之后,创建好link和job之后,执行job的时候报错. 报错现象: sqoop:> start job -j Exception has occurred ...