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

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

ruisui882个月前 (03-01)技术分析9

一.先创建一个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

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/2366.html

分享给朋友:

“vue+electron创建桌面端应用和打包发布” 的相关文章

vue中组件之间的通信方式

** 1.1 父子组件**a. 父向子传数据: 第1种: 父通过属性传值,子组件通过props接收数据(注:props传过来的数据是单向的,不可以进行修改)第2种:子组件可以通过$parent来获取父组件里的数据和调用父组件的方法(注:数据是双向的,还要注意如用了UI组件并且在该UI组件里重新定义一...

Vue.js 组件通信的 3 大妙招

在 Vue.js 中,组件化是其核心概念之一,允许你将复杂的界面拆分成多个独立的、可复用的组件。在构建大型应用时,如何高效地在组件之间传递数据和触发事件是非常重要的。Vue.js 提供了多种方式来处理组件间的通信,下面是最常用的 3 种方式:1.父子组件通信:通过 Props 和 Events在 V...

Gitlab 的使用和代码审查流程介绍

1、先简洁介绍下项目常用的信息-面板统计页面2、用户信息面板3、服务器信息4、项目信息5、重点介绍代码提交审核机制和授权合并机制开发人员推送代码的时候不能直接推送到master,否则就会报错。此时开发人员要本地新建分支然后在提交上来列出修改了哪些细节管理员可以管理这些分支合并到master6、指派合...

el-table内容\n换行解决办法

问题请求到的数据带有换行符 '\n'但页面展示时不换行statusRemark: "\"1、按期完成计划且准确率100%,得100分;\n2、各项目每延误1天,扣1分;每失误1次或者员工投诉1次,扣3分,失误层面达到公司级影响较大的,该项绩效分数为0\"\n&...

2024最新版:前端性能优化方案汇总

前端训练营:1v1私教,终身辅导计划,帮你拿到满意的 offer。 已帮助数百位同学拿到了中大厂 offer。欢迎来撩~~~~~~~~Hello,大家好,我是 Sunday。前端性能优化一直是很多同学非常关注的问题,在日常的面试中也是经常会被问到的点。所以今天咱们就花一点时间来了解一下2024最新的...

一文让你彻底搞懂 vue-Router

路由是网络工程里面的专业术语,就是通过互联把信息从源地址传输到目的地址的活动。本质上就是一种对应关系。分为前端路由和后端路由。后端路由:URL 的请求地址与服务器上的资源对应,根据不同的请求地址返回不同的资源。前端路由:在单页面应用中,根据用户触发的事件,改变URL在不刷新页面的前提下,改变显示内容...