自定义引入 swiper 组件

        Swiper是目前应用较广泛的移动端网页触摸内容滑动js插件,在项目中引入也很方便。但是有时候,我们只需要swiper的部分功能,这样也可以减少swiper文件的大小。

        首先可以在gitbub拉下swiper项目。

        \swiper-master\scripts\build-config.js文件中的components列举了所有swiper提供的组件,我们可以按照自己的要求,只保留有用的,比如我的更改如下:

        接下来,需要重新编译构建swiper项目,README文档中有详细的编译过程:

        因为swiper使用gulp打包项目,所以要先安装gulp

$ npm install --global gulp

        然后安装所有依赖:

$ npm install

        然后构建项目

$ npm run build:dev // 构建出的文件在 build/文件夹
$ npm run build:prod // 构建出的文件在 dist/文件夹

关于build/文件夹和dist/文件夹的区别:

        我们的项目中使用的文件(包括css和js文件),只能来自于dist/文件夹,这些文件是最稳定的版本;build/文件夹下的文件仅用于开发目的。

        编译完成后,我们可以看到dist中的文件比之前小了一些

        然后,就可以直接引入swiper.min.js文件。

        在Vue项目中,需要把js文件放到static文件夹中引入

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值