Chery Lib

一个基于 Vue 3 的轻量级组件库和工具函数库，提供常用的UI组件和实用工具函数。

📦 安装

pnpm add chery-lib

🚀 快速开始

全局注册（推荐）

import { createApp } from 'vue'
import CheryLib from 'chery-lib'
import 'chery-lib/dist/chery-lib.css' // 引入样式文件

const app = createApp(App)
app.use(CheryLib)
app.mount('#app')

按需引入

import { MyButton, MyInput } from 'chery-lib'
import { getToken, setToken } from 'chery-lib'
import 'chery-lib/dist/chery-lib.css' // 引入样式文件

// 在组件中使用
export default {
  components: {
    MyButton,
    MyInput
  },
  methods: {
    handleLogin() {
      setToken('your-token')
    },
    getAuthToken() {
      return getToken()
    }
  }
}

样式引入方式

有多种方式可以引入样式：

// 方式1：直接引入CSS文件
import 'chery-lib/dist/chery-lib.css'

// 方式2：使用package.json中的style字段
import 'chery-lib/style'

// 方式3：在HTML中直接引入
<link rel="stylesheet" href="node_modules/chery-lib/dist/chery-lib.css">

🧩 组件

MyButton 按钮组件

一个简单易用的按钮组件。

基础用法

<template>
  <MyButton msg="点击我" />
</template>

Props

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | msg | String | - | 按钮文本内容 |

MyInput 输入框组件

一个功能完整的输入框组件。

基础用法

<template>
  <MyInput v-model="inputValue" placeholder="请输入内容" />
</template>

<script setup>
import { ref } from 'vue'

const inputValue = ref('')
</script>

Props

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | modelValue | String | - | 双向绑定值 | | placeholder | String | '请输入内容' | 占位符文本 | | type | String | 'text' | 输入类型 | | disabled | Boolean | false | 是否禁用 |

事件

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | update:modelValue | 值更新时触发 | (value: string) | | input | 输入时触发 | (event: Event) | | focus | 聚焦时触发 | (event: Event) | | blur | 失焦时触发 | (event: Event) |

🛠️ 工具函数

Token 管理

提供本地存储中 token 的管理功能。

getToken()

获取存储的 token。

import { getToken } from 'chery-lib'

const token = getToken()
console.log(token) // 返回存储的 token 或 null

setToken(token)

设置 token 到本地存储。

import { setToken } from 'chery-lib'

setToken('your-auth-token')

clearToken()

清除存储的 token。

import { clearToken } from 'chery-lib'

clearToken()

日期格式化

formatDate(date, format)

格式化日期为指定格式。

import { formatDate } from 'chery-lib'

const date = new Date()
const formatted = formatDate(date, 'YYYY-MM-DD HH:mm:ss')
console.log(formatted) // 2024-01-15 14:30:25

验证函数

isValidEmail(email)

验证邮箱格式。

import { isValidEmail } from 'chery-lib'

const isEmail = isValidEmail('[email protected]') // true

isValidPhone(phone)

验证手机号格式（中国大陆）。

import { isValidPhone } from 'chery-lib'

const isPhone = isValidPhone('13800138000') // true

性能优化

debounce(func, delay)

防抖函数。

import { debounce } from 'chery-lib'

const debouncedSearch = debounce((query) => {
  // 搜索逻辑
}, 300)

throttle(func, delay)

节流函数。

import { throttle } from 'chery-lib'

const throttledScroll = throttle(() => {
  // 滚动处理逻辑
}, 100)

数据处理

deepClone(obj)

深拷贝对象。

import { deepClone } from 'chery-lib'

const original = { a: 1, b: { c: 2 } }
const cloned = deepClone(original)

randomString(length)

生成随机字符串。

import { randomString } from 'chery-lib'

const random = randomString(8) // 生成8位随机字符串

文件处理

formatFileSize(bytes)

格式化文件大小。

import { formatFileSize } from 'chery-lib'

const size = formatFileSize(1024 * 1024) // "1 MB"

URL 处理

getUrlParam(name)

获取 URL 参数。

import { getUrlParam } from 'chery-lib'

const id = getUrlParam('id') // 获取 ?id=123 中的 123

setUrlParam(name, value)

设置 URL 参数。

import { setUrlParam } from 'chery-lib'

setUrlParam('page', '2') // 设置 URL 参数

🔧 开发

本地开发

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建库
pnpm build

# 预览构建结果
pnpm preview

项目结构

