前端与 UI
TECH STACK开发技术栈Web 界面的框架、组件库、样式方案、状态管理与构建工具：从「页面怎么渲染」到「组件从哪来」，一页看完。
收录条目
94 条
按用途筛选，同类才可比
先按分类把范围缩到一类：框架与渲染、组件库与设计系统、状态与数据、富交互与可视化、Web 基础与协议；同一类里再比形态与许可证。
分类
5 个
按用途分组
适用场景
技术选型
先定位，再比同类
数据日期
2026-10-27
核对到这一天
口径边界
只比同类
跨类不横向比
筛选与排序
显示 94 / 94 条前端与 UI 对照表
第 3 / 4 页 · 共 94 条| 名称 | 分类 | 形态 | 一句话定位 | 亮点 / 热度 | 许可证 | 详情 |
|---|---|---|---|---|---|---|
| TDesign Vue Next Vue 3 生态 · 腾讯设计体系 | 组件库与设计系统 | 开箱即用的业务组件库 | 企业级设计系统 | 组件、主题和设计规范较完整，适合团队级产品和多业务线统一体验。 | — | 查看详情 |
| Testing Library Testing Library · 组件库与设计系统 | 组件库与设计系统 | 组件测试库 | 按用户视角测试组件 | 用可访问性角色与可见文案查找元素，逼着测试贴近真实交互；与 Jest、Vitest… | MIT | 查看详情 |
| uni-ui 小程序 / 跨端框架自带 · uni-app 官方 | 组件库与设计系统 | 端自带或跨端组件方案 | Vue 多端组件库 | 与 uni-app 配套，小程序、H5 和 App 覆盖广，接入成本低。 | — | 查看详情 |
| Vant 移动端 H5 / 小程序 · Vue · 移动 H5 | 组件库与设计系统 | 移动端优先组件库 | 移动端 H5 组件库 | 移动交互成熟，中文资料丰富，表单、弹层、列表和业务组件齐全。 | — | 查看详情 |
| Vuetify Vue 3 生态 · Material Design | 组件库与设计系统 | 开箱即用的业务组件库 | Vue Material 组件库 | 设计规范统一，布局、表单和移动适配能力较完整。 | — | 查看详情 |
| Wot Design Uni 小程序 / 跨端框架自带 · Vue 3 · uni-app | 组件库与设计系统 | 端自带或跨端组件方案 | Vue 3 uni-app 组件库 | 表单、弹窗、选择器等移动业务组件较完整，风格接近 Vant。 | — | 查看详情 |
| xterm.js 开发者工作台内嵌组件 · Web Terminal | 组件库与设计系统 | 开发者工具内嵌组件 | 终端 UI 组件 | 负责终端绘制、键盘输入和 ANSI 输出，能与 node-pty / ConPTY… | — | 查看详情 |
| 文档预览管线 开发者工作台内嵌组件 · docx · pptx · sheet · pdf · media | 组件库与设计系统 | 开发者工具内嵌组件 | 多格式文件预览 | 把文档、表格、演示文稿、PDF、视频和音频纳入同一工作区，减少 Agent 输出与文… | — | 查看详情 |
| Jotai Jotai 社区 · 状态管理 | 状态与数据 | 原子化状态管理 | 以原子为单位的状态方案 | 状态拆成独立原子，组件只订阅自己用到的部分，更新粒度细、重渲染少；不需要外层 Pro… | MIT | 查看详情 |
| next-intl 前端 · 国际化 | 状态与数据 | 技术名词 | 面向 Next.js App Router 的多语言路由与消息管理方案 | 语言是路由和请求上下文的一部分，不是上线前再贴的补丁。 | — | 查看详情 |
| Pinia / Redux 前端 · 状态管理 | 状态与数据 | 技术名词 | 前端跨组件状态与数据流管理方案 | 当状态需要跨组件共享时，再建立统一的数据源。 | — | 查看详情 |
| Redux Toolkit Redux 团队 · 状态管理 | 状态与数据 | 全局状态管理 | Redux 官方推荐写法工具集 | 用切片把 action 与 reducer 收在一处，内置不可变更新库免手写展开运算… | MIT | 查看详情 |
| TanStack Query 前端 · 服务端状态 | 状态与数据 | 技术名词 | 处理 API 缓存、请求生命周期和服务端数据失效的客户端库 | 服务端数据由 Query 管缓存，UI 状态再交给本地 Store。 | — | 查看详情 |
| zustand 前端 · 客户端状态 | 状态与数据 | 技术名词 | 轻量的 React 客户端状态管理库 | 只保存客户端状态，避免把服务器当成第二个缓存。 | — | 查看详情 |
| Apache ECharts Apache 软件基金会 · 交互与可视化 | 富交互与可视化 | 图表可视化库 | 覆盖常见图表需求的图表库 | 图表类型覆盖折线、柱状、地图、关系图等常见需求，配置项驱动、换图不用重写渲染逻辑；大… | Apache-2.0 | 查看详情 |
| CodeMirror 6 CodeMirror 团队 · 交互与可视化 | 富交互与可视化 | 代码编辑器内核 | 可嵌入网页的代码编辑器内核 | 按模块拆分，语言支持、主题、快捷键都按需装配，打包体积可控；增量解析与视口渲染让它能… | MIT | 查看详情 |
| D3 Observable（D3 社区） · 交互与可视化 | 富交互与可视化 | 数据可视化底层库 | 用数据驱动 DOM 与 SVG 绘图 | 把数据绑定到 DOM，用比例尺、形状生成器与过渡做任意定制图表；不限定图表类型，复杂… | ISC | 查看详情 |
| Framer Motion 前端 · 动效库 | 富交互与可视化 | 技术名词 | React 生态的声明式动画与交互动效库 | 用组件状态描述动画，而不是手动操作每一帧。 | — | 查看详情 |
| Lexical Meta · 交互与可视化 | 富交互与可视化 | 富文本编辑器框架 | 可扩展的富文本编辑器框架 | 基于内容可编辑区做状态模型，节点与选区可控，扩展插件按需组合；对无障碍与输入法支持较… | MIT | 查看详情 |
| Lottie Airbnb · 交互与可视化 | 富交互与可视化 | 动效播放库 | 把 AE 动画搬到网页 | 把 After Effects 动画导出成 JSON，在页面与 App 上按矢量播放… | MIT | 查看详情 |
| Motion 前端 · 动效库 | 富交互与可视化 | 技术名词 | React / Web 的声明式动画与交互过渡库 | 动效用来说明状态变化，不应该成为产品的主角。 | — | 查看详情 |
| Shiki + Mermaid + KaTeX 前端 · 代码 / 文档渲染 | 富交互与可视化 | 技术名词 | 代码高亮、流程图和数学公式的内容渲染组合 | 渲染器负责表达，输入清洗和安全策略负责守边界。 | — | 查看详情 |
| Stripe.js 前端 · 支付前端 | 富交互与可视化 | 技术名词 | Stripe 支付流程的浏览器端接入库 | 前端负责支付交互，服务端负责金额、订单和最终确认。 | — | 查看详情 |
| TipTap Tiptap · 交互与可视化 | 富交互与可视化 | 富文本编辑器框架 | 基于文档模型的编辑器框架 | 文档模型来自成熟的编辑内核，扩展以插件方式组合，协作编辑、评论、自定义节点都有现成做… | MIT | 查看详情 |
| axe-core Deque Systems · Web 基础能力 | Web 基础与协议 | 无障碍检测引擎 | 自动检测页面的无障碍问题 | 按无障碍规则扫真实渲染后的页面，报出对比度、标签缺失、焦点顺序等问题并给定位与修复建… | MPL-2.0 | 查看详情 |
| Cookie / CORS 基础 Web · 基础 Web | Web 基础与协议 | 技术名词 | 浏览器状态与跨域访问控制机制 | Cookie 管状态，CORS 管跨域边界。 | — | 查看详情 |
| HTML / CSS 基础 Web · 基础 Web | Web 基础与协议 | 技术名词 | 网页结构与视觉样式基础 | HTML 搭骨架，CSS 做外观。 | — | 查看详情 |
| HTTP / 浏览器 基础 Web · 基础 Web | Web 基础与协议 | 技术名词 | 页面、资源与 API 通信的基础 | 浏览器发请求，服务器给响应。 | — | 查看详情 |
| i18next i18next 社区 · Web 基础能力 | Web 基础与协议 | 国际化框架 | 多语言文案与格式化的基础库 | 按命名空间组织文案，支持插值、复数与语言回退，语言包可懒加载；框架无关且有各主流框架… | MIT | 查看详情 |
| Lit Google · Web 基础能力 | Web 基础与协议 | Web Components 基类库 | 按浏览器标准写组件的基础库 | 组件按浏览器原生标准实现，能被 React、Vue、Angular 直接引用，跨框架… | BSD-3-Clause | 查看详情 |
数据说明
收录规模94 个条目分 5 类，同类之间才可比
资料口径各项目官方文档与代码仓库以官方文档与仓库为准，只做中文整理
数据日期2026-10-27核对到这一天，官方改动以官方为准
口径边界只比同类跨类场景不同，不可直接比价与打分
常见问题
组件库、Headless 原语、样式工具能一起比吗？
不能。Ant Design / Element Plus 是开箱即用的业务组件库，Radix / Base UI 只提供行为与无障碍原语，Tailwind 是样式工具。前两类给你自由度但要自己写组件，第三类交付快但定制成本高。
框架和元框架（Next.js / Nuxt）是什么关系？
元框架在框架之上补了路由、渲染模式（SSR/SSG/RSC）与构建约定。选 React 但不选元框架，等于自己拼路由与构建；选 Next.js 则要接受它的约定与升级节奏。
条目信息取自各项目官方仓库与文档；定位、优势与注意事项为中文归纳，数值不改写，仓库地址、许可证与版本以官方为准。
