自定义引入 swiper 组件 「爱情、让人受尽委屈。」 2022-05-09 00:50 302阅读 0赞 * Swiper*是目前应用较广泛的移动端网页触摸内容滑动js插件,在项目中引入也很方便。但是有时候,我们只需要swiper的部分功能,这样也可以减少swiper文件的大小。 首先可以在[gitbub][]拉下swiper项目。 \\swiper-master\\scripts\\build-config.js文件中的components列举了所有swiper提供的组件,我们可以按照自己的要求,只保留有用的,比如我的更改如下: ![70][] 接下来,需要重新编译构建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中的文件比之前小了一些 ![70 1][] ![70 2][] 然后,就可以直接引入swiper.min.js文件。 在Vue项目中,需要把js文件放到static文件夹中引入 [gitbub]: https://github.com/nolimits4web/swiper [70]: /images/20220509/e9457e52e450477cbb0d923ccd0b30b7.png [README]: https://github.com/nolimits4web/swiper/blob/master/README.md [70 1]: /images/20220509/d08f6bbc2a55452a93f49b797b90ea3c.png [70 2]: /images/20220509/8b7fa3ec4be54de0a8e8caac479e8fb3.png
还没有评论,来说两句吧...