vue3前端开发系列 - electron开发桌面程序(2023-10月最新版)

文章目录

  • 1. 说明
  • 2. 创建项目
  • 3. 创建文件夹electron
    • 3.1 编写脚本electron.js
    • 3.2 编写脚本proload.js
  • 4. 修改package.json
    • 4.1 删除type
    • 4.2 修改scripts
    • 4.3 完整的配置如下
  • 5. 修改App.vue
  • 6. 修改vite.config.ts
  • 7. 启动
  • 8. 打包安装
  • 9. 项目公开地址

1. 说明

本次安装使用的环境版本如下:

组件版本
nodejs18.16.1
npm9.5.1
electron26.3.0
electron-builder24.6.4

2. 创建项目

我是先用pnpm创建了一个vue3+vite+ts项目,然后后续安装的时候使用pnpm安装electron一直有问题。
后来改用npm安装electron才可以的。
还有nodejs的版本问题,这里安装的electron版本是26.3.0,推荐使用nodejs的版本为18.16.1。
否则,可能会出现各种奇奇怪怪的问题。

在安装electron electron-builder时,可能会出现网络连接问题,请配置阿里的源。

pnpm config set registry http://registry.npmmirror.com
npm config set registry http://registry.npmmirror.com
npm config set ELECTRON_MIRROR https://registry.npmmirror.com/-/binary/electron/

npm的config如下:
在这里插入图片描述

pnpm create vite
#输入项目名
Project name: electron-vue-vite
# 选择前端框架
Select a framework: Vue
# 选择语言
Select a variant: Typescript# 使用npm安装包
npm install# 安装样式
npm i sass -D# 这里一定要大写D
npm i electron@v26.3.0 electron-builder -D# 为了解决同时启动2个服务,以及白屏问题
npm i wait-on concurrently cross-env -D

3. 创建文件夹electron

在根目录创建文件夹electron

3.1 编写脚本electron.js

创建electron/electron.js

// electron/electron.js
const path = require('path');
const { app, BrowserWindow } = require('electron');app.commandLine.appendSwitch('lang', 'zh-CN') 
const isDev = process.env.IS_DEV == "true" ? true : false;function createWindow() {// Create the browser window.const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js'),nodeIntegration: true,},});// and load the index.html of the app.// win.loadFile("index.html");mainWindow.loadURL(isDev? 'http://localhost:5173/': `file://${path.join(__dirname, '../dist/index.html')}`);// Open the DevTools.if (isDev) {mainWindow.webContents.openDevTools();}
}// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {createWindow()app.on('activate', function () {// On macOS it's common to re-create a window in the app when the// dock icon is clicked and there are no other windows open.if (BrowserWindow.getAllWindows().length === 0) createWindow()})});// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit();}
});

3.2 编写脚本proload.js

创建electron/proload.js

// electron/preload.js// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector)if (element) element.innerText = text}for (const dependency of ['chrome', 'node', 'electron']) {replaceText(`${dependency}-version`, process.versions[dependency])}
})

4. 修改package.json

4.1 删除type

删除 “type”:“module” 这行,很重要,否则启动会报错。

4.2 修改scripts

直接用下面覆盖

  "scripts": {"dev": "vite --host","build": "vite build","serve": "vite preview","electron": "wait-on tcp:5173 && cross-env IS_DEV=true electron .","electron:dev": "concurrently -k \"cross-env BROWSER=none npm run dev\" \"npm run electron\"","electron:build.win": "npm run build && electron-builder --win --dir","electron:build.linux": "npm run build && electron-builder --linux appImage","electron:build.test": "npm run build && electron-builder --dir","electron:build.exe": "npm run build && electron-builder --win"},

注意点:wait-on后面监控的tcp端口要和启动的端口保持一致。

4.3 完整的配置如下

package.json

