g-ui-web

可视化组件库
34,206
vue vite vue3 components vitepress element-plus element-ui 二次封装组件 封装组件 vite3 g-ui g-ui-web
Install
npm install g-ui-web
Latest Version:1.4.76
Vue:3
License:MIT
Last Updated:Sep 1, 2026
Links: Repository  ·  npm
Maintainer: ivapor

快速上手

g-ui-web 基于vue3 + vite5 + typeScript5 + Element-plus + Echarts5 封装的标准UI组件。

安装

yarn add g-ui-web -S
或者
npm install g-ui-web -S

全局使用

前提条件：使用项目必须全局注册 Element-plus 组件库
// main.ts
import { createApp } from "vue"
import App from "./App.vue"
import ElementPlus from "element-plus"
import "element-plus/dist/index.css"
// element-plus图标
import * as ElementPlusIconsVue from "@element-plus/icons-vue"
import GuiWeb from "g-ui-web"
import "g-ui-web/lib/style.css"
const app = createApp(App)
// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
// 注册ElementPlus
app.use(ElementPlus)
// 注册GuiWeb
app.use(GuiWeb)
app.mount("#app")

按需引入

// 在main.ts中按下引入
import 'g-ui-web/lib/style.css'
// 单个.vue文件引入
<script setup lang="ts">
  import {GButton} from "g-ui-web"
</script>

组件清单

图表类
组件名 说明
GChart 基础图表
GBar 柱状图
GLine 折线图
GFoldingPillar 折柱图
GPie 饼图
GRadar 雷达图
GFunnel 漏斗图
GMap 地图
baiduMap类
组件名 说明
GHeatMap 热力图
非标类
组件名 说明
GText 文字（指标）
GRingText 文字（环图/进度条）
GBox 内容块
GRanking 排行榜
GReserve 预实对比（+达成率）
GMilepost 项目/分期计划/里程碑
GNodeachievement 节点达成
GGridTable 常用报表
标准UI类（Element-plus）
组件名 说明
GRow 布局
GButton 按钮
GInput 输入框
GRadio 单选框
GCheckbox 多选框
GDatePicker 日期选择器
GForm 表单
GSwitch 开关
GUpload 上传
GCard 卡片
GCarousel 跑马灯
GSelect 选择器
GCascader 级联选择器
GPagination 分页
GProgress 进度条
GTable 表格
GTag 标签
GTree 树形控件
GTreeSelect 树形选择
GTabs 标签页
GDialog 对话框
GTooltip 文字提示
GWatermark 水印

函数清单

函数名 说明 参数
setTheme 设置主题 theme主题名称，isDark是否暗黑主题
Local window.localStorage 浏览器永久缓存 set 设置永久缓存，get 获取永久缓存，remove 移除永久缓存，clear 移除全部永久缓存
Session window.sessionStorage 浏览器临时缓存 set 设置临时缓存，get 获取临时缓存，remove 移除临时缓存，clear 移除全部临时缓存

Related Packages

y-admin-ui

y-admin-ui 基于Element-plus二次封装基础组件文档

9,873
components element-plus element-ui vite vite3 vitepress vue vue3 二次封装组件 封装组件
zzfund-ui

Vue3 中基于zzfund-ui-base二次封装基础组件文档

1,862
components element-plus element-ui vite vite3 vitepress vue vue3 二次封装组件 封装组件 +1
jnf-ui

基于 vue3+ ts+ Element-plus 二次封装组件

3,717
components element-plus element-ui vite vite3 vitepress vue vue3 二次封装组件 封装组件 +2
5irich-test

Vue3 中基于Element-plus二次封装基础组件文档

2,975
components element-plus element-ui vite vite3 vitepress vue vue3 二次封装组件 封装组件 +2
fengmao-ui

Vue3 中基于Element-plus二次封装基础组件文档

2,372
components element-plus element-ui vite vite3 vitepress vue vue3 二次封装组件 封装组件 +3

Version History

Version Released License
1.4.76 MIT
1.4.75 MIT
1.4.74 MIT
1.4.73 MIT
1.4.72 MIT
Pre-releases (2)
Version Released License
0.11.0-test.3 MIT
0.11.0-test.2 MIT