NUR

主题

介绍 ​

NUR 是一套基于 Vue 3 + TypeScript 构建的企业级 UI 组件库，提供 33 个高质量组件，覆盖按钮、表单、数据展示、导航、反馈等常见业务场景。

设计理念 ​

NUR 的设计围绕三个核心原则：

  • 一致性：统一的视觉语言和交互模式，所有组件共享相同的设计 token 系统，确保页面整体协调。
  • 开箱即用：提供合理的默认配置，简单场景几乎不需要额外设置即可使用；同时通过 props、slots 和 CSS 变量提供深度定制能力。
  • 轻量高效：每个组件独立注册，原生支持 tree-shaking；运行时零外部依赖，仅基于 Vue 3 标准 API。

特性 ​

主题系统 ​

基于 CSS Variables（CSS 自定义属性）构建的动态主题系统，涵盖颜色、字体、间距、圆角、阴影五大类 token。只需覆盖几个变量即可实现全局风格切换，无需重写任何组件样式。

css
:root {
  --my-color-primary: #ff6b35;
  --my-border-radius-base: 8px;
  --my-font-size-default: 16px;
}

TypeScript 支持 ​

所有组件用 TypeScript 编写，导出完整的 Props、Emits、Slots 类型定义。在 VSCode 等编辑器中获得完整的智能提示、自动补全和类型检查。

ts
import type { ButtonProps, FormRule } from '@nurdunui/nur-ui'

按需引入 ​

每个组件都通过 withInstall 注册为独立的 Vue 插件，可以整体导入或按需引入：

ts
// 按需引入，仅打包实际使用的组件
import { MyButton, MyInput, MyDialog } from '@nurdunui/nur-ui'

全局配置 ​

通过 app.use() 一次性设置全局尺寸、层级和语言：

ts
app.use(MyUI, {
  size: 'small',    // 'large' | 'default' | 'small'
  zIndex: 3000,     // 弹窗 z-index 基数
  locale: 'zh-CN',  // 'zh-CN' | 'en-US'
})

组合式 Hooks ​

提供可复用的组合式函数，用于构建自定义组件时保持与 NUR 一致的 BEM 命名和尺寸体系：

  • useNamespace(block) — 生成 BEM 命名函数
  • useSize() — 获取全局尺寸配置
  • useDisabled() — 获取禁用状态
  • useId() — 生成唯一 ID

无障碍 ​

所有交互组件遵循 WAI-ARIA 规范，支持键盘导航和屏幕阅读器。

组件总览 ​

分类组件
通用Button、Icon
表单Input、Select、Checkbox、Radio、Switch、Form、InputNumber、DatePicker、TimePicker、Upload
数据展示Table、TablePlus、Pagination、Tree、Cascader、Transfer、Steps、Timeline、Card、Collapse
导航NavMenu、Breadcrumb、Tabs、Dropdown
反馈Dialog、Message、Tooltip、Popover、Alert
布局Surface、Accordion

浏览器支持 ​

ChromeFirefoxSafariEdge
latestlatestlatestlatest