{"name": "electron-vue-vite","author": "硅谷工具人","private": true,"version": "0.0.0","main": "electron/electron.js","scripts": {"dev": "vite --host","build": "vite build","serve": "vite preview","electron": "wait-on tcp:5173 && cross-env IS_DEV=true electron .","electron:dev": "concurrently -k \"cross-env BROWSER=none npm run dev\" \"npm run electron\"","electron:build.win": "npm run build && electron-builder --win --dir","electron:build.linux": "npm run build && electron-builder --linux appImage","electron:build.test": "npm run build && electron-builder --dir","electron:build.exe": "npm run build && electron-builder --win"},"dependencies": {"vue": "^3.3.4"},"devDependencies": {"@vitejs/plugin-vue": "^4.4.0","concurrently": "^8.2.1","cross-env": "^7.0.3","electron": "^26.3.0","electron-builder": "^24.6.4","sass": "^1.69.2","typescript": "^5.2.2","vite": "^4.4.11","vue-tsc": "^1.8.18","wait-on": "^7.0.1"},"build": {"appId": "com.ggtool.knote","productName": "KNote","copyright": "Copyright © 2023 ${author}","mac": {"category": "public.app-category.utilities"},"nsis": {"oneClick": false,"allowToChangeInstallationDirectory": true},"files": ["dist/**/*","electron/**/*"],"directories": {"buildResources": "assets","output": "dist_electron"}}
}

5. 修改App.vue

这里指定容器的高度和宽带为800*600,和electron.js中createWindow设置保持相同。

<template><HelloWorld class="container"/>
</template><script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue"
</script>
<style lang="scss" scoped>
.container{min-width:800px;min-height: 600px;
}
</style>

6. 修改vite.config.ts

在defineConfig中添加

base: process.env.ELECTRON=="true" ? './' : "./",

7. 启动

npm run electron:dev

在这里插入图片描述

8. 打包安装

打包win客户端,绿色包,直接拷贝使用的。

npm run electron:build.win

在这里插入图片描述

打包exe安装包,指定安装路径安装

npm run electron:build.exe

在这里插入图片描述

启动页面
在这里插入图片描述

9. 项目公开地址

项目已传gitee上,可以直接clone使用,欢迎点star。

https://gitee.com/ggtool/electron-vue-vite

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

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

相关文章

kantts docker化

kan-tts docker本地化 环境安装 下载docker镜像(python3.8的) registry.cn-hangzhou.aliyuncs.com/modelscope-repo/modelscope:ubuntu20.04-cuda11.8.0-py38-torch2.0.1-tf2.13.0-1.9.2 安装基础模型 pip install modelscope 安装语音模型 pip install "modelscope…

RunnerGo测试平台,无代码玩转UI自动化测试

首先需要进入官网&#xff0c;RunnerGo支持开源&#xff0c;可以自行下载安装&#xff0c;也可以点击右上角体验企业版按钮快速体验 点击体验企业版进入工作台后可以点击页面上方的UI自动化 进入到测试页面 创建元素 我们可以在元素管理中创建我们测试时需要的元素 这里我们以…

Xcode升级到15.0 解决DT_TOOLCHAIN_DIR问题

根据个人开发遇到的问题做的总结&#xff0c;公司要求Xcode 14.2 &#xff0c;Swift 5.7开发&#xff0c;由于升级了Mac 14.0系统后&#xff0c;Xcode 14.2不能使用&#xff0c;解决方案目前有2个 一、在原来Xcode 14.2 的显示包内容&#xff0c;如图 二、升级到Xcode的15.0后…

CentOS系统/root根目录扩容(扩展逻辑卷)

具体操作步骤 1、查看本机磁盘环境挂载情况 2、添加磁盘分区 3、开始扩容 4、同步到文件系统 1、查看本机磁盘环境挂载情况 [rooticon ~]# df -lh 可以看到/dev/mapper/centos-root 路径下容量为50G&#xff0c;我们要给这个路径下的容量扩容&#xff1a;[rooticon ~]# lsblk…

【Jenkins】调用API构建并钉钉通知

文章目录 Jenkins API介绍提交作业带参数的作业API 令牌 Shell调用代码 Jenkins API介绍 Jenkins 提供了远程访问 API。目前它有三种格式&#xff1a; XML JSON Python 远程访问 API 形式为"…/api/" 例如&#xff0c; Jenkins 安装位于https://ci.jenkins.io&a…

协同育人|电巢携手武汉软件工程职业学院项目实训顺利开班!

为深化校企合作&#xff0c;产教融合助力新工科建设&#xff0c;提升学生工程实践能力&#xff0c;电巢工程能力实训班按照不同岗位类别&#xff0c;匹配对应的企业岗位任职能力要求对学生开展分级培养&#xff0c;以产业需求为导向&#xff0c;培养创新型、应用型人才。 10月…

vscode中注释多行bash脚本

选择你要注释的行&#xff0c;右击所选的行&#xff0c;从命令调色板中选择添加行注释。 选择后&#xff0c;所选的行将被注释为#&#xff0c;如下图所示。 选择你想取消注释的行&#xff0c;在所选行上点击右键&#xff0c;从命令调色板中选择删除区块注释&#xff0c;就可以从…

