# electron-vite-vue-template

**Repository Path**: xuan-sz/electron-vite-vue-template

## Basic Information

- **Project Name**: electron-vite-vue-template
- **Description**: 基于 Vue 3 + Vite + TypeScript + Electron 的模板系统
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-21
- **Last Updated**: 2026-01-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# electron-vite-vue-template

基于 Vue 3 + Vite + TypeScript + Electron 的模板系统。

## 功能特性

- 快捷模板
- 跨平台桌面应用

## 技术栈

- [Vue 3](https://cn.vuejs.org/) - 渐进式 JavaScript 框架
- [Vite](https://cn.vitejs.dev/) - 下一代前端构建工具
- [TypeScript](https://www.typescriptlang.org/) - JavaScript 的超集
- [Electron](https://www.electronjs.org/) - 跨平台桌面应用框架

## 开发环境设置

### 前置要求

- Node.js 18+ 
- npm 或 yarn 或 pnpm

### 快速开始

```sh
# 新建Electron + vite 项目，参考electron-vite-vue.gif
npm create electron-vite

# 安装依赖
npm install

# 这将启动 Vite 开发服务器和 Electron 应用
npm run dev

#构建后的应用将输出到 `release` 目录
npm run build

#启动本地 Web 服务器，预览 dist 目录中的打包产物，模拟生产环境运行效果
npm run preview

#清空 dist 与 dist-electron的打包产物
npm run clean
```

## 项目结构

```
electron-vite-vue-template/
├── electron/             # Electron 主进程和预加载脚本
│   ├── electron-env.d.ts # Electron 变量类型
│   ├── main.ts           # Electron 主进程
│   └── preload.ts        # 预加载脚本
├── public/              # 静态文件
├── src/
│   ├── assets/           # 静态资源
│   ├── components/       # Vue 组件
│   ├── App.vue           # 根组件
│   └── main.ts           # 入口文件
├── index.html            # HTML 模板
├── package.json          # 项目配置
├── tsconfig.node.json         # TypeScript 配置
├── vite.config.ts        # Vite 配置
```

## 许可证

MIT License

## 致谢

[Vue 3](https://cn.vuejs.org/)
[Vite](https://cn.vitejs.dev/)
[electron](https://www.electronjs.org/)
[electron-vite](https://vite.electron.js.cn/)