# wheel-ui

**Repository Path**: romank/wheel-ui

## Basic Information

- **Project Name**: wheel-ui
- **Description**: 一个基于 Vue 3 开发的组件库
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: http://romank.gitee.io/wheel-ui
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-31
- **Last Updated**: 2022-09-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, vue3, ui组件库

## README

<div align="center">
    <a href="http://romank.gitee.io/wheel-ui">
        <img class="logo" width="220" src="https://www.yiyuen.com/e/file/view/344218" />
    </a>
    <h3>
        Wheel UI ， 一个基于 Vue 3 开发的桌面端组件库
    </h3>
</div>
<br>
<p align="center">
    <a href="https://www.npmjs.com/package/gulu-for-ui" target="_blank">
        <img class="tag" src="https://img.shields.io/npm/v/gulu-for-ui.svg?style=badge" />
    </a>
    <a href="https://npmcharts.com/compare/gulu-for-ui,test-gulu-ui-1?minimal=true" target="_blank">
        <img class="tag" src="https://img.shields.io/npm/dm/gulu-for-ui.svg" />
    </a>
    <a href="https://romank.gitee.io/wheel-ui" target="_blank">
        <img class="tag" src="https://img.shields.io/badge/platform-web-61B5FF.svg"/>
    </a>
    <a href="https://romank.gitee.io/wheel-ui" target="_blank">
        <img class="tag" src="https://img.shields.io/badge/license-MIT-red.svg"/>
    </a>
</p>

<br>

<a href="http://romank.gitee.io/wheel-ui" target="_blank">官网</a>　　　<a href="https://www.npmjs.com/package/gulu-for-ui" target="_blank">npm地址</a>

## 项目特点

 1. 使用 Vue 3 的 Composition API 
 2. 提供完善的文档和组件示例
 3. 组件设计简洁直观，提供友好的 API，可灵活的使用组件

<br>

## 最新版本 

<a href="https://www.npmjs.com/package/gulu-for-ui" target="_blank">
  <img class="tag" src="https://img.shields.io/npm/v/gulu-for-ui.svg?style=badge" />
</a>
    
<br><br>

## 浏览器支持

与 Vue 3 一致，不再支持IE浏览器
    
| ![谷歌图标](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/68f080f5697d4470a0b38acb00bbdbbc~tplv-k3u1fbpfcp-zoom-1.image) | ![火狐图标](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/88b4fc41c4d845688190815af11d5dcf~tplv-k3u1fbpfcp-zoom-1.image) | ![Edge图标](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/138020ec29e44ae98cb8ec0c08583a00~tplv-k3u1fbpfcp-zoom-1.image) | ![Safari图标](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dd575601244848bdb19784c3f9e2f6e3~tplv-k3u1fbpfcp-zoom-1.image) |
| :-----: | :----: | :----: | :----: |
| Chrome ≥ 64 | Firefox ≥ 78 | Edge ≥ 79 |Safari ≥ 12
 
<br>

## 有哪些轮子

<details>
  <summary>目前的组件列表 (46个)</summary>
  <div style='margin-top: 1em;'>
    <div class='item'>
      <p>Basic 基础组件</p>
      <ol> 
        <li>Icon 图标</li>
        <li>Button 按钮</li>
        <li>Layout 布局</li>
        <li>Grid 栅格</li>
      </ol>
    </div>
    <div class='item'>
      <p>Form 表单组件</p>
      <ol> 
        <li>Radio 单选按钮</li>
        <li>Checkbox 多选框</li>
        <li>Switch 开关</li>
        <li>Input 输入框</li>
        <li>InputNumber 计数器</li>
        <li>Rate 评分</li>
        <li>Slider 滑块</li>
        <li>Select 下拉选择</li>
        <li>TimeSelect 时间选择</li>
      </ol>
    </div>
    <div class='item'>
        <p>Data 数据展示</p>
        <ol> 
          <li>Avatar 头像</li>
          <li>Badge 标记</li>
          <li>Carousel 轮播图</li>
          <li>Card 卡片</li>
          <li>Collapse 折叠面板</li>
          <li>Tag 标签</li>
          <li>Timeline 时间线</li>
          <li>Progress 进度条</li>
          <li>Image 图片</li>
          <li>InfiniteScroll 无限滚动</li>
          <li>Empty 空状态</li>
          <li>Result 结果</li>
          <li>Descriptions 描述列表</li>
          <li>Pagination 分页</li>
          <li>Statistic 数值显示</li>
        </ol>
    </div>
    <div class='item'>
        <p>Navigation 导航</p>
        <ol> 
          <li>Affix 图钉</li>
          <li>Dropdown 下拉菜单</li>
          <li>Breadcrumb 面包屑</li>
          <li>PageHeader 页头</li>
          <li>Tabs 标签页</li>
          <li>Steps 步骤条</li>
          <li>Skeleton 骨架屏</li>
        </ol>
    </div>
    <div class='item'>
        <p>Feedback 反馈组件</p>
        <ol> 
          <li>Alert 警告</li>
          <li>Dialog 抽屉</li>
          <li>Drawer 弹窗</li>
          <li>Tooltip 文字提示</li>
          <li>Loading 加载</li>
          <li>Message 消息提示</li>
        </ol>
    </div>
    <div class='item'>
        <p>Others 其他</p>
        <ol> 
          <li>BackTop 返回顶部</li>
          <li>Divider 分割线</li>
          <li>GitHubCorner 角标</li>
          <li>Transition 过渡动画</li>
          <li>Split 面板分割</li>
        </ol>
    </div>
  </div>
</details>

<br>

注意：这些是目前已完成的组件，如有其他组件，后续会补充。

<br>

## 视觉稿

本 UI 框架借鉴了一些成熟 UI 框架（如 iView、Element UI 和 Ant Design）的外观。

<br>

## 结语

Wheel UI尚未完工，组件和文档都在不断的完善中，个别组件可能会存在一些问题或体验不友好，请不要在生产环境中使用本 UI 框架

为什要选择造组件库呢？对我来说是一个机遇与挑战，其实更多的是抽离业务组件，实现复用，提高以及总结自己的前端技术

但是往往现实是残酷的，一个优秀的组件库是非常庞大具有难度的，过程中会出现各种难以琢磨的问题，但我会尽自己努力，一步一个脚印，尽可能把本组件库给完善好

> 如使用本组件库遇到疑问或者发现 Bug，可以通过 [Gitee Issue](https://gitee.com/romank/wheel-ui/issues) 进行反馈

PS：感谢您还花宝贵的时间来看我的作品 🙂