vue-cli webpack 引入swiper的操作方法


Posted in Javascript onSeptember 15, 2018

1:下载需要 swiper 的js文件和css文件

http://www.swiper.com.cn/

2:下载好swiper相关的js和css,js放在static目录下,css放在assets目录下。

3:安装runtime:

npm install babel-runtime

4:修改.eslintrc.js文件如下: 最后一行添加

'globals': {
  "Swiper": true
 } //这个地方是新加入的 全局注入

5: vue模板中引入 swiper.min.js

import Swiper from '@/../static/js/swiper.min.js';

6: vue模板中引入 swiper-3.4.2.min.css

@import url("../../assets/css/swiper-3.4.2.min.css");

7: html 结构

<!-- Swiper -->
 <div class="home_banner">
  <div class="swiper-container">
  <div class="swiper-wrapper">
   <div class="swiper-slide">
    <img src="./../../assets/img/sec_3_top_2@2x.jpg">
   </div>
   <div class="swiper-slide">
    <img src="./../../assets/img/sec_3_top_2@2x.jpg">
   </div>
   <div class="swiper-slide">
    <img src="./../../assets/img/sec_3_top_2@2x.jpg">
   </div>
  </div>
  </div>
 </div>
 <!-- Swiper end -->

8:vue js

mounted() {
 var mySwiper = new Swiper('.home_banner .swiper-container', {
  direction: 'horizontal',
  loop: true
 });
 // Swiper 推荐课程
 var swiper2 = new Swiper('.course_swiper_wrap .swiper-container', {
  slidesPerView: 3,
  paginationClickable: true,
  nextButton: '.swiper-button-next-01',
  prevButton: '.swiper-button-prev-01',
  spaceBetween: 30,
  freeMode: true,
  loop: true
 });
 }

以上这篇vue-cli webpack 引入swiper的操作方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用JS读秒使用示例
Sep 21 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
js运动应用实例解析
Dec 28 Javascript
js+html5操作sqlite数据库的方法
Feb 02 Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
Aug 11 Javascript
vue实现图片裁剪后上传
Dec 16 Vue.js
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 #Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 #Javascript
js事件on动态绑定数据,绑定多个事件的方法
Sep 15 #Javascript
vue 的点击事件获取当前点击的元素方法
Sep 15 #Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 #Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 #Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 #Javascript
You might like
用php实现批量查询清除一句话后门的代码
2008/01/20 PHP
joomla内置的表单验证功能使用方法
2010/06/11 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
Javascript中的数学函数集合
2007/05/08 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
Python字符串匹配算法KMP实例
2015/07/18 Python
多个应用共存的Django配置方法
2018/05/30 Python
python处理“
2019/06/10 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
10个示例带你掌握python中的元组
2020/11/23 Python
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
英文简历自荐信范文
2013/12/11 职场文书
学雷锋演讲稿汇总
2014/05/10 职场文书
健康教育评估方案
2014/05/25 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
2015年路政工作总结
2015/05/22 职场文书
烈士陵园观后感
2015/06/08 职场文书
寒假致家长的一封信
2015/10/10 职场文书
如何在C++中调用Python
2021/05/21 Python
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs