Vite Electron Builder 项目教程

Vite Electron Builder 项目教程

vite-electron-builderSecure boilerplate for Electron app based on Vite. TypeScript + Vue/React/Angular/Svelte/Vanilla项目地址:https://gitcode.com/gh_mirrors/vi/vite-electron-builder

1. 项目的目录结构及介绍

vite-electron-builder/
├── .github/
│   └── workflows/
│       └── ci.yml
├── .vscode/
│   └── settings.json
├── electron/
│   ├── main/
│   │   ├── index.ts
│   │   └── preload.ts
│   └── resources/
│       ├── icon.ico
│       └── icon.png
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   └── main.ts
├── public/
│   └── index.html
├── dist/
├── node_modules/
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

目录结构介绍

• .github/workflows/: 包含GitHub Actions的CI配置文件。
• .vscode/: 包含VSCode的配置文件。
• electron/: 包含Electron的主进程和预加载脚本。
  • main/: 主进程文件。
  • resources/: 包含Electron应用的资源文件，如图标。
• src/: 包含Vue.js应用的源代码。
  • assets/: 静态资源文件。
  • components/: Vue组件。
  • App.vue: 主Vue组件。
  • main.ts: Vue应用的入口文件。
• public/: 公共资源文件，如HTML模板。
• dist/: 构建输出目录。
• node_modules/: 依赖模块。
• package.json: 项目配置和依赖管理。
• tsconfig.json: TypeScript配置文件。
• vite.config.ts: Vite配置文件。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

主进程启动文件

• electron/main/index.ts: 这是Electron的主进程启动文件，负责创建窗口和管理应用的生命周期。

渲染进程启动文件

• src/main.ts: 这是Vue.js应用的入口文件，负责初始化Vue实例并挂载到DOM上。

3. 项目的配置文件介绍

package.json

{
  "name": "vite-electron-builder",
  "version": "1.0.0",
  "main": "electron/main/index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "electron:serve": "electron ."
  },
  "dependencies": {
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "vite": "^2.0.0",
    "electron": "^12.0.0"
  }
}

• name: 项目名称。
• version: 项目版本。
• main: Electron主进程入口文件。
• scripts: 脚本命令，用于开发、构建和运行应用。
• dependencies: 生产环境依赖。
• devDependencies: 开发环境依赖。

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "electron/**/*.ts"]
}

• compilerOptions: TypeScript编译选项。
• include: 包含的文件和目录。

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

vite-electron-builderSecure boilerplate for Electron app based on Vite. TypeScript + Vue/React/Angular/Svelte/Vanilla项目地址:https://gitcode.com/gh_mirrors/vi/vite-electron-builder