# nurdunui

**Repository Path**: official-regiment/nurdunui

## Basic Information

- **Project Name**: nurdunui
- **Description**: vue3的ui组件库
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://nurdunui.zyjyh.top
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-07-29
- **Last Updated**: 2026-07-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, TypeScript, UI

## README

# NUR — Vue 3 + TypeScript UI Component Library
![Static Badge](https://img.shields.io/badge/nurdunui-github-blue)
![Static Badge](https://img.shields.io/badge/nurdunui-gitee-red)
![Static Badge](https://img.shields.io/badge/nurdunui-vue-blue)

<p>
    <a href="https://nurdunui.zyjyh.top/"><strong>📖 在线文档</strong></a> ·
    <a href="https://www.npmjs.com/package/@nurdunui/nur-ui"><strong>📦 npm 包</strong></a>
  </p>

<p align="center">
<pre>
  _   _  ____  _____  
 | \ | |/ __ \|  __ \ 
 |  \| | |  | | |__) |
 | . ` | |  | |  _  / 
 | |\  | |__| | | \ \ 
 |_| \_|\____/|_|  \_\
</pre>
<strong>Vue 3 + TypeScript UI 组件库</strong>
</p>
基于 Vue 3 + TypeScript 的企业级 UI 组件库，提供 **33 个高质量组件**，覆盖按钮、表单、数据展示、导航、反馈等常见业务场景。

## 特性

- **主题定制** — 基于 CSS Variables 的动态换肤系统，支持亮色/暗色主题无缝切换
- **按需加载** — 原生支持 tree-shaking，每个组件独立注册，最小化打包体积
- **TypeScript** — 完整的类型声明，优秀的 IDE 智能提示与类型检查
- **组合式 Hooks** — 提供 `useNamespace`、`useSize` 等 composables，保持一致的 BEM 命名与尺寸体系
- **无障碍** — 遵循 WAI-ARIA 规范，支持键盘导航和屏幕阅读器

## 安装

```bash
pnpm add @nurdunui/nur-ui
```

## 快速上手

### 全局注册

```ts
import { createApp } from 'vue'
import MyUI from '@nurdunui/nur-ui'
import '@nurdunui/nur-ui/dist/style.css'
import App from './App.vue'

const app = createApp(App)

app.use(MyUI, {
  size: 'default',  // 'large' | 'default' | 'small'
  zIndex: 3000,
  locale: 'zh-CN',
})

app.mount('#app')
```

### 按需引入

```vue
<script setup>
import { MyButton, MyInput, MyDialog } from '@nurdunui/nur-ui'
import '@nurdunui/nur-ui/dist/components/style.css'
</script>

<template>
  <MyButton type="primary" @click="visible = true">打开弹窗</MyButton>
  <MyDialog v-model:visible="visible" title="提示">
    <MyInput placeholder="请输入内容" />
  </MyDialog>
</template>
```

### 自定义主题

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

## 组件

| 分类 | 组件 |
|------|------|
| 通用 | Button |
| 表单 | 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, Carousel |

## 本地开发

```bash
# 安装依赖
pnpm install

# 启动 play 调试环境
pnpm dev

# 启动文档站点
pnpm docs:dev

# 构建组件库
pnpm build

# 运行测试
pnpm test
```

## 项目结构

```
my-ui-monorepo/
├── packages/
│   ├── my-ui/          # 组件库核心
│   │   └── src/
│   │       ├── components/   # 33 个组件源码
│   │       ├── hooks/        # 组合式函数
│   │       ├── styles/       # 主题 & 样式 token
│   │       ├── config/       # 全局配置
│   │       └── utils/        # 工具函数
│   ├── docs/           # VitePress 文档站点
│   └── play/           # 本地开发调试环境
├── pnpm-workspace.yaml
└── tsconfig.base.json
```

## 浏览器支持

| Chrome | Firefox | Safari | Edge |
|--------|---------|--------|------|
| latest | latest | latest | latest |

## License

MIT