# barcode-generator

**Repository Path**: boheweb/barcode-generator

## Basic Information

- **Project Name**: barcode-generator
- **Description**: 这是一个基于 Vue 3 + TypeScript + Vite + Element Plus 的纯前端条码/二维码批量生成工具。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-02
- **Last Updated**: 2026-07-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 📦 `barcode-generator` 

---

## ✅ 介绍

这是一个基于 **Vue 3 + TypeScript + Vite + Element Plus** 的**纯前端条码/二维码批量生成工具**。支持 14 种一维条码格式和二维码，提供可视化配置面板、实时预览、批量生成及多格式导出（PNG/SVG/PDF）。

---

## ✅ 依据

基于对 `package.json`、`src/App.vue`、`src/components/BarcodeGenerator.vue`、`vite.config.ts` 等核心文件的读取分析得出。

---

## ✅ 架构与模块说明

### 1. 技术栈

| 类别 | 选型 |
|---|---|
| 框架 | Vue 3.5 + TypeScript |
| 构建工具 | Vite 8.1 + @vitejs/plugin-vue |
| UI 组件库 | Element Plus 2.14 + @element-plus/icons-vue |
| 条码生成 | **jsbarcode** ^3.12.3 |
| 二维码生成 | **qrcode** ^1.5.4 |
| 导出 PNG | **html2canvas** ^1.4.1 |

### 2. 目录结构

text
barcode
```-generator/
├── src/
│   ├── components/
│   │   └── BarcodeGenerator.vue   ← 核心组件（~24KB，包含全部业务逻辑）
│   ├── App.vue                    ← 根组件（顶部导航 + 布局容器）
│   ├── main.ts                    ← 入口
│   ├── style.css                  ← 全局样式
│   ├── vite-env.d.ts              ← Vite 类型声明
│   └── counter.ts                 ← Vite 模板残留文件
├── index.html                     ← HTML 入口
├── vite.config.ts                 ← Vite 配置（最小化）
├── package.json
└── dist/                          ← 构建输出


### 3.快速上手

```bash
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览构建产物
npm run preview
```