今天給大家分享一款超優秀的Vue免費開源UI組件庫HEYUI。
heyui 一套基于 vue2.x 構建的UI組件庫，star高達2.2K+。提供 50 多種豐富的組件，支持全局方法及配置、自定義主題、國際化，主要服務于一些中后臺產品。
特性
HeyUI提供的是一整套解決方案，所有的組件提供全局的可配置模式。
- 真正的數據驅動
- 全局的配置模式
- 數據字典化
安裝
$ npm i heyui -S
引入組件
// 在main.js中全局引入
import Vue from "vue"
import HeyUI from "heyui"
require("heyui/themes/index.less")
Vue.use(HeyUI)
// 按需引入組件
import Vue from 'vue';
import { install, Prototypes, Button, DropdownMenu } from 'heyui';
require('../css/module.less');
Vue.use(install, { components: { Button, DropdownMenu }, prototypes: Prototypes });
使用組件
<template>
<div class="heyui-wrap">
<Button color="primary">主色系按鈕</Button>
<Button :text="true">文字按鈕</Button>
<Button :no-border="true">文字按鈕2</Button>
<p><h-switch v-model="check1" :small="true">測試</h-switch></p>
<p><Rate v-model="3.5" show-text></Rate></p>
<Slider v-model="{start: 0, end: 20}" multiple></Slider>
<DatePicker v-model="2020-08-22" :format="YYYY-MM-DD"></DatePicker>
...
</div>
</template>
<script>
export default {
data: function () {
return {};
}
};
</script>
基于HeyUI構建的后臺模板。
http://admin.heyui.top/
針對開發者，提供了vscode工具提示插件。
https://github.com/heyui/heyui-snippets
https://marketplace.visualstudio.com/items?itemName=vvpvvp.heyui-snippets
最后附上鏈接地址
# 文檔地址
https://www.heyui.top/
# 倉庫地址
https://github.com/heyui/heyui
so，就介紹到這里。希望能有所幫助，感興趣的話可以去看下哈~
