怎么在vue-cliwebpack中引入swiper-创新互联

怎么在vue-cli webpack中引入swiper？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

成都创新互联是网站建设技术企业，为成都企业提供专业的网站设计、成都网站制作，网站设计，网站制作，网站改版等技术服务。拥有十年丰富建站经验和众多成功案例，为您定制适合企业的网站。十年品质，值得信赖！

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 结构

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-cliwebpack中引入swiper-创新互联

其他资讯