# electron框架

**Repository Path**: ma-ruilin/electron-framework

## Basic Information

- **Project Name**: electron框架
- **Description**: electron框架整合了vue
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-27
- **Last Updated**: 2025-06-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Electron + Vue3 + Vite 桌面应用框架

这是一个基于 Electron + Vue3 + Vite + Element Plus 的现代桌面应用开发模板。

## 功能特性

- 🚀 现代化的 Vue3 + Vite 前端架构
- 💻 Electron 跨平台桌面应用
- 🎨 集成 Element Plus 组件库
- 📦 支持 Pinia 状态管理
- 🌐 支持 Vue Router 路由
- 🛠️ 支持 Sass 预处理
- 🔗 axios 网络请求封装
- 🏗️ 一键开发/打包/分发
- 🖱️ 自定义无边框窗口与拖动区域

## 目录结构

```
electron-framework/
├── main.js              # Electron 主进程
├── package.json         # 项目配置
├── vite.config.js       # Vite 配置
├── src/                 # 前端源码
│   ├── main.js          # Vue 应用入口
│   ├── App.vue          # 根组件
│   ├── index.html       # 前端入口页面（Vite）
│   ├── router/          # 路由配置
│   ├── store/           # Pinia 状态管理
│   ├── utils/           # 工具函数（如 request.js）
│   └── views/           # 页面组件
│       ├── Home.vue     # 首页
│       └── About.vue    # 关于页
├── assets/              # 静态资源
└── ...
```

## 快速开始

### 安装依赖
```bash
npm install
```

### 一键开发（自动启动 Vite + Electron）
```bash
npm run dev:all
```

### 仅启动前端（Vite）
```bash
npm run dev
```

### 仅启动 Electron 主进程（开发模式）
```bash
npm start
```

### 构建前端
```bash
npm run build
```

### 打包桌面应用
```bash
npm run dist
```

## 主要技术栈
- [Electron](https://www.electronjs.org/)
- [Vue3](https://vuejs.org/)
- [Vite](https://vitejs.dev/)
- [Element Plus](https://element-plus.org/)
- [Pinia](https://pinia.vuejs.org/)
- [Vue Router](https://router.vuejs.org/)
- [Sass](https://sass-lang.com/)
- [axios](https://axios-http.com/)

## 重要说明
- **窗口为无边框自定义窗口**，如需自定义最小化/关闭按钮，请在 `App.vue` 顶部自定义实现。
- **网络请求统一封装**在 `src/utils/request.js`，可直接 import 使用。
- **打包时请确保 `package.json` 的 `build.files` 包含 `dist/**/*`**，否则前端资源不会被打包进应用。
- **如遇白屏**，请先打开开发者工具（Ctrl+Shift+I）查看报错。

## 贡献
欢迎提交 Issue 和 Pull Request！

## License
MIT