open-index/open-npm huggingface dataset:
npm package: @rhino-design/vue
Description: 全面开箱即用的高质量 Vue 3 组件库，覆盖绝大部分业务场景，并支持可选安装的独立 icons 包。
Latest version: 0.2.9

[English](./README.md)

<div align="center">
  <h1>Rhino Design Vue</h1>
  <p>面向现代业务场景的 Vue 3 组件库。</p>
  <p>
    <a href="http://doc.xitask.com">文档站</a>
    ·
    <a href="https://github.com/Yuppiezero/Rhino-Design">GitHub</a>
    ·
    <a href="https://github.com/Yuppiezero/Rhino-Design/issues">问题反馈</a>
  </p>
  <p>
    <img src="https://img.shields.io/badge/Vue-3.4%2B-42b883" alt="Vue 3.4+" />
    <img src="https://img.shields.io/badge/TypeScript-friendly-3178c6" alt="TypeScript friendly" />
    <img src="https://img.shields.io/badge/Theme-light%20%7C%20dark%20%7C%20auto-111827" alt="Theme support" />
    <img src="https://img.shields.io/badge/License-MIT-0f766e" alt="MIT License" />
  </p>
</div>

Rhino Design Vue 是一个面向业务开发的高质量 Vue 3 组件库，强调开箱即用、类型友好和实际落地能力。它内置主题能力、国际化支持，并提供可选安装的独立图标包。

## 文档站点：
```bash
http://doc.xitask.com
```

## 特性

- 提供 `80+` 个 Vue 3 组件与示例，覆盖大部分常见业务场景。
- 基于 TypeScript 编写，组件 API 与服务式 API 都具备良好的类型支持。
- 内置 `zh-CN`、`en-US`、`ja-JP`、`zh-TW`、`pt-PT`、`es-ES`、`id-ID`、`fr-FR`、`da-DK`、`de-DE`、`ko-KR`、`it-IT`、`ms-MY`、`nl-NL`、`th-TH`、`vi-VN`、`km-KH`、`ar-EG`、`ru-RU` 多语言能力。
- 内置 `light`、`dark`、`auto` 三种主题模式。
- 提供 `Message`、`Notification`、`Modal`、`Drawer` 等服务式调用能力。
- 提供可选的 `@rhino-design/icons` 独立图标包，支持更完整的图标能力和按需加载。
- 提供完整 CSS 产物，同时支持 Less 与 SCSS 样式入口。

## 安装

```bash
npm install @rhino-design/vue
```

如需完整图标能力，可额外安装：

```bash
npm install @rhino-design/icons
```

## 使用

```ts
import { createApp } from 'vue';
import App from './App.vue';
import RhinoDesignVue from '@rhino-design/vue';
import '@rhino-design/vue/dist/style.css';

createApp(App)
  .use(RhinoDesignVue)
  .mount('#app');
```

也可以在安装时指定语言：

```ts
import { createApp } from 'vue';
import App from './App.vue';
import RhinoDesignVue from '@rhino-design/vue';
import '@rhino-design/vue/dist/style.css';

createApp(App)
  .use(RhinoDesignVue, {
    locale: 'zh-CN',
  })
  .mount('#app');
```

## 主题

```ts
import { setTheme } from '@rhino-design/vue';

setTheme('dark');
```

支持的主题值为 `light`、`dark`、`auto`。

## 图标包

如果你需要更完整的图标集合，可以单独安装并注册：

```ts
import { createApp } from 'vue';
import App from './App.vue';
import RhinoDesignVue from '@rhino-design/vue';
import { RhinoDesignIcons } from '@rhino-design/icons';

createApp(App)
  .use(RhinoDesignVue)
  .use(RhinoDesignIcons)
  .mount('#app');
```

## 样式入口

```ts
import '@rhino-design/vue/dist/style.css';
// 或
import '@rhino-design/vue/style.css';
import '@rhino-design/vue/style.less';
import '@rhino-design/vue/style.scss';
```

## 组件亮点

Rhino Design Vue 当前已经覆盖 `Button`、`Table`、`Form`、`Input`、`Modal`、`Segmented`、`Tag` 等基础与业务组件，并提供 `Cropper`、`RichTextEditor`、`ChatInput`、`QRCode` 等更贴近业务场景的能力。

## License

[MIT](./LICENSE)