open-index/open-npm huggingface dataset:
npm package: @jrj444/cherry-ui
Description: 一个Vue UI 组件库
Author: Jiang Ruijian
Latest version: 0.0.3

<p align="center">
<a href="https://jrj444.github.io/cherry/"><img src="public/cherry.png"></a>
</p>
<p align="center">
<img alt="NPM" src="https://img.shields.io/npm/l/@jrj444/cherry-ui">
<img alt="npm" src="https://img.shields.io/npm/v/@jrj444/cherry-ui">
<img alt="GitHub top language" src="https://img.shields.io/github/languages/top/jrj444/cherry">
</p>

### 介绍

这是一个我在学习 Vue 的过程中写的一个 UI 组件框架，目的在于提高自己对 Vue 的理解与运用。

全部的组件还是比较简单的，造轮子是一种很好的学习方式，希望对你有所帮助。

### 安装

推荐使用 npm 或 yarn 的方式进行开发

```shell script
npm install @jrj444/cherry-ui
```

或

```shell script
yarn add @jrj444/cherry-ui
```

### 快速上手

在 `main.js` 中按需引入组件，比如 Button

```js
import Vue from 'vue';
import {Button} from '@jrj444/cherry-ui';
import '@jrj444/cherry-ui/dist/cherry.css'
import App from './App.vue';

Vue.component("ch-button", Button);

new Vue({
  el: '#app',
  render: h => h(App)
});
```

这样就可以以 `<ch-button>` 的标签形式，在项目中使用 Button 组件啦

需要注意的是，样式文件 `cherry.css` 需要单独引入

### 文档

[Cherry UI 官网](https://jrj444.github.io/cherry/)
npm package: @jrjzq/webease-ui
Description: 基于 Vue3 的轻量级、易用、可定制的 UI 组件库
Author: JRJZQ Team
Latest version: 1.0.6

# WEBEASE UI

基于 Vue3 的轻量级、易用、可定制的 UI 组件库。

## ✨ 特性

- 🚀 **轻量高效**: 打包体积小，按需引入灵活
- 💪 **TypeScript**: 完整的类型定义支持
- 🎨 **主题定制**: 基于 CSS 变量，轻松定制主题
- 📱 **多端适配**: PC 端和移动端响应式支持
- ♿ **无障碍**: 遵循 WCAG 2.1 AA 标准
- 🧪 **测试覆盖**: 完善的单元测试

## 📖 文档

完整的文档和组件示例请访问 [WebEase UI 官方文档](https://webease.jrjzq.com.cn/ui/)


## 📦 安装

```bash
npm install @jrjzq/webease-ui
# or
yarn add @jrjzq/webease-ui
# or
pnpm add @jrjzq/webease-ui
```

## 🔨 使用

### 全局引入

```typescript
import { createApp } from 'vue'
import WebEaseUI from '@jrjzq/webease-ui'
import '@jrjzq/webease-ui/dist/style.css'
import App from './App.vue'

const app = createApp(App)
app.use(WebEaseUI)
app.mount('#app')
```

### 按需引入

```vue
<template>
  <we-button type="primary">点击按钮</we-button>
</template>

<script setup lang="ts">
import { WeButton } from '@jrjzq/webease-ui'
import '@jrjzq/webease-ui/dist/style.css'
</script>
```

## 📚 组件列表

### 基础组件
- Button 按钮
- Icon 图标
- Typography 排版
- Divider 分隔线
- Space 间距

### 表单组件
- Input 输入框
- Select 选择器
- Checkbox 复选框
- Radio 单选框
- Switch 开关
- Slider 滑块
- DatePicker 日期选择器
- Upload 上传
- Form 表单

### 导航组件
- Navbar 导航栏
- Menu 菜单
- Pagination 分页
- Breadcrumb 面包屑

### 反馈组件
- Modal 弹窗
- Toast 提示
- Loading 加载
- Confirm 确认框
- Notification 通知
- Tooltip 工具提示

### 交互组件
- Drawer 抽屉
- Carousel 轮播图
- Marquee 走马灯
- Tabs 选项卡

### 布局组件
- Layout 布局容器
- Grid 栅格
- Card 卡片

### 数据展示组件
- Avatar 头像
- Badge 徽章
- Calendar 日历
- Collapse 折叠面板
- Empty 空状态
- Image 图片
- InfiniteScroll 无限滚动
- Table 表格
- Timeline 时间线
- Tag 标签

### 其他组件
- Progress 进度条
- Watermark 水印

## 🎨 主题定制

通过 CSS 变量自定义主题：

```css
:root {
  --color-primary: #409eff;
  --color-success: #67c23a;
  --color-warning: #e6a23c;
  --color-danger: #f56c6c;
  /* 更多变量... */
}
```

详见 [主题定制指南](webease-ui-docs/docs/guide/theming.md)

## 🤝 贡献

欢迎贡献代码！请查看 [贡献指南](CONTRIBUTING.md)。

## 📄 License

[MIT](LICENSE)