无人值守配电室变电所运维解决方案

随着电力系统数字化、智能化的不断发展&#xff0c;无人值守配电室变电所已经成为一种趋势。为了确保变电所的安全稳定运行&#xff0c;本文提出了一种无人值守配电室变电所运维解决方案。 一、背景介绍 力安科技电易云无人值守配电室变电所是指通过远程监控和智能化电力数…

如何在一个传统的html中,引入vueJs并使用vue复制组件?

如何在一个传统的html中&#xff0c;引入vueJs并使用vue复制组件&#xff1f; 1.1 引言1.2 背景1.3 解决方案1.3.1 解决方案一&#xff1a;直接使用clipboard(不推荐仅供参考学习)1.3.2 解决方案二&#xff1a;封装指令js库后使用 (推荐) 1.1 引言 这篇博文主要分享如何在一个…

【AUTOSAR中断管理】TC3XX中断系统介绍

摘要 这段文本主要介绍了AURIX TC3XX的中断系统(Interrupt Router,简称IR)以及中断注册的过程以及举例说明中断机制。 AURIX TC3XX 中断系统(Interrupt Router)介绍 流程图描述中断路由器(IR)处理服务请求并与服务提供者交互。 中断系统的作用是将service request进行…

【ivX】低调且强大的低代码平台

目录 前言 一、低代码那么多 为什么选择iVX&#xff1f; 二、“拼”出来的低代码平台&#xff0c;真的好用吗&#xff1f; 前言 首先我们应该明白自动编程突破可能是&#xff1a;领域内Mini LLM 现在的思路都是搞LLM&#xff0c;几乎像“大跃进”一样全民都在修炼“大模型”…

UE4和C++ 开发-C++绑定widget的方式和初始化UI

C绑定widget的方式有两种&#xff0c;一种是使用meta (BindWidget)&#xff0c;一种是使用GetWidgetFromName(TEXT("")),两种方式都可以。一、meta BindWidget方式 注意这种绑定的方式UMG里面的空间名称需要与C里面声明的变量名称相同 Btn_StartU 二、GetWidge…

java学习笔记001

java基础 java语言特点 面向对象&#xff0c;强类型&#xff0c;跨平台&#xff0c;解释型 基本概念&#xff08;JVM、JRE、JDK&#xff09; JVM java虚拟机 作用&#xff1a;加载.class文件 JRE Java运行环境 JREJVMJava系统类库 JDK Java开发工具包 JDKJRE编译&a…

后端:推荐 2 个 .NET 操作的 Redis 客户端类库

目录 Redis特点 Redis场景 1. StackExchange.Redis 2. FreeRedis &#x1f680; 快速入门 &#x1f3a3; Master-Slave (读写分离) &#x1f4bb; Pipeline (管道)示例 &#x1f30c; Redis Cluster (集群) Redis &#xff0c;是一个高性能(NOSQL)的key-value数据库,Re…

docker安装sql-server数据库,使用navicat实现备份数据库导入

docker安装sql-server&#xff0c;使用navicat实现备份数据库导入 1、docker安装sql-server数据库2、使用navicat连接sql-server3、使用navicat导入备份数据库1、第一步&#xff1a;选择需要备份的数据源2、第二步 &#xff08;选择备份计划&#xff0c;设置还原文件位置信息&a…

『Linux小程序』进度条

文章目录 缓冲区问题回车与换行的区别进度条小程序 缓冲区问题 假设有一段代码为: #include<iostream> #include<unistd.h> int main() …

漏洞复现(CVE-2023-35843)

免责声明&#xff1a; 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直…

手动下载/安装Xcode的simulator

目录 前言解决方案1.获取simulator包下载地址1.1 Apple后台1.2 手动 2.使用三方下载工具下载3.使用命令安装simulator 前言 Xcode某个版本更新之后不带iOS的Simulator,导致全新下载一个Xcode后没法编译项目.公司的网又很坑,每次断掉点重试都重新下载,导致完全没法下下来.特别影…

了解什么是JWT的原理及实际应用

目录 一、介绍&讲述 ( 1 ) 什么是JWT ( 2 ) 为什么要学 二、结构 三、Jwt的工具类的使用 1. 依赖 2. 工具类 3. 过滤器 4. 控制器 5. 配置 6. 测试类 用于生成JWT 解析Jwt 复制jwt&#xff0c;并延时30分钟 测试JWT的有效时间 测试过期JWT的解析 四、…