English

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

文档站点：

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 样式入口。

安装

npm install @rhino-design/vue

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

npm install @rhino-design/icons

使用

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');

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

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');

主题

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

setTheme('dark');

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

图标包

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

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');

样式入口

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