# Electron-Vite-Typescript-Vue3

**Repository Path**: vanwei/electron-vite-vue3

## Basic Information

- **Project Name**: Electron-Vite-Typescript-Vue3
- **Description**: 一个简单Electron+Vite+Typescript+Vue3的基座
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-07-25
- **Last Updated**: 2025-09-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, TypeScript, electron-vite, Mock, Alova

## README

# electron-vite-typescript-vue3

An Electron application with Vue and TypeScript

```
my-electron-vite-vue3-app/
├── electron/             # Electron 主进程代码
│   ├── main.ts           # Electron 主进程入口文件
│   ├── preload.ts        # Electron 预加载脚本
│   ├── ipcHandlers/      # IPC 处理器
│   ├── services/         # 服务层（如文件服务、API 服务）
│   └── utils/            # 工具函数
├── src/                  # Vue 3 应用代码
│   ├── assets/           # 静态资源文件
│   ├── components/       # 全局组件
│   ├── composables/      # Vue 3 组合式 API
│   ├── router/           # Vue Router 配置
│   │   └── index.ts      # 路由主文件
│   ├── store/            # Vuex 或 Pinia 状态管理
│   │   ├── modules/      # 状态模块
│   │   ├── actions.ts    # 全局动作
│   │   ├── getters.ts    # 全局获取器
│   │   ├── mutations.ts  # 全局突变
│   │   └── index.ts      # Vuex 或 Pinia 主文件
│   ├── locales/          # 国际化支持
│   │   ├── en.json       # 英文翻译文件
│   │   ├── zh.json       # 中文翻译文件
│   │   └── ...           # 其他语言翻译文件
│   ├── themes/           # 主题支持
│   │   ├── default.scss  # 默认主题样式
│   │   ├── dark.scss     # 暗黑主题样式
│   │   └── ...           # 其他主题样式
│   ├── views/            # 页面视图组件
│   ├── App.vue           # 根组件
│   ├── main.ts           # Vue 3 应用入口文件
│   ├── shims-vue.d.ts    # TypeScript 类型声明文件
│   └── ...               # 其他配置文件
├── public/               # 公共资源目录
│   ├── index.html        # 应用入口 HTML 文件
│   └── favicon.ico       # 网站图标
├── tests/                # 测试目录
│   ├── e2e/              # 端到端测试
│   └── unit/             # 单元测试
├── .env                  # 环境变量配置
├── .eslintrc.js          # ESLint 配置
├── .gitignore            # Git 忽略文件配置
├── babel.config.js       # Babel 配置
├── jest.config.js        # Jest 配置
├── package.json          # 项目依赖和脚本
├── tsconfig.json         # TypeScript 配置
├── vite.config.ts        # Vite 配置
└── yarn.lock             # Yarn 锁定文件
```

## 支持的格式 https://www.electronjs.org/zh/docs/latest/api/native-image

目前，所有平台都支持 `PNG` 和 `JPEG` 图像格式。 建议 `PNG` 是因为它支持透明度和无损压缩。

在 Windows 平台下, 你同样可以从文件路径中加载 `ICO` 格式的 icons 对象。 为了最好的质量，我们建议至少包括以下大小：

* 小图标
  * 16x16 (100% DPI scale)
  * 20x20 (125% DPI scale)
  * 24x24 (150% DPI scale)
  * 32x32 (200% DPI scale)
* 大图标
  * 32x32 (100% DPI scale)
  * 40x40 (125% DPI scale)
  * 48x48 (150% DPI scale)
  * 64x64 (200% DPI scale)
  * 256x256

### 关键目录和文件说明：

* **electron/** ：包含 Electron 主进程代码。
* **main.ts** ：Electron 主进程入口文件。
* **preload.ts** ：Electron 预加载脚本。
* **ipcHandlers/** ：IPC 处理器。
* **services/** ：服务层（如文件服务、API 服务）。
* **utils/** ：工具函数。
* **src/** ：包含 Vue 3 应用代码。
* **assets/** ：包含静态资源文件。
* **components/** ：包含全局组件。
* **composables/** ：包含 Vue 3 组合式 API。
* **router/** ：包含 Vue Router 配置。
* **store/** ：包含 Vuex 或 Pinia 状态管理。
* **locales/** ：包含国际化支持的翻译文件。
* **themes/** ：包含主题支持的样式文件。
* **views/** ：包含页面视图组件。
* **App.vue** ：根组件。
* **main.ts** ：Vue 3 应用入口文件。
* **shims-vue.d.ts** ：TypeScript 类型声明文件。
* **public/** ：包含公共资源，如 `index.html` 和 `favicon.ico`。
* **tests/** ：包含测试代码。
* **e2e/** ：包含端到端测试。
* **unit/** ：包含单元测试。
* **.env** ：环境变量配置。
* **.eslintrc.js** ：ESLint 配置。
* **.gitignore** ：Git 忽略文件配置。
* **babel.config.js** ：Babel 配置。
* **jest.config.js** ：Jest 配置。
* **package.json** ：包含项目的依赖和脚本。
* **tsconfig.json** ：TypeScript 配置。
* **vite.config.ts** ：Vite 配置。
* **yarn.lock** ：Yarn 锁定文件。

这种结构有助于保持代码的模块化和可维护性，使得不同功能之间的耦合度降低，便于团队协作和代码扩展。同时，它也支持高级特性，如多语言支持、主题切换、状态管理和国际化。

请注意，这只是一个示例结构，实际项目可能会根据具体需求进行调整。对于 Electron-Vite-TypeScript-Vue3 或更高版本，项目结构可能会有所不同，建议查看官方文档和更新日志，以了解任何可能的结构变化。

## Recommended IDE Setup

- [VSCode](https://code.visualstudio.com/) + [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) + [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin)

## Project Setup

### Install

```bash
$ pnpm install
```

### Development

```bash
$ pnpm dev
```

### Build

```bash
# For windows
$ pnpm build:win

# For macOS
$ pnpm build:mac

# For Linux
$ pnpm build:linux
```