3.electron之vue3.0的桌面应用程序

news2024/11/24 13:08:07

如果可以实现记得点赞分享,谢谢老铁~

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 Electron 将 Chromium 和 Node.js 嵌入到了一个二进制文件中,因此它允许你仅需一个代码仓库,就可以撰写支持 Windows、macOS 和 Linux 的跨平台应用。

项目效果

在这里插入图片描述

文件目录

在这里插入图片描述

如果你想使用 Electron 来打包 Vue 3.0 项目,并且同时保持原始项目在 Web 上的运行,可以按照以下步骤进行操作:

1.创建 Vue 3.0 项目:首先,使用 Vue CLI 创建一个 Vue 3.0 项目,可以通过以下命令执行:

vue create vue_demo

2.安装并配置 Electron:在项目的根目录中,执行以下命令安装 Electron 相关的依赖:

cd vue_demo
npm install electron

3.创建 Electron 主进程:为了不影响原有项目的启动命令,我们在项目中创建electron文件夹,在它的下面继续创建一个名为 main.js 的文件,并将以下代码复制到该文件中:

const { app, BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  win.loadURL('http://localhost:8080'); // 这里假设 Vue 项目在开发模式下运行在 localhost:8080

  // 打开开发者工具
  win.webContents.openDevTools();
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit();
});

上述代码创建一个 Electron 主进程,并在窗口中加载 Vue 项目的开发服务器。

  1. 更新 package.json:在项目的 package.json 文件中,添加以下脚本命令: 这里需要配置入口文件main.js
  "main": "electron/main.js",
  "scripts": {
    "electron:dev": "electron .",
    "electron:build": "vue-cli-service build && electron .",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
  },

5.运行 Electron:现在,你可以通过以下命令来启动 Electron 应用程序:

npm run electron:dev

这将启动 Electron 应用程序,并在 Electron 窗口中加载 Vue 项目。同时,你也可以在浏览器中继续运行 Vue 项目,通过访问 http://localhost:8080。

PS: 在 Electron 中,你可以使用不同的配置来生成适用于 macOS 和 Windows 的桌面应用程序。下面是针对每个操作系统的生成步骤:

生成 macOS 应用程序:

1.在 macOS 上,你可以使用 Electron-builder 工具来生成一个适用于 macOS 的桌面应用程序。
2.首先,确保你已经按照前面提到的步骤设置好了 Electron 项目。
3.接下来,在命令行中运行以下命令,以全局安装 Electron-builder:

npm install -g electron-builder

4.修改你的 package.json 文件,添加以下内容:

 "build": {
    "mac": {
      "icon": "public/favicon.png",
      "target": [
        {
          "target": "dmg"
        }
      ]
    }
  },

这将告诉 Electron-builder 使用 .dmg 格式来打包生成 macOS 应用程序。

5.运行以下命令来生成 macOS 应用程序:

electron-builder

6.这将生成一个 .dmg 安装文件,你可以在 macOS 上进行安装和使用。

生成 Windows 应用程序:

1.在 Windows 上,你可以使用 Electron-builder 工具来生成一个适用于 Windows 的桌面应用程序。
2.确保你已经按照前面提到的步骤设置好了 Electron 项目,并且已经全局安装了 Electron-builder。
3.修改你的 package.json 文件,添加以下内容:

 "build": {
    "win": {
      "icon": "public/favicon.png",
      "target": [
        {
          "target": "nsis"
        }
      ]
    }
  },

这将告诉 Electron-builder 使用 NSIS 安装程序来打包生成 Windows 应用程序。

运行以下命令来生成 Windows 应用程序:

electron-builder

这将生成一个安装程序(.exe 文件),你可以在 Windows 上进行安装和使用。

