如何在一个vue项目中集成electron框架

原创 已于 2023-05-29 16:09:50 修改 · 1.2k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #electron #javascript

于 2023-05-29 15:40:37 首次发布
该文指导如何在Vue项目中添加Electron支持，无需改变Vue的原有结构。首先，通过vueaddelectron-builder安装Electron。接着，使用npmrunelectron:serve启动项目，在浏览器中预览。然后，运行npmrunelectron:build构建桌面应用。最后，检查package.json以了解启动方式。首次构建可能较慢，最终会生成一个桌面应用程序。

将electron框架集成到vue文件中，不改变vue文件的原有结构

 1、在vue文件中安装electron框架，运行代码

vue add electron-builder

nde为v16的，electron版本一般选择 "electron": "^13.0.0",

2、启动项目

npm run electron:serve

这样就能在网页中打开咱们的vue项目

3、构建桌面应用程序

npm run electron:build

4、打开你的文件中的package文件，查看启动方式

 运行代码：

npm run electron：serve

这个过程耗时会比较久，耐心等待，首次加载时会先出现一个网页，然后在构建桌面程序

5、桌面程序构建完成

音柒smile
关注
vue3项目集成electron
cyj0919的博客
04-10 459
使用 `contextIsolation` 和 `preload` 脚本安全地暴露 API。执行后会在 `src` 目录下生成 `background.js` 主进程文件。避免直接使用 `nodeIntegration: true`1. 确保已安装 Node.js (建议版本 16.x 或更高)- 开发时使用 `Chrome DevTools`可根据需要更改background.js 主进程文件。- 处理平台特定的菜单和快捷键。- 为不同平台提供适当的图标。- 生产环境添加日志系统。
如何正确的安装Electron，并完成vue3+electron的环境搭建
不喜欢BUG，喜欢前端的日子
08-22 4992
本文主要介绍了，如何使用 vue3+electron 的环境搭建配置，其中比较重要的就是在安装 electron 的时候碰到的下载问题如何解决和启动 electron 的时候如何把 vue 内嵌至 electron中，在运行项目的时候正确的启动项目。前人裁树,后人乘凉，希望大家在搭建的时候不会遇到任何bug，欢迎一起交流
如何将一个vue项目集成到electron框架中
Yw2026的博客
05-29 2126
5、 打开我们的electron文件，找到其中的frontend文件，将我们的压缩包移动到electron文件中，并改名为frontend，解压缩，替换掉frontend文件，如下图。1、electron是一个桌面应用程序的框架，可以将vue项目集成为一个桌面应用程序。压缩的目的是为了更好的将项目文件复制到我们的electron框架中。这样我们的frontend文件中就装着我们的vue项目文件了。6、打开electron文件，运行代码。7、这样就可以运行我们的桌面程序了。3、下载后将你需要集成的项目打包。
vue配置electron，使用electron-builder进行打包【完整步骤】
热门推荐
CMDN123456的博客
08-05 1万+
vue配置electron，使用electron-builder进行打包【完整步骤】
Electron-Vue 桌面应用打包实战指南
最新发布
weixin_42608299的博客
07-30 1047
Electron-Vue 是一个将 Vue.js 集成到 Electron 框架中的项目，它利用 Electron 的能力，使得我们能够在桌面应用中使用 Vue.js 来构建用户界面。这种结合不仅继承了 Vue.js 轻量、易于维护和学习的优势，同时也能够通过 Electron 轻松地访问底层的系统资源，为用户提供丰富的桌面端应用体验。Electron 提供了一系列的模块，用以处理桌面应用的各个方面，如窗口管理、进程间通信、系统通知等。这些模块大多基于 Node.js 的核心模块，如。
Electron系列 -- vue项目嵌套electron打包成桌面应用(上)
m0_71071209的博客
07-11 2013
是一个生成图标的包安装package.json 中配置命令},执行命令, 生成icon完成后会在根目录多出来一个build目录在vue.config.js 中, 也要将路径进行调整删除原来的，重新打包，安装后就是新图标了。
在vue2.0 项目中集成 Electron 实现桌面端应用
weixin_45341912的博客
07-19 2080
在当前项目中安装electron相关工具。
vue3集成electron
I_xuebi的博客
05-17 8634
vue3 vue 集成 electron 白屏 打包
Electron项目中通过electron-vue + electron-builder + electron-updater实现远程更新（包含源码）
04-01
在电子应用开发中，使用Electron框架可以构建跨平台的桌面应用程序。为了保持软件的最新状态，开发者通常会采用远程更新机制。本项目利用`electron-vue`、`electron-builder`和`electron-updater`这三款强大的工具，...
Electron+vite+vue3+ts+pinia+sqlite项目开发框架及案例
06-30
结合以上技术和工具，一个以Electron、Vite、Vue 3、TypeScript、Pinia和SQLite为基础的项目开发框架可以提供完整的解决方案，以构建出性能优异、易于维护的桌面应用。通过这样的框架，开发者可以实现应用的快速构建...
利用WebAudioAPI在electron+vue项目中实现录音功能.zip
10-21
这个压缩包很可能包含了一个名为"recorder-electron-vue"的项目模板或示例代码，它展示了如何在Electron和Vue环境中集成Web Audio API实现录音功能。代码中可能包含了实现上述步骤的JavaScript文件，如`main.js`...
vue项目中添加electron
darlene2929的博客
11-18 1788
1.在package.json中添加 "main": "electron.js", 在 “scripts”: {添加： "package": "electron-packager ./ appName --overwrite" 在"dependencies": {添加： "electron-share-memory": "^1.0.1", "node-gyp-build": "^4.3.0", "vue-photo-preview": "^1.1.3", 在 “devDepe
手动整合electron和vue
09-02
手动整合electron和vue，博客地址：https://blog.csdn.net/qq_40488121/article/details/108360862
vue安装electron事项
晨曦的博客
11-11 938
(node -v / npm -v),但要注意这里node版本需要尽可能对应,我把我找的对应版本的表提供出来了,会放在文末.如果提示npm版本过低,就升级npm(cnpm install npm@latest -g)4.然后输入yarn install electron --save-dev,可能比较慢,也可能会连接不上,这时我们就可以选中镜像文件到下载:对单独electron包做镜像,具体教程我会放在文末。1.确认安装node.js,(这个自行安装,网上自己找)我使用的是这个命令,可以看到下载进度。
【架构】vue-cli集成electron
zyy_333的博客
06-05 1285
本文介绍了一种快速将Web应用转换为桌面端程序，实现代码复用、跨平台部署和便捷更新
向vue中集成electron（使用electron-builder插件直接将electron集成到自己的项目）
qq_45787691的博客
09-01 6006
使用 vue add electron-builder将electron直接集成到vue项目中。
Vue+Electron项目搭建
microcosm1994的博客
01-19 387
插件地址：vue-cli-plugin-electron-builder 搭建步骤 1、安装vue脚手架 npm install -g @vue/cli 2、创建项目 vue create myproject 3、配置Electron 进入项目目录运行命令：vue add electron-builder 4、启动项目 npm run electron:serve ...
Electron+vue的使用
俊人呀的博客
03-02 740
.现如今前端框架数不胜数，尤其是angular、vue吸引一大批前端开发者，在这个高新技术快速崛起的时代，自然少不了各种框架的结合使用。接下来是介绍electron+vue的结合使用。 2.Electron是什么？？ 对于我来说Electron相当于一个浏览器的外壳，可以把网页程序嵌入到壳里面，可以运行在桌面上的一个程序，可以把网页打包成一个在桌面运行的程序，通俗来说就是软件，比如像QQ、优酷、网易音乐等等。功能的强大超出你的想象，可以构建跨平台桌面程序，本身支持node.js，可以使用nod...
如何在Vue3项目中集成Electron并实现监听键盘事件的功能？
12-20
在Vue3项目中集成Electron主要是为了创建桌面应用程序，你可以按照以下步骤进行： 1. **安装依赖**: - 首先，在你的Vue3项目目录中安装`electron-forge`（用于构建 Electron 应用程序）和`vue-cli-plugin-electron...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值