Electron + ts + vue3 + vite 项目搭建

Electron 是一个基于 Chromium 和 Node.js 的桌面应用程序开发框架，而 Vue3 则是一种流行的前端框架。将两者结合使用可以快速地打造出跨平台的桌面应用程序。在这种组合中，Electron 提供了强大的桌面应用开发能力，而 Vue3 则提供了易用的 UI 组件和开发体验。
 

在创建选项中选择ts和vue选项。
之后，安装依赖之后试运行一下，出现一下页面意味着vite-vue项目创建成功。

npm create vite@latest electron-vue3-ts-vite-test1

 VSCode打开electron-vue3-ts-vite-test1或者cd electron-vue3-ts-vite-test1

npm install //完成初始化
npm run dev //试运行确认是否有问题

2.安装electron的相关依赖 

//安装electron
npm install electron -D
//打包工具
npm install electron-builder -D
//开发工具
npm install electron-devtools-installer -D
//集成Vite和Electron，方便后续在渲染进程中使用Node API或Electron API
npm install vite-plugin-electron -D
npm install vite-plugin-electron-renderer -D//快速删除某些文件和文件夹
npm install rimraf -D

 

3.配置electron
在项目的根目录下新建electron-main文件夹，之后新建index.ts，配置如下：

 // electron-main/index.ts