请注意,上述步骤仅提供了基本的配置示例。在实际开发中,你可能需要进一步配置和定制生成过程,例如设置应用程序图标、添加代码签名、优化构建配置等。你可以参考 Electron-builder 的文档(https://www.electron.build)以获取更多详细信息和指导。

PS: 如果没有生成,那你有可能是在mac系统想要生成window的.exe文件

在 macOS 上生成适用于 Windows 的桌面应用程序是可行的,但需要使用一些额外的工具来实现跨平台构建。你可以按照以下步骤进行操作:

1.在 macOS 上安装 WINE(Wine Is Not an Emulator)。WINE 是一个允许在 macOS 上运行 Windows 应用程序的兼容层。你可以使用 Homebrew 来安装 WINE,打开终端并运行以下命令:

brew install --cask wine

这将安装 WINE 到你的 macOS 系统中。

2.运行以下命令来生成 Windows 应用程序:

electron-builder --win

这将使用 WINE 在 macOS 上进行 Windows 应用程序的构建,生成一个可在 Windows 上运行的桌面应用程序。

请确保在运行上述命令之前,处于正确的项目目录下,并且已经安装了项目的依赖项。如果配置正确,electron-builder 应该会根据你的配置生成适用于 Windows 的桌面应用程序。

生成应用程序

在这里插入图片描述

需要注意的是,使用 WINE 进行跨平台构建可能会受到一些限制和局限性,因此构建过程可能会有一些不确定性。你可能会遇到一些兼容性问题或构建失败的情况。如果你的项目需要频繁地进行跨平台构建,考虑使用一台运行 Windows 的机器来生成适用于 Windows 的桌面应用程序,这样会更加可靠和稳定。

收工!谢谢老铁们的点赞收藏~

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

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

相关文章

多维时序 | MATLAB实现RIME-CNN-BiLSTM-Multihead-Attention多头注意力机制多变量时间序列预测

多维时序 | MATLAB实现RIME-CNN-BiLSTM-Multihead-Attention多头注意力机制多变量时间序列预测 目录 多维时序 | MATLAB实现RIME-CNN-BiLSTM-Multihead-Attention多头注意力机制多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 MATLAB实现RIME-…

C语言—每日选择题—Day42

第一题 1. 下面程序输出的结果是&#xff08;&#xff09; #include <stdio.h> int main () {int x;x printf("I See, Sea in C");printf("x%d" , x); } A&#xff1a;2 B&#xff1a;随机值 C&#xff1a;都不是 D&#xff1a;15 答案及解析 D p…

SpringBoot运维中的高级配置

&#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;程序员老茶 &#x1f64a; ps:点赞&#x1f44d;是免费的&#xff0c;却可以让写博客的作者开心好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#xff0c;…

Excel高效办公:文秘与行政办公的智能化革新

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f91f; 代理 IP 推荐&#xff1a;&#x1f449;品易 HTTP 代理 IP &#x1f485; 想寻找共同学习交流的小伙伴&#xff0c…

数据库常用分库分表方案

为什么需要分库分表 分库分表是因应数据库处理大规模数据时所面临的挑战而出现的解决方案. // 提高性能 单个数据库在数据量增加时容易出现性能瓶颈。分库分表可以减轻单个数据库的负担&#xff0c;提高系统的读写性能和响应速度. // 提高并发能力 大量用户同时访问数据库可能…

电信网关配置管理系统后台 upload.php 文件上传漏洞复现

0x01 产品简介 中国电信集团有限公司(英文名称“China Telecom”、简称“中国电信”)成立于2000年9月,是中国特大型国有通信企业、上海世博会全球合作伙伴。 0x02 漏洞概述 电信网关配置管理系统后台 /manager/teletext/material/upload.php 接口存在文件上传漏洞,攻击者…

Python实现图形的几何变换

一、能够提供对话框窗口&#xff0c;输入三角形的顶点坐标&#xff1b;或者&#xff0c;采用鼠标左键单击方式输入三角形的顶点坐标。 二、对输入的三角形顶点坐标进行五种基本几何变换&#xff1a; 对于平移变换&#xff0c;能够提供对话框窗口&#xff0c;输入平移向量&…

Openlayers 加载 Geoserver 图层以及切换图层样式

Openlayers 加载 Geoserver 图层以及切换图层样式 图层样式核心代码完整代码&#xff1a;在线示例 Openlayers 加载 Geoserver 图层&#xff0c;切换样式也是在项目中遇到的需求&#xff0c;现在介绍一下比较简单但是实用性一般的方法。 后期出一篇自由设置属性字段样式的博客…

Qt 自定义类时,手动添加 Q_OBJECT 出现错误

如图所示&#xff1a; 原因&#xff1a;没有自动生成 moc_ 文件。 可以去看一看自己项目文件里&#xff0c;我看了确实没有。 起因&#xff1a;创建类时 没有选择父类 或者 手动创建的 .h 和 .cpp 文件 解决办法&#xff1a; 1.最直接的&#xff1a;重新创建类&#xff0c;…

scrapy post请求——百度翻译(十四)

scrapy处理 post 请求 爬取百度翻译界面 目录 1.创建项目及爬虫文件 2.发送post请求 1.创建项目及爬虫文件 scrapy startproject scrapy_104 scrapy genspider translate fanyi.baidu.com 2.发送请求 post请求需要传递参数&#xff0c;所以就不能用start_urls和parse函数了&…

NSSCTF第16页(1)

[湖湘杯 2021 final]vote 是有附件&#xff0c;下载下来解压 在/vote-1637654763\www\routes下找到了源码 这道题的考点是 AST配合Pug模板引擎实现注入 有现成的payload p6.is 主要代码&#xff0c;需要满足if语句,从而可以执行compile语句 { "__proto__.hero":…

re:Invent 产品体验与感受分享:Amazon ElastiCache Serverless 缓存的即时扩展

授权说明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在亚马逊云科技开发者社区、 知乎、自媒体平台、第三方开发者媒体等亚马逊云科技官方渠道&#xff09;。 文章目录 前言产品介绍产品使用步骤1.创建缓存服务2.安全组开放访问权限…

壹[1],函数:ReadImage

C形式 LIntExport void ReadImage( HObject* Image, const HTuple& FileName); //参数1&#xff1a;读取的Image //参数2&#xff1a;图片地址//备注说明&#xff1a; //头文件&#xff1a;halconcpp/HOperatorSet.h //命名空间&#xff1a;namespace HalconCpp C#形式 …

用Python画圣诞树!(附代码)

本文我们将用 Python 来画一棵圣诞树&#xff0c;效果如下图所示&#xff0c;先睹为快。 下面展开来看一下主要代码实现。 1.turtle库 turtle库是Python语言中一个很流行的绘制图像的函数库&#xff0c;想象一个小乌龟&#xff0c;在一个横轴为x、纵轴为y的坐标系原点&#x…

如何使用Docker进行容器的备份和恢复

一 简介&#xff1a; 在使用Docker进行应用程序的容器化部署时&#xff0c;我们经常需要对容器进行备份和恢复操作。备份容器可以保证数据的安全性&#xff0c;而恢复操作可以帮助我们快速恢复出现问题的容器。本文将介绍如何使用Docker进行容器的备份和恢复&#xff0c;同时提…

C#科学绘图之scottPlot绘制多个图像

文章目录 示例移除图像图例信号图 scott系列&#xff1a;绘图初步 示例 从名字就能看出&#xff0c;ScottPlot的绘图函数AddScatter的作用是为图窗添加数据点&#xff0c;换言之&#xff0c;每调用一次AddScatter&#xff0c;就可以在图窗中添加一组图像。下面添加两个按钮&a…

动手学深度学习-自然语言处理-预训练

词嵌入模型 将单词映射到实向量的技术称为词嵌入。 为什么独热向量不能表达词之间的相似性&#xff1f; 自监督的word2vec。 word2vec将每个词映射到一个固定长度的向量&#xff0c;这些向量能更好的表达不同词之间的相似性和类比关系。 word2vec分为两类&#xff0c;两类…

UE4 UMG 颜色字体和PS对应关系

与PS中对应的是Hex sRGB色号 但是PS中采用的16进制色号为6位 UE4中的为8位 UMG制作时默认dpi为96像素/英寸&#xff0c;psd默认dpi是72像素/英寸。 在GUI设计时将dpi设为96&#xff0c;或者将72dpi下字体的字号乘以0.75&#xff0c;都能还原效果图中的效果。

【NTN 卫星通信】Starlink,卫星互联网的技术革命(一)

1. 什么是Starlink Starlink是由Elon Musk创立的私人太空探索公司SpaceX提供的卫星互联网服务。它旨在为世界上传统互联网服务速度慢或不可用的偏远地区提供价格合理的高速互联网。 为什么Starlink很重要&#xff1f;   Starlink之所以重要&#xff0c;是因为它有可能为数百万…

typescript 实现Optional

我们先看下面的这段代码,一个学生接口,里面有成员id,name,age,gender等等成员, 有一个方法graduate,里面要接受一个Student类型的实参 interface Student {id: numbername: stringage: numbergender: string}function graduate(Student: Student) {//...}现在有一个问题,就是学…