You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

7.3 KiB

Raw Permalink Blame History Unescape Escape

electron-app

An Electron application with Vue3 and TypeScript

electron-version electron-vite-version electron-builder-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 for more details.

You can also use the create-electron tool to scaffold your project for other frameworks (e.g. React, Svelte or Solid).

Recommended IDE Setup

VSCode + ESLint + Prettier + Volar + TypeScript Vue Plugin (Volar)

Project Setup

Install

$ npm install

Development

$ npm run dev

Build

# 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, source code protection
electron-vite-decorator-example, typescipt decorator
electron-vite-worker-example, worker and fork

7.3 KiB Raw Permalink Blame History Unescape Escape