适用读者：做前端选型时想快速判断"这个库该不该进项目"的人。
性质：速查表，21 个库一句话结论 + 版本口径 + 该不该用。原文均为独立入门卡（3710–3730），此处按用途归并，不重复教程。
覆盖旧文：3710 Node、3711 pnpm、3712 TypeScript、3713 Capacitor、3714 Pinia、3715 VueUse、3716 Vue Draggable Plus、3717 TanStack Virtual、3718 md-editor-v3、3719 markstream-vue、3720 KaTeX、3721 Swup、3722 Expressive Code、3723 OverlayScrollbars、3724 Iconify、3725 Pagefind、3726 PhotoSwipe、3727 Live2D、3728 Biome、3729 Vitest、3730 ArchUnit → 21 篇。
1. 运行时与工具链（5）
| 库/工具 |
一句话 |
版本口径 |
该不该用 |
| Node.js（3710） |
前端工具链的运行时 |
LTS（20/22） |
必装；生产构建用 LTS，别追 Current |
| pnpm（3711） |
硬链接 + 内容寻址的包管理器，装得快、占得少 |
9.x |
推荐；注意 shamefully-hoist 与幽灵依赖 |
| TypeScript（3712） |
给 JS 加静态类型 |
5.x |
推荐；strict: true 起步，any 需显式理由 |
| Biome（3728） |
Rust 实现，替代 ESLint + Prettier |
1.x |
新项目可试；生态插件少于 ESLint，规则覆盖需核对 |
| Vitest（3729） |
Vite 原生单测框架，API 兼容 Jest |
2.x |
Vue/Vite 项目首选；watch 快、配置少 |
判据：工具链替换只在"痛点明确 + 能验证"时做——Biome 快，但若依赖 ESLint 插件（如 eslint-plugin-vue 的深度规则），迁移成本可能大于收益。
2. 状态与组合式能力（2）
| 库 |
一句话 |
版本 |
该不该用 |
| Pinia（3714） |
Vue 3 官方状态管理 |
2.x |
默认选它（见 J07 §4） |
| VueUse（3715） |
200+ 组合式函数（useLocalStorage/useIntersectionObserver…） |
11.x |
推荐；按需引入，避免全量打包 |
3. UI 交互组件（6）
| 库 |
一句话 |
版本 |
该不该用 |
| Vue Draggable Plus（3716） |
拖拽排序（基于 SortableJS） |
1.x |
有排序需求再用；移动端需测触摸 |
| TanStack Virtual（3717） |
长列表虚拟滚动 |
3.x |
列表 >1000 行时用；行高必须可估算 |
| OverlayScrollbars（3723） |
自定义滚动条（保留原生滚动行为） |
2.x |
设计强要求时用；注意与虚拟滚动的兼容 |
| PhotoSwipe（3726） |
图片灯箱 |
5.x |
图片站标配；需自己接手势与懒加载 |
| Swup（3721） |
页面无刷新转场（MPA 也能用） |
4.x |
静态站加转场可用；SPA 内没必要 |
| Capacitor（3713） |
Web 应用打包成原生 App |
6.x |
需要上架/调用原生能力时用；包体与审核是成本 |
4. 内容渲染（5）
| 库 |
一句话 |
版本 |
该不该用 |
| KaTeX（3720） |
数学公式渲染（比 MathJax 快） |
0.16 |
公式场景首选；同步渲染无闪烁 |
| md-editor-v3（3718） |
Vue 3 Markdown 编辑器 |
4.x |
后台写作用；XSS 防护需自行校验 |
| markstream-vue（3719） |
流式 Markdown 渲染（AI 输出用） |
0.x |
做 AI 聊天界面时用；版本年轻，做降级预案 |
| Expressive Code（3722） |
代码块高亮与行标注（Astro 生态） |
0.3x |
本站正在用；主题与插件需对齐 Astro 版本 |
| Pagefind（3725） |
静态站全文搜索（构建期建索引） |
1.x |
静态站搜索首选；中文分词效果需实测 |
5. 图标、渲染与架构（3）
| 库 |
一句话 |
版本 |
该不该用 |
| Iconify（3724） |
统一 150+ 图标集，按需取 |
4.x |
推荐；离线构建需预下载图标集 |
| Live2D（3727） |
网页看板娘 |
— |
装饰性；移动端性能与可访问性需评估 |
| ArchUnit（3730） |
用单元测试守护分层架构（Java 侧） |
1.x |
后端项目用它固化"不许跨层调用"；本表唯一非前端项，登记在此便于选型对照 |
6. 选型五问（通用）
① 它解决的是"我现在的痛"还是"别人的痛"？（避免为了用而用）
② 维护活跃度：近 6 个月有提交？issue 响应？主版本发布节奏？
③ 体积代价：gzip 后多少 KB？是否可 tree-shake / 按需引入？
④ 可替换性：封装边界在哪？换掉要改多少处？
⑤ 版本锁定：与框架主版本（Vue 3 / Astro 5）兼容矩阵是否明确？
判据："能省 200 行代码"不足以作为引入理由——要看它带来的升级、安全、体积成本是否低于自写维护成本。
7. 版本口径与待核
| 项 |
状态 |
| 各库版本号 |
按原文写作时点记录，待核最新主版本（本表仅作选型参考，落地前查官方 release） |
| Biome 规则覆盖 |
待核：与 ESLint 插件生态的差距 |
| Pagefind 中文分词 |
待核：需在真实语料上测召回 |
| markstream-vue 稳定性 |
0.x 阶段，待核生产可用性 |
8. 缺口
| 项 |
去向 |
| 构建与打包 |
S14-J06 §4、J02（打包分析）、J03（预压缩与 CDN） |
| 首屏优化 |
S14-J04（SPA 首屏） |
| 状态管理深入 |
S14-J07 §4 |
| 后端架构守护 |
ArchUnit 用法细节归 S07（待补） |
9. 下一篇
S14 系列验收（v2） —— 16 篇 / 四千三百余点位 / 69 篇尾部旧文全部登记 / 下一系列（P9：S09 Go 61 篇）前置依赖。
本篇属于系列《S14 · 前端与可视化》。旧文来源：A-3710–3730（21 篇库入门卡）；扩展点 —（速查表）。库版本按原文写作时点，落地前需核对官方 release（标待核）。
上一篇：S14-A03 · AI 时代 UI 生成方法论：从形容词到规格书
