xhl-degal

前端通用组件库和工具方法，基于 Vue 3 + TypeScript + Vite 构建。

简介

xhl-degal 是一个轻量级的前端通用组件库和工具方法集合，提供了常用的 Vue 3 组件和实用的工具函数，帮助开发者快速构建应用。

特性

• 🚀 基于 Vue 3 + TypeScript 开发，提供完整的类型支持
• 📦 开箱即用的通用组件和工具方法
• 🎨 支持按需引入，减小打包体积
• 🔧 完善的构建配置，支持 ES Module 和 CommonJS
• ✅ 内置 ESLint 代码检查

安装

npm install xhl-degal
# 或
yarn add xhl-degal
# 或
pnpm add xhl-degal

使用

完整引入

import { Button, Input, Card } from 'xhl-degal';
import { formatDate, debounce, deepClone } from 'xhl-degal';

按需引入

// 组件
import { Button } from 'xhl-degal/dist/components';

// 工具方法
import { formatDate } from 'xhl-degal/dist/utils';

工具方法

通用工具 (common)

• generateRandomString(length) - 生成随机字符串
• deepClone(obj) - 深拷贝对象
• debounce(func, wait) - 防抖函数
• throttle(func, limit) - 节流函数

import { generateRandomString, deepClone, debounce, throttle } from 'xhl-degal';

// 生成随机字符串
const randomStr = generateRandomString(8);

// 深拷贝
const clonedObj = deepClone(originalObj);

// 防抖
const debouncedFn = debounce(() => {
  console.log('执行操作');
}, 300);

// 节流
const throttledFn = throttle(() => {
  console.log('执行操作');
}, 1000);

存储工具 (storage)

• setLocalStorage(key, value) - 设置本地存储
• getLocalStorage(key) - 获取本地存储
• removeLocalStorage(key) - 删除本地存储
• clearLocalStorage() - 清空本地存储
• setSessionStorage(key, value) - 设置会话存储
• getSessionStorage(key) - 获取会话存储

import { setLocalStorage, getLocalStorage, removeLocalStorage } from 'xhl-degal';

// 设置本地存储
setLocalStorage('user', { name: '张三', age: 25 });

// 获取本地存储
const user = getLocalStorage<{ name: string; age: number }>('user');

// 删除本地存储
removeLocalStorage('user');

日期工具 (date)

• formatDate(date, format) - 格式化日期
• getDaysDifference(startDate, endDate) - 获取日期差
• isToday(date) - 判断是否是今天
• getRelativeTime(date) - 获取相对时间

import { formatDate, getDaysDifference, isToday, getRelativeTime } from 'xhl-degal';

// 格式化日期
const formattedDate = formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss');

// 获取日期差
const days = getDaysDifference('2024-01-01', '2024-01-10');

// 判断是否是今天
const today = isToday(new Date());

// 获取相对时间
const relativeTime = getRelativeTime(new Date());

验证工具 (validate)

• isValidEmail(email) - 验证邮箱格式
• isValidPhone(phone) - 验证手机号码格式
• isValidIdCard(idCard) - 验证身份证号码格式
• getPasswordStrength(password) - 获取密码强度
• isValidUrl(url) - 验证 URL 格式

import { isValidEmail, isValidPhone, isValidIdCard, getPasswordStrength, isValidUrl } from 'xhl-degal';

// 验证邮箱
const validEmail = isValidEmail('[email protected]');

// 验证手机号
const validPhone = isValidPhone('13800138000');

// 验证身份证
const validIdCard = isValidIdCard('110101199001011234');

// 获取密码强度
const strength = getPasswordStrength('Password123!');

// 验证 URL
const validUrl = isValidUrl('https://example.com');

项目结构

xhl-degal/
├── dist/                    # 构建输出目录
│   ├── components/          # 组件类型定义
│   ├── utils/               # 工具方法类型定义
│   ├── index.cjs.js         # CommonJS 格式
│   ├── index.es.js          # ES Module 格式
│   └── index.d.ts           # TypeScript 类型定义
├── src/                     # 源代码目录
│   ├── components/          # 组件目录
│   │   ├── Button/          # 按钮组件
│   │   ├── Input/           # 输入框组件
│   │   ├── Card/            # 卡片组件
│   │   └── index.ts         # 组件导出
│   ├── utils/               # 工具方法目录
│   │   ├── common.ts        # 通用工具
│   │   ├── storage.ts       # 存储工具
│   │   ├── date.ts          # 日期工具
│   │   ├── validate.ts      # 验证工具
│   │   └── index.ts         # 工具导出
│   ├── index.ts             # 主入口文件
│   └── vue-shims.d.ts       # Vue 类型声明
├── .gitignore               # Git 忽略文件
├── package.json             # 项目配置
├── tsconfig.json            # TypeScript 配置
├── tsconfig.node.json       # Node TypeScript 配置
├── vite.config.ts           # Vite 配置
└── README.md                # 项目说明文档

开发

安装依赖

npm install

开发模式

npm run dev

构建

npm run build

代码检查

npm run lint

预览

npm run preview

发布流程

1. 更新版本号

在 package.json 中更新版本号：

{
  "version": "1.0.2"
}

2. 运行构建

npm run build

3. 运行代码检查

npm run lint

确保没有错误和警告。

4. 登录 npm（如果未登录）

npm login

输入你的 npm 用户名、密码和邮箱。

5. 发布到 npm

npm publish

6. 验证发布

发布成功后，可以在 npm 官网查看：https://www.npmjs.com/package/xhl-degal

发布注意事项

• 确保 package.json 中的 files 字段包含 dist 目录
• 确保 dist 目录已正确构建
• 确保版本号符合语义化版本规范（Semantic Versioning）
• 建议在发布前先测试构建产物是否正常工作

技术栈

• Vue 3 - 渐进式 JavaScript 框架
• TypeScript - JavaScript 的超集，提供类型安全
• Vite - 下一代前端构建工具
• ESLint - JavaScript 代码检查工具

依赖

Peer Dependencies

• vue: ^3.3.0

许可证

MIT

作者

xhl

贡献

欢迎提交 Issue 和 Pull Request！