技术参考
技术描述Electron一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.jsElectron Forge用于打包和分发 Electron 应用程序的一体化工具。英文地址在此Vite前端构建工具Vue3用于构建用户界面的 JavaScript 框架@vitejs/plugin-vueVite 插件，提供 Vue 单文件组件支持Element Plus基于 Vue3 的 UI组件库SassCSS 预处置惩罚语言 实现
第一步：创建 Electron + Vite 模板
使用官方保举 Electron Vite 模板命令
- npm init electron-app@latest my-new-app -- --template=vite
- > npm init electron-app@latest my-new-app -- --template=vite
- ✔ Locating custom template: "vite"✔ Initializing directory✔ Preparing template✔ Initializing template✔ Installing template dependencies
- # 目录结构
- .
- ├─ src # 主代码
- | ├─ index.css # 样式文件 renderer.js 文件中引入
- | ├─ main.js # 主进程脚本，初始化应用
- | ├─ preload.js # 预加载脚本
- | └─ renderer.js # 渲染进程脚本
- ├─ forge.config.js # forge 配置
- ├─ forge.env.d.ts # forge 环境
- ├─ package-lock.json # lock
- ├─ package.json # 插件依赖
- ├─ vite.base.config.mjs # vite 基础配置
- ├─ vite.main.config.mjs # vite 主配置
- ├─ vite.preload.config.mjs # vite 预加载配置
- └─ vite.renderer.config.mjs # vite 渲染配置
- {
- "dependencies": {
- "@element-plus/icons-vue": "2.3.1",
- "electron-squirrel-startup": "1.0.1",
- "element-plus": "2.7.7",
- "vue": "3.4.33"
- },
- "devDependencies": {
- "@electron-forge/cli": "7.4.0",
- "@electron-forge/maker-deb": "7.4.0",
- "@electron-forge/maker-rpm": "7.4.0",
- "@electron-forge/maker-squirrel": "7.4.0",
- "@electron-forge/maker-zip": "7.4.0",
- "@electron-forge/plugin-auto-unpack-natives": "7.4.0",
- "@electron-forge/plugin-fuses": "7.4.0",
- "@electron-forge/plugin-vite": "7.4.0",
- "@electron/fuses": "1.8.0",
- "electron": "31.2.1",
- "vite": "5.3.4"
- }
- }
第二步：融合 Vue3
参考官方指南中文/英文，安装 Vue3 相干插件
- # vue3 插件
- npm i vue
- # vite vue3 插件
- npm i @vitejs/plugin-vue -D
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title>Hello World!</title>
- </head>
- <body>
- <div id="app"></div>
- <script type="module" src="/src/renderer.js"></script>
- </body>
- </html>
[code]<script setup>
console.log(" |
