大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

怎么在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 结构

 
 
  
  
   
    
   
            
            
  
      

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-cliwebpack中引入swiper-创新互联
URL链接:http://dzwzjz.com/article/djjojd.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP