# vue-toolkit

**Repository Path**: mantoucode/vue-toolkit

## Basic Information

- **Project Name**: vue-toolkit
- **Description**: Vue + TypeScript进行库打包，最小Demo

- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-11
- **Last Updated**: 2025-09-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue Toolkit

一个基于 Vue 3 和 TypeScript 的工具包，提供可复用的组件和实用工具，用于加速 Vue 3 应用开发。

## 特性

- 🚀 基于 Vue 3 + TypeScript
- 📦 支持按需引入
- 🔧 丰富的工具函数
- 🎨 可定制的 UI 组件
- 📖 完整的类型定义
- 🌳 Tree-shaking 友好

## 安装

```bash
npm install vue-toolkit
# 或
yarn add vue-toolkit
# 或
pnpm add vue-toolkit
```

## 使用方式

### 完整导入

```typescript
// 导入所有组件和工具
import VueToolkit, { Button, Modal, formatNumber, isEmail } from 'vue-toolkit'

// 使用 Vue 插件方式
import { createApp } from 'vue'
import VueToolkit from 'vue-toolkit'
import 'vue-toolkit/dist/style.css'

const app = createApp({})
app.use(VueToolkit)
```

### 按需导入（推荐）

#### 单独导入组件

```typescript
// 导入单个组件
import Button from 'vue-toolkit/lib/components/button'
import Modal from 'vue-toolkit/lib/components/modal'

// 导入所有组件
import { Button, Modal } from 'vue-toolkit/lib/components'
```

#### 单独导入工具函数

```typescript
// 导入格式化工具
import { formatNumber, formatDate, formatFileSize } from 'vue-toolkit/lib/utils/format'

// 导入验证工具
import { isEmail, isPhone, isIdCard } from 'vue-toolkit/lib/utils/validation'

// 导入所有工具
import * as utils from 'vue-toolkit/lib/utils'
```

## 组件

### Button 组件

```vue
<template>
  <Button type="primary" @click="handleClick">
    点击我
  </Button>
</template>

<script setup>
import Button from 'vue-toolkit/lib/components/button'

const handleClick = () => {
  console.log('按钮被点击')
}
</script>
```

### Modal 组件

```vue
<template>
  <Modal v-model:visible="showModal" title="提示">
    <p>这是一个模态框</p>
  </Modal>
</template>

<script setup>
import { ref } from 'vue'
import Modal from 'vue-toolkit/lib/components/modal'

const showModal = ref(false)
</script>
```

## 工具函数

### 格式化工具

```typescript
import { formatNumber, formatDate, formatFileSize, formatCurrency } from 'vue-toolkit/lib/utils/format'

// 格式化数字
formatNumber(1234.56) // "1,234.56"

// 格式化日期
formatDate(new Date(), 'YYYY-MM-DD') // "2024-01-01"

// 格式化文件大小
formatFileSize(1024 * 1024) // "1.00 MB"

// 格式化货币
formatCurrency(1234.56) // "¥1,234.56"
```

### 验证工具

```typescript
import { isEmail, isPhone, isIdCard, isUrl } from 'vue-toolkit/lib/utils/validation'

// 验证邮箱
isEmail('test@example.com') // true

// 验证手机号
isPhone('13812345678') // true

// 验证身份证号
isIdCard('110101199001011234') // false (示例号码)

// 验证URL
isUrl('https://example.com') // true
```

## 构建优化

使用按需导入可以显著减少打包体积：

```typescript
// ❌ 不推荐：导入整个库
import { formatNumber } from 'vue-toolkit'

// ✅ 推荐：按需导入
import { formatNumber } from 'vue-toolkit/lib/utils/format'
```

## 开发

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建库
npm run build:lib

# 预览构建结果
npm run preview
```

## 许可证

MIT