zg-ui-kit 组件库

✨ 核心特性

• 🎯 超轻量级 - 采用 ES Module 格式，Tree-shaking 友好，打包体积小，性能更优
• 🚀 开箱即用 - 基于 Element UI 深度封装，零配置快速集成到现有项目
• 📦 全量引入 - 支持一键引入所有组件和工具，简化项目配置
• 🎨 企业级 - 专为企业级应用场景设计，提供丰富的业务组件
• 🔧 工具齐全 - 内置常用工具函数、样式类、过滤器和业务常量
• 💡 无缝集成 - 与现有 Vue2 + Element UI 项目完美兼容

📦 快速安装

# 配置私有 npm 源
npm set registry http://npm.zhaogang.com

# 直接安装依赖包
npm install zg-ui-kit --registry http://npm.zhaogang.com --legacy-peer-deps

🚀 快速开始

import ZgUiKit from 'zg-ui-kit'
import 'zg-ui-kit/es/theme-chalk/index.css'

// 注册请求方法和store
// ZgUiKit.register({
//   request: {
//     get,
//     post
//   },
//   store: {}
// })

Vue.use(ZgUiKit)

// 使用工具函数库
import ZUtils from 'zg-ui-kit/src/utils/index.js'

📚 组件列表

| 组件名 | 说明 | | ------------ | ------------ | | ZIcon | SVG 图标组件 | | ZTag | 标签组件 | | ZImageUpload | 图片上传组件 |

📚 工具函数

| 方法名 | 说明 | | ------------------- | -------------------- | | getCurrentTimestamp | 获取当前时间戳 | | getTimestamp | 获取指定日期的时间戳 | | getToken | 获取 token | | getTenantId | 获取租户 id | | getUid | 获取用户 id | | idCardRegex | 身份证正则 | | phoneRegex | 手机号正则 |

📚 样式类

| class 名 | 说明 | | ------------------------ | ---------------------------------- | | z-m-{size} | 外边距 {size} | | z-p-{size} | 内边距 {size} | | z-font-{size} | 字体大小 {size} | | z-flex-center | 水平垂直居中 | | z-w-{size} | 宽度 {size} | | z-h-{size} | 高度 {size} | | z-w-full | 宽度 100% | | z-h-full | 高度 100% | | z-pointer | 鼠标指针 | | z-bold | 加粗 | | z-required | 必填项 | | z-color-primary | 主色调 | | z-color-success | 成功色调 | | z-color-warning | 警告色调 | | z-color-danger | 危险色调 | | z-color-info | 信息色调 | | z-color-text-primary | 文本主色调 | | z-color-text-regular | 文本常规色调 | | z-color-text-secondary | 文本次要色调 | | z-color-text-placeholder | 文本占位符色调 | | 颜色变量 | 见 src/assets/styles/variable.scss |

📚 过滤器

| 过滤器名 | 说明 | | ------------- | ------------ | | ZFormatDate | 时间戳格式化 | | ZFormatMoney | 金额格式化 | | ZFormatWeight | 重量格式化 |

📚 常量

| 常量名 | 说明 | | ------ | ---- |

📚 store 传入

| 方法名 | 说明 | | ------------------ | ------------ | | getPrecisionConfig | 获取精度配置 |

📚 微信小程序

| 方法名 | 说明 | | ------------ | --------------------- | | wxRequest | 封装 post 请求 | | AMAP_KEY | 高德地图 web 服务 key | | isTest | 是否为测试环境 | | isProduction | 是否为正式环境 |

🛠️ 开发构建

# 生成入口文件src/index.js
npm run build:entry

# 构建组件库，生成es目录
npm run build

# 清理构建文件，删除es目录
npm run clean

📝 提交规范

| 类型 | 说明 | 示例 | | ------- | -------- | ----------------- | | feat | 新增功能 | feat: 新增功能 | | fix | 修复问题 | fix: 修复问题 | | docs | 更新文档 | docs: 更新文档 | | perf | 代码优化 | perf: 代码优化 | | style | 样式调整 | style: 样式调整 |

📁 项目结构

zg-ui-kit/
├── packages/              # 📦 组件源码
│   ├── ZIcon/            #   图标组件
│   ├── ZTag/             #   标签组件
│   └── ZImageUpload/     #   图片上传组件
├── src/                  # 🔧 核心代码
│   ├── index.js          #   组件库主入口
│   ├── assets/           #   静态资源
│   ├── utils/            #   工具函数
│   └── filters/          #   过滤器
├── examples/             # 🎨 开发示例
├── build/                # ⚙️ 构建配置
│   ├── webpack.base.js   #   基础配置
│   ├── webpack.dev.js    #   开发环境
│   ├── webpack.es.js     #   ES模块构建
│   └── bin/              #   构建脚本
├── es/                   # 📤 构建输出
├── .vscode/              # 🔧 编辑器配置
├── package.json          # 📋 项目配置
├── .babelrc              # 🔄 编译配置
├── .npmrc                # 📦 npm配置
└── README.md             # 📖 说明文档

注意

• 该项目 package.json 中的依赖包版本尽量与胖猫云项目保持一致，这样不会重复安装