vue-cli webpack 引入swiper的操作方法
程序员文章站
2022-04-21 08:14:57
1:下载需要 swiper 的js文件和css文件
http://www.swiper.com.cn/
2:下载好swiper相关的js和css,js放在s...
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的操作方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
推荐阅读
-
解决vue-cli项目webpack打包后iconfont文件路径的问题
-
webpack4+Vue搭建自己的Vue-cli项目过程分享
-
vue-cli脚手架引入图片的几种方法总结
-
详解webpack引入第三方库的方式以及注意事项
-
脚手架vue-cli工程webpack的作用和特点
-
webpack+vue-cli项目中引入外部非模块格式js的方法
-
vue-cli 引入jQuery,Bootstrap,popper的方法
-
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
-
vue-cli的webpack模板项目配置文件分析
-
vue-cli搭建项目引入jquery和jquery-weui的步骤教程