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

如果可以实现记得点赞分享，谢谢老铁～

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 的桌面应用程序，这样会更加可靠和稳定。

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

代码随想录27期|Python|Day15|二叉树|层序遍历|对称二叉树|翻转二叉树

代码随想录27期|Python|Day15|二叉树|层序遍历|对称二叉树|翻转二叉树

本文图片来源：代码随想录 层序遍历（图论中的广度优先遍历） 这一部分有10道题，全部可以套用相同的层序遍历方法，但是需要在每一层进行处理或者修改。 102. 二叉树的层序遍历 - 力扣（LeetCode） 层…
阅读更多...
C++入门(浅谈类和对象）

C++入门(浅谈类和对象）

1 命名空间 1-1命名空间的定义 定义命名空间的目的是为了不与标识符的名称进行冲突，命名空间中可以定义函数，变量，类型。 比如：这里的rand和strlens其实是函数，在命名空间中可以避免与全局作用域中的rand函数和strlen…
阅读更多...
编程性能调优方案

编程性能调优方案

微信公众号转载，关注微信公众号掌握更多技术动态 --------------------------------------------------------------- 一、字符串与集合性能优化 1.String 对象的实现 在 Java 语言中，Sun 公司的工程师们对 String 对象做了大量的优化，来节…
阅读更多...
2024测试开发面试题完整版本（附答案）

2024测试开发面试题完整版本（附答案）

目录 1. 什么是软件测试， 谈谈你对软件测试的了解 2. 我看你简历上有写了解常见的开发模型和测试模型, 那你跟我讲一下敏捷模型 3. 我看你简历上还写了挺多开发技能的, 那你给我讲讲哈希表的实现流程 4. 谈一谈什么是线程安全问题, 如何解决 5. 既然你选择走测…
阅读更多...
Java_泛型

Java_泛型

泛型类 认识泛型 所谓泛型指的是&#xff0c;在定义类、接口、方法时&#xff0c;同时声明了一个或者多个类型变量&#xff08;如&#xff1a;< E >&#xff09;&#xff0c;称为泛型类、泛型接口、泛型方法、它们统称为泛型。 作用:泛型提供了在编译阶段约束所能操作的…
阅读更多...
f盘隐藏的文件夹怎么找出来？介绍几种有效方法

f盘隐藏的文件夹怎么找出来？介绍几种有效方法

在计算机中&#xff0c;我们经常会遇到隐藏的文件或文件夹&#xff0c;在F盘中隐藏的文件夹也不例外。隐藏的文件夹可能是由系统生成的&#xff0c;或者是用户自行设定的隐私文件夹。无论是因为误操作还是出于其他原因&#xff0c;如果你想找出F盘中的隐藏文件夹&#xff0c;本…
阅读更多...
壹[1],函数:ReadImage

壹[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#形式 …
阅读更多...
perl脚本中使用eval函数执行可能有异常的操作

perl脚本中使用eval函数执行可能有异常的操作

perl脚本中有时候执行的操作可能会引发异常&#xff0c;为了直观的说明&#xff0c;这里举一个json反序列化的例子&#xff0c;脚本如下&#xff1a; #! /usr/bin/perl use v5.14; use JSON; use Data::Dumper;# 读取json字符串数据 my $json_str join(, <DATA>); # 反…
阅读更多...
SpringMVC的文件上传、多文件上传

SpringMVC的文件上传、多文件上传

概念&#xff1a;上传/下载应用 对于上传功能&#xff0c;我们在项目中是经常会用到的&#xff0c;比如用户注册的时候&#xff0c;上传用户头像&#xff0c;这个时候就会使用到上传的功能。而对于下载&#xff0c;使用场景也很常见&#xff0c;比如我们项目中有个使用说明是是…
阅读更多...
如何提升数据结构方面的算法能力？

如何提升数据结构方面的算法能力？

谈及为什么需要花时间学算法&#xff0c;我至少可以列举出三个很好的理由。 (1)性能&#xff1a;选择正确的算法可以显著提升应用程序的速度。仅就搜索来说&#xff0c;用二分查找替 换线性搜索就能为我们帶来巨大的收益。 (2)安全性&#xff1a;如果你选用了错误的算法&…
阅读更多...
小小手表探索更多 好玩伴也是好帮手

小小手表探索更多 好玩伴也是好帮手

华为儿童手表 5X 不仅是孩子的好玩伴&#xff0c;也是家长的好帮手。全能形态让小小手表探索更多&#xff0c;高清双摄记录美好&#xff0c;离线定位随时掌握&#xff0c;绿色纯净守护成长&#xff0c;让孩子享受科技带来的安全与乐趣。
阅读更多...
vue3.0项目搭建

vue3.0项目搭建

一、安装vue3脚手架 卸载vue2脚手架 npm uninstall -g vue-cli清除缓存 npm cache clen --force安装最新脚手架 npm install -g vue/cli查看脚手架版本 vue -V 二、构建项目 创建项目 vue create 项目名选择配置 自定义配置&#xff0c;回车 上下键选择Linter / Formatter&a…
阅读更多...
【超图】SuperMap iClient3D for WebGL/WebGPU ——暴雪

【超图】SuperMap iClient3D for WebGL/WebGPU ——暴雪

作者&#xff1a;taco 时隔多年北京又开始降下了特大暴雪。身为打工人的你有没有居家办公呢&#xff1f;反正小编我是没有。既然没有借着暴雪的功劳居家办公&#xff0c;那就接着雪来输出一篇博客好了。基于SuperMap iClient3D for WebGL/WebGPU 实现暴雪仿真效果。 先来看下效…
阅读更多...
今日最新版早安问候大全，身体健康，平安幸福！

今日最新版早安问候大全，身体健康，平安幸福！

1&#xff0e;只想用不打扰你的方式轻轻地告诉你&#xff0c;我在惦记你。只希望你看到这个短信的时候&#xff0c;嘴角泛起灿烂的一笑!让身边的人知道你是幸福的&#xff0c;看短信的&#xff0c;我在问候你啊。早安~ 2&#xff0e;晨曦在呼叫&#xff0c;鸟儿在鸣叫&#xff…
阅读更多...
【Hive】——DDL（TABLE）

【Hive】——DDL（TABLE）

1 查询指定表的元数据信息 如果指定了EXTENDED关键字&#xff0c;则它将以Thrift序列化形式显示表的所有元数据。 如果指定了FORMATTED关键字&#xff0c;则它将以表格格式显示元数据。 describe formatted student&#xff1b;2 删除表 如果已配置垃圾桶且未指定PURGE&…
阅读更多...
复杂填报逻辑的支持

复杂填报逻辑的支持

复杂填报逻辑的支持 一般填报表应用场景分为两种&#xff1a; 旧数据的维护 现有数据存储中已有一些数据&#xff0c;需要人工在页面对数据进行修改维护。 新数据的采集。 现有数据存储中没有数据&#xff0c;需要人工页面填写录入数据。 简单的数据维护与采集&#xff0…
阅读更多...
Mysql 的ROW_NUMBER() 和分区函数的使用 PARTITION BY的使用

Mysql 的ROW_NUMBER() 和分区函数的使用 PARTITION BY的使用

Mysql 的ROW_NUMBER() 和分区函数的使用 PARTITION BY的使用 描述： 遇到了一个需求，需要查询用户id和计划id，但是人员id的是重复，我想把人员id去重，支取一个。自然而然的就想到了SELECT DISTINCT prj_plan.last_month_user,prj_plan.id FROM prj_funds_plan prj_plan 但是…
阅读更多...
Linux arm架构下构建Electron安装包

Linux arm架构下构建Electron安装包

上篇文章我们介绍 Electron 基本的运行开发与 windows 安装包构建简单流程&#xff0c;这篇文章我们从零到一构建 Linux arm 架构下安装包&#xff0c;实际上 Linux arm 的构建流程&#xff0c;同样适用于 Linux x86 环境&#xff0c;只不过需要各自的环境依赖&#xff0c;Linu…
阅读更多...
java中，用函数对象表示策略

java中，用函数对象表示策略

简而言之&#xff0c;函数指针的主要用途就是实现策略(Strategy)模式。 Java没有提供函数指针&#xff0c;但是可以用对象引用实现相同的功能。调用对象上的方法通常是执行该对象上某项操作。 在Java中&#xff0c;使用函数对象&#xff08;Function Object&#xff09;表示策…
阅读更多...
Elasitcsearch--解决CPU使用率升高

Elasitcsearch--解决CPU使用率升高

原文网址&#xff1a;Elasitcsearch--解决CPU使用率升高_IT利刃出鞘的博客-CSDN博客 简介 本文介绍如何解决ES导致的CPU使用率升高的问题。 问题描述 线上环境 Elasticsearch CPU 使用率飙升常见问题如下&#xff1a; Elasticsearch 使用线程池来管理并发操作的 CPU 资源。…
阅读更多...
最新文章

Copyright @ 2022~2023