前端库收藏

2025/2/11
894 字
# 技术# 前端

一些个人收藏的前端库,记录一下,避免下次要用的时候又到处找。有些已经几乎到了必须用的程度。

CSS

  • UnoCSS: 类似 Tailwind 之类的 CSS 库,还可以结合多种预设和图标库,多合一,不过个人感觉对主题的支持比较难受一点
  • Tailwind CSS: 用 UnoCSS 之前我用这个,区别不大

图标

  • Icônes: 多合一图标库,配合 UnoCSS 用起来很爽
  • Heroicons: TailwindCSS 出品的 icon 库,比较小和精简
  • Font Awesome: 老牌传统图标库,但是这个文档看得我真难受

工具

  • VueUse:很多工具级函数,真的很方便,已经成为我的项目必选包
  • Pinia: 一个类似 Vuex 的状态库,但是我个人更习惯直接上 reactive 对象,不习惯 redux 来的那套
    • 发现 VueUse 有 state 管理的函数, 建议直接上
  • Storybook: 看起来是一套前端组件的测试工具,下次试试
  • Turbo: Monorepo 管理器,还挺好使
  • clsx: 类似 Vue 的 class 绑定的工具
  • alfaaz: 统计文本字数,基本唯一用途是个人博客吧

组件

  • daisyUI:基于 Tailwind 的组件库,设计风格我个人挺喜欢的,而且无需 js。可惜现在我换用 UnoCSS 之后暂时还没找到好替代
  • Vue Toastification: 一个 Toast 库,还没用过,下次试试 用了,挺好用的,以后就用这个了
    • Vue3 toastify:另一个 Toast 库,也没用过,下次试试这俩哪个好使 看起来也不错
  • Vue Collapsed折叠效果库,不用自己写 css 动画了 结果我现在还是手写
  • vue-modal: Modal 库,但是其实感觉 Modal 自己手写起来很方便,所以一直没用过

动效

  • css-doodle: 用于生成一些图案和样式的库,很有意思,纯好看,没什么别的用
  • AOS: Animate On Scroll Library,一个让页面滚动的时候元素播放动画的库
  • GSAP: 据说是最强大的动画库,但是高级许可要收费,有点麻烦
  • Animate.css: 纯 CSS 动画,有的东西也不算多,就是省了自己写一些简单动画的工夫
  • lenis: 如果想把滚动和动效绑定的话可以用这个,感觉很炫酷
  • Lottie: 通用的 MG 播放器
  • view-transitions-polyfill: View Transition API 的 Polyfill,虽然好像 Firefox 的实现已经提上日程了,而且这个问题还有点大,但还是兼容一下旧一点的浏览器吧

视觉

  • D3.js: 数据可视化,但是感觉有点太老了,不是很想用
  • Three.js: 3D 可视化,很炫酷,但是暂时没想到可以怎么用
  • Matter.js: 一个轻量级 2D 物理引擎,可以给你的网页加点花活
  • PixiJS: 个人感觉像是 2D 版本的 three.js,或许适合用来做点 h5 小游戏。和 GSAP 的区别是这个在 canvas 上