vue-cli webpack 引入 swiper
来源:互联网 发布:淘宝站内推广含义 编辑:程序博客网 时间:2024/05/29 03:21
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 }); }
阅读全文
0 0
- vue-cli webpack 引入 swiper
- vue开发:vue-cli引入swiper
- vue-cli+webpack引入jQuery
- vue+vue-cli+webpack中引入jQuery
- vue-cli webpack中引入jquery
- vue-cli webpack全局引入jquery
- vue-cli脚手架 webpack中引入jquery
- vue-cli webpack 引入 wangeditor(轻量级富文本框)
- vue引入swiper插件
- Vue-cli+router+webpack
- webpack与vue-cli
- vue-cli + webpack + vue-router
- vue-cli中的webpack配置
- vue-cli webpack 使用sass
- webpack构建vue-cli环境
- vue-cli中的webpack配置
- vue-cli webpack 配置分析
- vue-cli中的webpack配置
- HashMap,LinkedHashMap,TreeMap的区别
- JDK基础概念及目录结构
- nodejs003-运算表达式/条件判断/循环语句/垃圾回收
- 动态添加新元素事件无法触发解决方法
- 冒泡排序
- vue-cli webpack 引入 swiper
- Python2&Python3 print 不换行
- HDU6034 Balala Power!(贪心,坑!!!)(2017 HDU多校联赛第一场)
- [实践]CEGUI-0.87编译
- delete
- c# 不规则透明窗体
- 前端疲劳
- 百练_3709:2进制转化为3进制
- TCP3次握手与4次挥手