Naive UI

定义

Naive UI 是一个面向 Vue 3 的组件库，用 TypeScript 编写，官方对其定位的描述为「比较完整，主题可调，使用 TypeScript，快」。组件库指把按钮、输入框、表格、弹窗等常见界面元素预先实现好，供开发者在项目中直接调用，从而减少重复编码。

Naive UI 的组件数量在 90 个以上，官方说明这些组件全部可以 tree shaking，即打包工具能够只保留实际用到的部分，未引用的组件不会进入最终产物。组件通过 npm 安装，包名为 naive-ui，许可证为 MIT。

原理

Naive UI 的样式不通过外部的 less、sass 文件或 CSS 变量提供，而是由 JavaScript 在运行时生成并挂载，其主题能力建立在 css-render 这一 CSS-in-JS 方案之上^[2]。开发者使用组件时无需手动导入任何 CSS 文件，组件样式随组件本身一并生效。

主题定制的做法是向库传入一个样式覆盖对象，该对象由 TypeScript 提供完整的类型提示与校验，因此不需要编写特定语法的样式变量文件^[1]。在性能方面，select、tree、transfer、table、cascader 等数据类组件使用虚拟列表，只渲染可视区域内的条目。由于样式在运行时生成，在服务端渲染场景下需要额外的样式收集与注入配置，配套包为 @css-render/vue3-ssr^[2]。

发展历程

Naive UI 由图森未来的团队开发，在对外开源之前已在该公司内部维护并使用约两年。项目在 GitHub 上以 tusen-ai/naive-ui 仓库托管，文档站为 naiveui.com。

2021 年 6 月前后，Naive UI 已在社区中被介绍和推荐，当时组件数量约为 70 个。到 2022 年 12 月，其 GitHub 星标数约 1.12 万，npm 的月下载量已具一定规模。此后组件数继续增加，官方文档与仓库说明中「超过 80 个组件」的表述更新为「超过 90 个组件」，版本号进入 2.x 阶段，2.41.0 等版本陆续发布^[3]。

应用

Naive UI 适用于使用 Vue 3 与 TypeScript 的 Web 项目，在中后台管理系统一类场景中较为常见^[1]。其组件覆盖基础控件、数据录入与数据展示等类别，表格、树形控件、级联选择器等数据密集组件是其中的常见用法。

社区中存在以 Naive UI 为基础搭建的开源后台模板，例如 naive-ui-admin 将 Naive UI 与 Vue 3 一起使用，用于搭建管理后台骨架^[4]。也有项目在其之上再封装业务组件，作为对组件库的扩展^[5]。

局限

Naive UI 只支持 Vue 3，使用 Vue 2 的项目无法采用；官方要求 Vue 版本高于 3.0.5，TypeScript 版本高于 4.1。浏览器方面，该库不支持 IE，仅保证支持 Edge、Firefox、Chrome、Safari 等现代浏览器最新的 2 个版本，其他版本未经过严格测试^[6]。

由于采用 CSS-in-JS，在服务端渲染场景下需要额外配置才能把样式正确注入，否则输出的页面可能出现无样式内容，且服务端产物中可能包含较多内联样式块^[2][7]。部分组件在服务端渲染下存在已知问题，官方文档列出了 n-scrollbar、n-anchor、n-avatar-group、n-watermark、n-affix、n-transfer 等需要规避的组件^[8]。此外，其响应式网格依赖浏览器环境计算布局，在服务端渲染时容易产生水合不一致的警告^[9]。

参见

• Vue 3 —— Naive UI 所依赖的前端框架，组件库仅支持该版本。

• TypeScript —— Naive UI 全量使用的编程语言，其类型系统支撑了主题的类型安全。

• tree shaking —— 打包优化机制，Naive UI 的组件均支持按需打包。

• CSS-in-JS —— Naive UI 生成样式所采用的技术路线。

• 服务端渲染 —— Naive UI 需要额外配置才能适配的渲染方式。

• npm —— 分发 Naive UI 的包管理平台。