vue 常用插件

淡淡的烟草味﹌ 2022-12-12 02:15 136阅读 0赞

插件Day.js 时间戳转换

demo：[https://mp.csdn.net/console/UserLevel][https_mp.csdn.net_console_UserLevel]

html2canvas

**vue-lazyload插件 **  图片懒加载

【npm install vue-lazyload --save-dev】

如果在初始化页面的时候，一次性将所有图片资源都加载完毕  
可能会降低页面渲染的速度，降低用户体验  
我们可以借助 **vue-lazyload** 插件实现图片的懒加载  
当页面被初始化时，只加载 在可视区域内的图片  
当用户向下滚动页面时，再去加载剩余的图片资源

演示demo：[http://hilongjw.github.io/vue-lazyload/][http_hilongjw.github.io_vue-lazyload]

loadsh 库

animate.css是一个有趣的，跨浏览器的css3动画库

> [https://www.jianshu.com/p/86b7b64707d7][https_www.jianshu.com_p_86b7b64707d7]

> 官网：  [https://animate.style/][https_animate.style]

# #

数字滚动插件

vue-count-to

![20210120112646443.gif][]

http-server （部署到本地服务器）【比如要访问打包后的dist文件夹，里头的index.html文件】

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70][]

# #

## 移动端 ##

*  移动端 vue使用better-scroll

> **优点**
> 
> 1.体验像原生：滚动非常流畅，而且没有滚动条。  
> 2.记录当前路由滚动位置：在vue中通过路由切换页面时组件会自动滚动到顶部，需要监听滚动行为才能让滚动位置固定，better-scroll解决了这个问题。

*  移动端vue-cli中使用postcss-px-to-viewport 将px转换成vw

[https://blog.csdn.net/Charissa2017/article/details/105420971][https_blog.csdn.net_Charissa2017_article_details_105420971] 参考

[https_mp.csdn.net_console_UserLevel]: https://mp.csdn.net/console/UserLevel
[http_hilongjw.github.io_vue-lazyload]: http://hilongjw.github.io/vue-lazyload/
[https_www.jianshu.com_p_86b7b64707d7]: https://www.jianshu.com/p/86b7b64707d7
[https_animate.style]: https://animate.style/
[20210120112646443.gif]: /images/20221123/3702af3559ca4bc883b56e0384430e39.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70]: /images/20221123/2f9b2ffc1fd141a7b8dfda91268a4641.png
[https_blog.csdn.net_Charissa2017_article_details_105420971]: https://blog.csdn.net/Charissa2017/article/details/105420971