import { app, BrowserWindow } from "electron"
import path from "path"const createWindow = () => {const win = new BrowserWindow({webPreferences: {contextIsolation: false, // 是否开启隔离上下文nodeIntegration: true, // 渲染进程使用Node APIpreload: path.join(__dirname, "./preload.js"), // 需要引用js文件},})// 如果打包了，渲染index.htmlif (process.env.NODE_ENV !== 'development') {win.loadFile(path.join(__dirname, "./index.html"))win.webContents.openDevTools()} else {let url = "http://localhost:5173" // 本地启动的vue项目路径。注意：vite版本3以上使用的端口5173；版本2用的是3000win.loadURL(url)win.webContents.openDevTools()}
}app.whenReady().then(() => {createWindow() // 创建窗口app.on("activate", () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})// 关闭窗口
app.on("window-all-closed", () => {if (process.platform !== "darwin") {app.quit()}
})

项目根目录创建electron-preload目录，在electron-preload目录新建preload.ts文件，参考示例代码如下：

注意避坑：preload.ts不要与preload-main中的index.ts同名，

// electron-preload/preload.ts
import os from "os";
console.log("platform", os.platform());

 4.修改项目配置文件

  • 修改tsconfig.json

增加electron相关的监听，增加配置内容如下，electron-main/**/*.ts及electron-preload/**/*.ts为新增配置

"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue","electron-main/**/*.ts","electron-preload/**/*.ts"],

  • 修改vite.config.ts

将当前独立的vite与electron关联起来

【补充说明】：

  • electron()是可以传入数组对象的，网上很多教程或者案例都是传入对象，导致很多小伙伴只知道electron-main/index.ts(对应electron项目main.js)怎么配，而不知道perload.js怎么配。

  • electron()支持传递数组，因而可以配置main及preload入口，但由于统一输出到outDir: "dist-electron"同一个目录，由此main及preload不建议创建同名的ts文件，否则会有冲突

  • outDir: "dist-electron"交代了输出地址

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'import electron from "vite-plugin-electron"
import electronRenderer from "vite-plugin-electron-renderer" 
import polyfillExports from "vite-plugin-electron-renderer" export default defineConfig(({ mode }) => ({base: mode == 'development' ? '' : './',plugins: [vue(),electron([{entry: "electron-main/index.ts", // 主进程文件},{entry: 'electron-preload/preload.ts'}]),electronRenderer(),polyfillExports(),],build: {emptyOutDir: false, // 默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录outDir: "dist-electron"},
}))

  •  修改package.json文件

  1. 删除"type":"module"
  2. 增加"main": "dist-electron/index.js"
  3. "build"修改为"build": "rimraf dist-electron && vite build && electron-builder"
  4. 修改dev运行命令，增加chcp 65001支持中文显示，"scripts": {"dev": "chcp 65001 && vite"}
  5. （如果不涉及打包，可以不配置）增加配置build配置（配置build才能打包成功，具体含义可以官网查询），注意files及output配置的路径，files打包关联路径，output为后续包生成路径
appId、productName... —— 应用基本信息信息
win、mac —— 不同类型设备配置
nsis —— 桌面应用程序安装过程的配置
{"name": "electron-vue3-ts-vite-test1","private": true,"version": "0.0.0","main": "dist-electron/index.js", "scripts": {"dev": "vite","build": "vue-tsc && rimraf dist-electron && vite build && electron-builder","preview": "vite preview"},"dependencies": {"vue": "^3.2.47"},"devDependencies": {"@vitejs/plugin-vue": "^4.1.0","electron": "^25.2.0","electron-builder": "^24.4.0","electron-devtools-installer": "^3.2.0","rimraf": "^5.0.1","typescript": "^5.0.2","vite": "^4.3.9","vite-plugin-electron": "^0.12.0","vite-plugin-electron-renderer": "^0.14.5","vue-tsc": "^1.4.2"},"build": {"appId": "com.electron.desktop","productName": "electron","asar": true,"copyright": "Copyright © 2022 electron","directories": {"output": "release/${version}"},"files": ["./dist","./package.json","./dist-electron"],"mac": {"artifactName": "${productName}_${version}.${ext}","target": ["dmg"]},"win": {"target": [{"target": "nsis","arch": ["x64"]}],"artifactName": "${productName}_${version}.${ext}"},"nsis": {"oneClick": false,"perMachine": false,"allowToChangeInstallationDirectory": true,"deleteAppDataOnUninstall": false},"publish": [{"provider": "generic","url": "http://127.0.0.1:8080"}],"releaseInfo": {"releaseNotes": "版本更新的具体内容"}}
}

nsis（桌面应用程序安装过程）配置一览

{ // 一键安装程序、或者辅助安装程序（默认是一键安装）"oneClick": false,// 是否允许请求提升，如果为 false，则用户必须使用提升的权限重新启动安装程序（仅作用于辅助安装程序）"allowElevation": true, // 是否允许修改安装目录（仅作用于辅助安装程序）"allowToChangeInstallationDirectory": true,// 安装程序图标的路径"installerIcon": "public/timg.ico",// 卸载程序图标的路径"uninstallerIcon": "public/timg.ico",// 安装时头部图片路径（仅作用于辅助安装程序）"installerHeader": "public/timg.ico",// 安装时标题图标（进度条上方）的路径（仅作用于一键安装程序）"installerHeaderIcon": "public/timg.ico",// 安装完毕界面图片的路径，图片后缀.bmp，尺寸 164*314（仅作用于辅助安装程序）"installerSidebar": "public/installerSiddebar.bmp",// 开始卸载界面图片的路径，图片后缀.bmp，尺寸 164*314（仅作用于辅助安装程序）"uninstallerSidebar": "public/uninstallerSiddebar.bmp",// 控制面板中的卸载程序显示名称"uninstallDisplayName": "${productName}${version}",// 是否创建桌面快捷方式"createDesktopShortcut": true,// 是否创建开始菜单快捷方式"createStartMenuShortcut": true,// 用于快捷方式的名称，默认为应用程序名称"shortcutName": "TestApp",// NSIS 包含定制安装程序脚本的路径，安装过程中自行调用 (可用于写入注册表 开机自启动等操作)"include": "script/installer.nsi",// 用于自定义安装程序的 NSIS 脚本的路径"script": "script/installer.nsi",// 是否在卸载时删除应用程序数据（仅作用于一键安装程序）"deleteAppDataOnUninstall": false,// 完成后是否运行已安装的应用程序（对于辅助安装程序，应删除相应的复选框）"runAfterFinish": true,// 是否为开始菜单快捷方式和程序文件目录创建子菜单，如果为 true，则使用公司名称"menuCategory": false,
}

  •  修改.gitignore

增加忽略dist-electron

5.运行测试

  • dev测试： npm run dev （由于有vite加持，支持hotreload，无需额外配置）

  • 打包测试： npm run build
打包成功后再release目录下生成一个版本文件夹，打开文件夹，里面有一个.exe文件,点击安装就可以了

 

 

 

 

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/4929.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

4.28 白噪声功率谱密度的估计

4.28 白噪声功率谱密度的估计

前一节有下面结论： 什么仿真的白噪声波形是均匀的，均匀的特点是相关函数在0时刻是相关的（自己和自己相关的）0以外时刻都互相不相关
阅读更多...
微信小程序——二维码推广海报

微信小程序——二维码推广海报

&#x1f60a;博主&#xff1a;小猫娃来啦 &#x1f60a;本文核心&#xff1a;本地图片和接口返回二维码制作一体化canvas海报 目录 创建一个画布通过canvas API绘制图像细节1 长按保存细节2 创建一个画布 在微信小程序中&#xff0c;我们使用<canvas>标签来创建一个画布…
阅读更多...
Multi-sensor KIT 多传感器开发板

Multi-sensor KIT 多传感器开发板

1.前言 经过一段时间的思考后&#xff0c;我决定设计一款能够兼容多个传感器的开发板。这个开发板由核心底板和扩展板组成&#xff0c;其中核心底板预留了多路的I2C、SPI、UART、ADC等接口&#xff0c;而扩展板则兼容了QMI8658A-EVB和CH101/201-EVB的支持。这个设计可以让我更…
阅读更多...
java小技能：分布式任务调度平台

java小技能：分布式任务调度平台

文章目录 引言I 报表数据生成II 注意事项2.1 任务创建2.2 pom.xml 添加到maven项目 see also 引言 任务调度的应用场景&#xff1a; 生成日报、月报、定时处理任务&#xff08;定期清理文件、处理数据&#xff09; I 报表数据生成 https://kunnan.blog.csdn.net/article/deta…
阅读更多...
Netty核心技术八--Netty编解码器和handler的调用机制

Netty核心技术八--Netty编解码器和handler的调用机制

1.基本说明 netty的组件设计&#xff1a;Netty的主要组件有Channel、EventLoop、ChannelFuture、 ChannelHandler、ChannelPipe等 ChannelHandler充当了处理入站和出站数据的应用程序逻辑的容器。 例如&#xff0c;实现ChannelInboundHandler接口&#xff08;或ChannelInbound…
阅读更多...
2023 中兴捧月算法挑战赛-自智网络-参赛总结

2023 中兴捧月算法挑战赛-自智网络-参赛总结

“中兴捧月”是由中兴通讯面向在校大学生举办的全球性系列赛事活动&#xff0c;致力于培养学生建模编程、创新、方案策划和团队合作能力。今年是在学校的宣传下了解到比赛&#xff0c;最初抱着学习的态度报名了比赛&#xff0c;最终进入了决赛&#xff0c;完成了封闭的开发与赛…
阅读更多...
mysql行数据转为列数据

mysql行数据转为列数据

最近在开发过程中遇到问题&#xff0c;需要将数据库中一张表信息进行行转列操作&#xff0c;再将每列&#xff08;即每个字段&#xff09;作为与其他表进行联表查询的字段进行显示。 借此机会&#xff0c;在网上查阅了相关方法&#xff0c;现总结出一种比较简单易懂的方法备用…
阅读更多...
Qt弱加密漏洞分析

Qt弱加密漏洞分析

0x00 漏洞背景 Qt是一个跨平台的C应用程序开发框架&#xff0c;用于创建图形用户界面&#xff08;GUI&#xff09;应用程序、命令行工具、嵌入式系统和网络应用等各种类型的应用。 Qt框架包含的Qt Network&#xff08;网络模块&#xff09;&#xff0c;提供了QNetworkAccessM…
阅读更多...
抖音本地生活团购软件开发

抖音本地生活团购软件开发

抖音本地生活团购软件开发需要考虑以下几个方面&#xff1a; 功能设计&#xff1a;根据本地生活团购服务特点&#xff0c;设计相应的功能模块&#xff0c;如商家入驻、商品展示、订单管理、支付等。 技术选型&#xff1a;选择适合该项目的技术和框架&#xff0c;如移动…
阅读更多...
RabbitMq应用延时消息

RabbitMq应用延时消息

一.建立绑定关系 package com.lx.mq.bind;import com.lx.constant.MonitorEventConst; import lombok.extern.slf4j.Slf4j; import org.springframework.amqp.core.*; import org.springframework.beans.factory.annotation.Value; import org.springframework.context.annota…
阅读更多...
【计算机网络】可靠传输的实现机制

【计算机网络】可靠传输的实现机制

参考视频 https://www.bilibili.com/video/BV1c4411d7jb 1、停止-等待协议SW (Stop-and-Wait) 1.1 信道利用率 1.2 题目 1.3 小结 2.回退N帧协议GBN (Go-Back-N) 1.1 题目 1.2 小结 3.选择重传协议SR (Selective-Repeat) 3.1 过程 3.2 发送窗口 和 接收窗口尺寸范围 4.小结 5.…
阅读更多...
MATLAB 之 Simulink系统的仿真与分析

MATLAB 之 Simulink系统的仿真与分析

这里写目录标题 一、Simulink 系统的仿真与分析1. 设置仿真参数1.1 Solver 参数设置1.2 Data lmport/Export 参数设置 2. 运行仿真与仿真结果分析2.1 运行仿真2.2 仿真结果分析 一、Simulink 系统的仿真与分析 系统的模型建立之后&#xff0c;选择仿真参数和数值算法&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023