src/
├── components/          # Vue 组件
│   ├── MyButton.vue    # 按钮组件
│   └── MyInput.vue     # 输入框组件
├── utils/              # 工具函数
│   └── public.ts       # 公共工具函数
├── style.css           # 全局样式文件
├── index.js            # 库入口文件
└── main.js             # 开发环境入口

📦 NPM 发布流程

1. 准备工作

确保你已经注册了 npm 账号，并且项目配置正确：

# 登录 npm
npm login

# 检查当前用户
npm whoami

2. 更新版本号

在发布前，需要更新 package.json 中的版本号：

# 使用 npm version 命令自动更新版本号
npm version patch  # 补丁版本 (0.0.1 -> 0.0.2)
npm version minor  # 次要版本 (0.0.1 -> 0.1.0)
npm version major  # 主要版本 (0.0.1 -> 1.0.0)

3. 构建项目

# 构建生产版本
pnpm build

4. 发布到 npm

# 发布到 npm
npm publish

# 如果是第一次发布，可能需要添加 --access public
npm publish --access public

5. 发布流程检查清单

• [ ] 确保 package.json 中的信息正确（name, version, description, author 等）
• [ ] 确保 main, module, exports 字段指向正确的文件
• [ ] 确保 files 字段包含了需要发布的文件
• [ ] 确保构建后的文件在 dist 目录中
• [ ] 确保 CSS 文件正确生成和导出
• [ ] 测试构建后的文件是否正常工作
• [ ] 更新版本号
• [ ] 构建项目
• [ ] 发布到 npm

6. 自动化发布脚本

可以添加以下脚本到 package.json：

{
  "scripts": {
    "release": "npm run build && npm publish",
    "release:patch": "npm version patch && npm run release",
    "release:minor": "npm version minor && npm run release",
    "release:major": "npm version major && npm run release"
  }
}

然后使用：

pnpm release:patch  # 发布补丁版本
pnpm release:minor  # 发布次要版本
pnpm release:major  # 发布主要版本

🔄 扩展组件和方法

添加新组件

1. 在 src/components/ 目录下创建新的 Vue 组件
2. 在 src/index.js 中导入并导出新组件
3. 在 install 函数中注册新组件
4. 在 src/style.css 中添加组件样式

示例：

<!-- src/components/MyModal.vue -->
<script setup>
defineProps({
  visible: Boolean,
  title: String
})

defineEmits(['update:visible'])
</script>

<template>
  <div v-if="visible" class="my-modal">
    <div class="my-modal-content">
      <h3>{{ title }}</h3>
      <slot></slot>
    </div>
  </div>
</template>

/* 在 src/style.css 中添加样式 */
.my-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.my-modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  min-width: 300px;
}

// src/index.js
import './style.css'
import MyButton from "./components/MyButton.vue"
import MyInput from "./components/MyInput.vue"
import MyModal from "./components/MyModal.vue"  // 新增

export { MyButton, MyInput, MyModal }  // 新增
export * from "./utils/public.ts"

export default {
  install(app) {
    app.component("MyButton", MyButton)
    app.component("MyInput", MyInput)
    app.component("MyModal", MyModal)  // 新增
  },
}

添加新工具函数

1. 在 src/utils/ 目录下创建新的工具函数文件
2. 在 src/utils/public.ts 中导出新函数
3. 或者创建新的工具文件并在 src/index.js 中导出

示例：

// src/utils/public.ts
export function getToken() {
  return localStorage.getItem("token")
}

export function setToken(token) {
  localStorage.setItem("token", token)
}

export function clearToken() {
  localStorage.removeItem("token")
}

// 新增工具函数
export function formatDate(date: Date, format: string = 'YYYY-MM-DD'): string {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  
  return format
    .replace(/YYYY/g, String(year))
    .replace(/MM/g, month)
    .replace(/DD/g, day)
}

export function debounce(func: Function, delay: number): Function {
  let timeoutId: NodeJS.Timeout
  return function (...args: any[]) {
    clearTimeout(timeoutId)
    timeoutId = setTimeout(() => func.apply(this, args), delay)
  }
}

📝 更新日志

v0.0.1

• 初始版本发布
• 添加 MyButton 组件
• 添加 MyInput 组件
• 添加 Token 管理工具函数
• 添加日期格式化、验证、防抖等工具函数
• 完善 CSS 样式导出配置

🤝 贡献

欢迎提交 Issue 和 Pull Request！

�� 许可证

MIT License