一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

介绍

HeyUI 是一套基于 Vue2.0 的开源 UI 组件库,主要服务于一些中后台产品。HeyUI提供的是一整套解决方案,所有的组件提供全局的可配置模式。集成主流的国际化方案以及更加人性化的还支持VSCode扩展。真正的数据驱动全局的配置模式数据字典化

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

官网

文档:https://www.heyui.top/
Gitee:https://gitee.com/heyui/heyui
Github:https://github.com/heyui/heyui

安装

推荐使用 npm 的方式安装。

npm install heyui

示例

通过引用HeyUI,我们可以简单的写出一个应用界面。

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui
<template>  <div>    <Button @click.native="visible = true">Hi!</Button>    <Modal v-model="visible">      <div>Hello HeyUI!</div>    </Modal>  </div></template><script>export default {  data() {    return {      visible: false    };  }};</script>

支持环境

现代浏览器和 IE9 及以上。HeyUI支持 Vue.js 2.x版本

组件预览

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

以下组件预览不是所有都进行了截图,只是大致将一些组件展示出来:Grid 栅格

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Layout 布局

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Color 色彩

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Icon 图标

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Extend 扩展

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Button 按钮

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui
一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Form

Input 输入框

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Radio 单选

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Checkbox 多选

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Select 下拉选择

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

AutoComplete 模糊匹配

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

NumberInput 数字输入

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

TagInput 标签输入框

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

HSwitch 开关

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Slider 滑块

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Rate 评分

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

SwitchList 选项切换

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Form 表单

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Date

DatePicker 日期选择

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

TimePicker 时间选择

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

DatetimePicker 日期时间选择

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

DateRangePicker 日期范围选择

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

DateFullRangePicker 超级日期

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Data Plugin

Search 搜索框

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Uploader 上传

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Tree 树

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

TreePicker 树选择

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Category 分类选择

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

CategoryPicker 选择

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Transfer 穿梭框

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

ColorPicker 颜色选择器

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Navigation

Breadcrumb 面包屑

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Menu 菜单

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Pagination 分页

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Tabs 标签页

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Steps 步骤条

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

DropdownMenu 下拉菜单

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

DropdownCustom 自定义下拉

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Data View

Table 表格

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Avatar 头像信息

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Badge 微标数

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Carousel 走马灯

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Collapse 折叠面板

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Circle 进度环

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Progress 进度条

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Loading 加载中

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

LoadingBar 加载进度条

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Skeleton 加载占位图

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Timeline 时间轴

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

ImagePreview 图片预览

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

TextEllipsis 超出文本省略

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Message

Message 提示

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Notice 通知

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Modal 弹出框

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Tooltip 气泡提示

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Poptip 确定提示

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Plugin

Clipboard 复制剪切板

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Affix 图钉

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

BackTop 返回顶部

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

View

Panel 面板

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

Tag 标签

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

集成解决发难Heyui-admin

https://admin.heyui.top/
一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui
一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui
一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui
一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui
一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui
一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

在线运行

一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui

总结

Heyui是一个高质量的组件一点也不为过,不仅如此,其还集成了一套适用于大多数中后台的完整集成解决方案,上手很快,而且组件非常丰富,大多数业务场景都能覆盖,非常值得尝试,enjoy it!

版权声明:飞鱼 发表于 2020-07-19 11:22:05。
转载请注明:一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui | HelloWorld.La

暂无评论

暂无评论...