当前位置:首页 > 技术文章 > 正文内容

vue+electron创建桌面端应用和打包发布

zonemu3周前 (09-24)技术文章16

一.先创建一个vue项目:

1.创建vue项目:

vue create myelectronapp

2.选择Vue 3:


3.安装完成:


4.进入项目的根目录:

cd myelectronapp

5.运行vue项目:

yarn serve

6.成功启动vue项目:

二.安装election包

vue脚手架3.0的插件
vue-cli-plugin-electron-builder 帮助vue脚手架直接引入Electron的依赖,并生成相关文件和配置

1.安装并调用
vue-cli-plugin-electron-builder的生成器:

vue add electron-builder

2.选择最新的electron版本:


3.安装完成:


4.在项目的根目录下运行启动命令:

yarn electron:serve
或者
npm run electron:serve

5.成功启动桌面应用:


6.构建打包命令:

yarn electron:build
或者
npm run yarn electron:build

7.构建完成:

8.可以看到构建输出目录生成对应的xxx.exe文件,这个就是桌面应用的安装包,点击可以安装桌面应用。


备注:
electron官方地址:

https://www.electronjs.org

electron文档地址:
https://github.com/electron/electron/tree/master/docs

electron接口文档
api:https://www.electronjs.org/docs/api

相关文章

同事git push到主分支上了,技术总监怒了

事情是这样的,同事前几天提交使用git提交代码的时候不小心提交到主分支上了,关键还提交成功了,这可是他自己开发的模块,还没测试的呢。技术总监也知道了,这下他慌乱了。最后还是技术总监给他兜底了。为了防止...

在 Spring Boot3 中操作 GitLab API 的全面指南

在当今互联网大厂的后端开发工作中,高效管理代码版本和项目协作至关重要。GitLab 作为强大的版本控制系统,其 API 为开发人员提供了丰富的操作可能性。本文将深入探讨如何在 Spring Boot3...

数组、去重、排序、合并、过滤、删除

ES6数字去重 Array.from(new Set([1,2,3,3,4,4])) //[1,2,3,4] [...new Set([1,2,3,3,4,4])] //[1,2,3,4]2...

2021系列——JavaScript比较数组的7种方法

本文我会介绍一些基于Property值对数组进行排序的方法,希望这些技巧能够对你2021年的JS代码编写有点点帮助。多多少少在JS中,我们会碰到某种方式来比较两个对象数组并找出差异,当然也可能是比较并...

10 个鲜为人知但非常有用的 Linux 命令

Linux 是一个功能强大的操作系统,其命令行工具为用户提供了无限的可能性。除了广为人知的命令如 ls、cd 和 grep,Linux 中还隐藏着许多鲜为人知但极其实用的命令。这些工具往往功能强大,能...

PHP高级过滤器 - 提升数据过滤和验证的能力

PHP高级过滤器 - 提升数据过滤和验证的能力示例代码demo:```php <?php // 检测一个数字是否在一个范围内 $number = 50; $min = 1; $max = 100...