# 视频便切

**Repository Path**: onlyryan/my-tool-box

## Basic Information

- **Project Name**: 视频便切
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-09
- **Last Updated**: 2026-03-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 📦 下载方式

### 通过 npm 下载

#### 1. 使用 CLI 工具创建项目
```bash
# 使用 npm create
npm create electron-su

# 使用 npx
npx create-electron-su

# 使用 yarn create
yarn create electron-su

# 使用 pnpm create
pnpm create electron-su
```

#### 2. 交互式配置
CLI 工具会引导您完成以下配置：
- 项目名称（如果未在命令行指定）
- 是否覆盖已存在的目录

#### 3. 自动完成项目创建
CLI 工具会自动：
- 创建项目目录结构
- 复制所有模板文件
- 更新 package.json 中的项目名称

#### 4. 开始开发
```bash
# 进入项目目录
cd my-app

# 启动 Electron 开发环境
npm run electron:dev
```

### 两种方式的对比

| 特性 | GitHub 克隆 | npm CLI |
|------|-------------|---------|
| **适用场景** | 学习源码、二次开发 | 快速创建新项目 |
| **操作复杂度** | 需要手动配置 | 一键创建 |
| **自定义程度** | 完全自定义 | 基于模板 |
| **更新维护** | 需要手动同步 | 自动获取最新版本 |
| **推荐用户** | 开发者、贡献者 | 普通用户 |

## 🚀 框架介绍

create-electron-su 是一个现代化的 Electron + React 桌面应用开发脚手架，集成了当前最流行的技术栈和最佳实践。通过这个脚手架，您可以快速创建功能完备的桌面应用程序。

### 核心特性

- **🚀 现代化构建** —— 基于 Vite 7 的极速构建，支持热更新、代码分割、Tree Shaking
- **📱 响应式设计** —— 基于 Tailwind CSS 的响应式设计系统，适配各种设备
- **🔧 TypeScript 支持** —— 完整的 TypeScript 支持，提供类型安全和智能提示
- **🖥️ 桌面应用** —— 基于 Electron 38 的跨平台桌面应用支持
- **📊 状态管理** —— 集成 Redux Toolkit 的轻量级状态管理
- **🌐 API 封装** —— 基于 Axios 的 API 请求封装，支持拦截器、错误处理
- **🔍 开发工具** —— 集成 ESLint 等开发工具，保证代码质量
- **🔄 热重载** —— 开发环境下的热重载，提升开发效率
- **📦 包管理** —— 支持 npm、yarn、pnpm 等多种包管理器
- **🎯 最佳实践** —— 遵循 React 和 TypeScript 最佳实践，提供规范的代码结构

## 🏗️ 项目架构

```
src/
├── 📁 assets/              # 静态资源
│   └── images/             # 图片资源
├── 📁 pages/               # 页面组件
│   ├── home.tsx            # 首页
│   └── about.tsx           # 关于页面
├── 📁 utils/               # 工具函数
│   ├── index.tsx           # 工具函数入口
│   └── request.tsx         # 封装的axios请求
├── 📁 types/               # 类型定义
│   └── sharred.tsx         # 泛型的定义
├── App.tsx                 # 应用根组件（页面切换逻辑）
├── main.tsx                # 应用入口
├── index.css               # 全局样式
└── App.css                 # 应用样式
```

## 🚀 快速开始

### 环境要求

- Node.js >= 18.0.0
- npm >= 8.0.0 或 yarn >= 1.22.0 或 pnpm >= 7.0.0

### 启动开发服务器

```bash
# 启动 Electron 开发环境（同时启动 Vite 服务器和 Electron 应用）
npm run electron:dev
```

### 访问应用

运行开发命令后，Electron 应用会自动启动并加载本地开发服务器。

## 📦 打包部署

### 生产构建

```bash
# 构建生产版本
npm run electron:build
```

### 国内用户特别说明

由于网络原因，国内用户在打包 Electron 应用时可能会遇到下载失败的问题。请在打包前设置镜像源：

**Windows (PowerShell):**
```powershell
$env:ELECTRON_BUILDER_BINARIES_MIRROR = "https://npmmirror.com/mirrors/electron-builder-binaries/"
npm run electron:build
```

**Windows (CMD):**
```cmd
set ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/
npm run electron:build
```

**macOS/Linux:**
```bash
export ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/
npm run electron:build
```

### 平台特定构建

```bash
# 构建 Windows 应用
npm run electron:buildWin

# 构建 macOS 应用
npm run electron:buildMac

# 构建 Linux 应用
npm run electron:buildLinux
```

构建完成的应用会生成在 `release` 目录中。

## 🤝 贡献指南

我们欢迎所有形式的贡献，包括但不限于：

- 🐛 Bug 报告
- 💡 功能建议
- 📝 文档改进
- 🔧 代码贡献

## 🙏 致谢

感谢以下开源项目的支持：

- [Electron](https://www.electronjs.org/) - 跨平台桌面应用框架
- [React](https://reactjs.org/) - 用于构建用户界面的 JavaScript 库
- [Vite](https://vitejs.dev/) - 下一代前端构建工具
- [TypeScript](https://www.typescriptlang.org/) - JavaScript 的超集
- [Tailwind CSS](https://tailwindcss.com/) - 实用优先的 CSS 框架