electron-app

An Electron application with Vue3 and TypeScript

electron-version electron-vite-version electron-builder-version vite-version vue-version typescript-version

## Features - 💡 Optimize asset handling - 🚀 Fast HMR for renderer processes - 🔥 Hot reloading for main process and preload scripts - 🔌 Easy to debug - 🔒 Compile to v8 bytecode to protect source code ## Getting Started Read [documentation](https://electron-vite.org/) for more details. - [Configuring](https://electron-vite.org/config/) - [Development](https://electron-vite.org/guide/dev.html) - [Asset Handling](https://electron-vite.org/guide/assets.html) - [HMR](https://electron-vite.org/guide/hmr.html) & [Hot Reloading](https://electron-vite.org/guide/hot-reloading.html) - [Debugging](https://electron-vite.org/guide/debugging.html) - [Source code protection](https://electron-vite.org/guide/source-code-protection.html) - [Distribution](https://electron-vite.org/guide/distribution.html) - [Troubleshooting](https://electron-vite.org/guide/troubleshooting.html) You can also use the [create-electron](https://github.com/alex8088/quick-start/tree/master/packages/create-electron) tool to scaffold your project for other frameworks (e.g. `React`, `Svelte` or `Solid`). ## 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 $ npm install ``` ### Development ```bash $ npm run dev ``` ### Build ```bash # For windows $ npm run build:win # For macOS $ npm run build:mac # For Linux $ npm run build:linux ``` # 项目结构 (Project Structure) 这是一个基于 Electron + Vite + TypeScript 的桌面应用程序项目结构，使用 Tailwind CSS 进行样式设计，并通过 electron-builder 进行打包分发。 ## 目录结构 ### 📁 `build/` - **构建配置目录** 包含与打包相关的脚本和资源文件 - `icons/` - 应用程序图标集（不同尺寸） - `installer.nsh` - NSIS 安装脚本配置 - `scripts/` - 构建相关脚本 ### 📁 `node_modules/` - **依赖库目录** 存储所有 npm/yarn 安装的第三方依赖包 *（此目录不应手动修改）* ### 📁 `out/` - **临时输出目录** 存放开发/构建过程中生成的临时文件 - `main/` - 主进程编译输出 - `renderer/` - 渲染进程编译输出 ### 📁 `release/` - **发布目录** 最终生成的应用程序安装包和可执行文件 ### 📁 `resources/` - **资源文件目录** 包含应用程序使用的静态资源 - `icons/` - 应用程序图标资源 - `data/` - 其他静态数据文件 ### 📁 `src/` - **核心源代码目录** 应用程序的主要逻辑和界面代码 - `main/` - Electron 主进程代码 - `preload/` - Electron 预加载脚本 - `renderer/` - 渲染进程代码 - `src/` - Vite 应用源码 - `api/` - 用于与后端或外部服务进行数据交互的API请求 - `assets/` - 前端资源文件 (images, fonts, etc.) - `components/` - UI 组件 - `config/` - 项目配置相关 - `hooks/` - 自定义 Vue Hooks - `layout/` - 页面布局组件 - `mock/` - 模拟数据用于开发和测试 - `plugins/` - 项目插件 - `router/` - 前端路由配置 - `stores/` - 状态管理 (Pinia) - `styles/` - 全局样式（Sass） - `utils/` - 工具函数 (日期格式化，数据处理等) - `views/` - 页面级别的组件 (Pages) - `Design/` - 设计面板页面 - `CommManagement/` (通信管理) - `ControllerManagement/` (控制器管理) - `Controls/` (设计控制控件集合组件) - `ImagesCapture/` (图像集 design-panel-controls) - `LogManagement/` (日志管理) - `Settings/` - (设置) - `Workflow/` - (工作流) - `index.vue` - 设计面板页面入口文件。 - `App.vue` - 主应用组件 (Vue.js) - `main.ts` - 渲染进程入口 - `env.d.ts` - 环境变量类型定义 - `auto-imports.d.ts` - 自动导入的模块类型定义 - `components.d.ts` - 组件类型定义 - `index.html` - HTML 入口文件 - `types/` - 全局类型定义 ### 📁 `test/` - **测试目录** 包含应用程序的各种测试 - `e2e/` - 端到端测试 - `unit/` - 单元测试 - `mocks/` - 测试用模拟数据 ## 配置文件 ### ⚙️ 基础配置 | 文件 | 用途 | |------|------| | `package.json` | 项目元数据、依赖项和 NPM 脚本 | | `package-lock.json` | 锁定依赖版本确保一致性 | | `tsconfig.json` | TypeScript 基础配置 | | `tsconfig.node.json` | Node.js 环境 TypeScript 配置 | | `tsconfig.web.json` | 浏览器环境 TypeScript 配置 | ### 🛠️ 构建工具 | 文件 | 用途 | |------|------| | `electron.vite.config.ts` | Vite 的 Electron 专用配置 | | `electron-builder.yml` | Electron 应用打包配置 | | `postcss.config.js` | PostCSS 处理配置 | | `tailwind.config.js` | Tailwind CSS 样式框架配置 | ### 🧹 代码质量 | 文件 | 用途 | |------|------| | `.editorconfig` | 跨编辑器/IDE 的代码风格统一 | | `.eslintrc.cjs` | ESLint 代码检查配置 | | `.eslintignore` | ESLint 忽略文件配置 | | `.prettierrc.yaml` | Prettier 代码格式化配置 | | `.prettierignore` | Prettier 忽略文件配置 | ### 📌 其他文件 | 文件 | 用途 | |------|------| | `.gitignore` | Git 版本控制忽略规则 | | `.npmrc` | npm 配置 | | `README.md` | 项目说明文档 | ## 技术栈概览 - **核心框架**: Electron - **开发语言**: TypeScript - **构建工具**: Vite - **UI 框架**: Element Plus - **样式方案**: Tailwind CSS - **代码质量**: ESLint + Prettier - **打包工具**: electron-builder - **CSS 处理**: PostCSS - **测试框架**: Vitest ## Examples - [electron-vite-bytecode-example](https://github.com/alex8088/electron-vite-bytecode-example), source code protection - [electron-vite-decorator-example](https://github.com/alex8088/electron-vite-decorator-example), typescipt decorator - [electron-vite-worker-example](https://github.com/alex8088/electron-vite-worker-example), worker and fork