vue-cli3搭配vue-cli-plugin-electron-builder构建桌面端程序

简介: vue-cli3搭配vue-cli-plugin-electron-builder构建桌面端程序

注意:本项目使用的是vue3的脚手架配合vue-cli-plugin-electron-builder插件搭建

第一步:用vue-cli3.0创建一个项目

vue create projectName

当前步骤就是安装vue-cli3.0,一步步按照程序走安装就好。

第二步:安装vue-cli-plugin-electron-builder

vue add vue-cli-plugin-electron-builder

当前步骤安装好后会自动在package.json里生成几行代码如下:


image.png


WX20220313-155227@2x.png

第三步:运行项目

npm run electron:serve

image.png

1.png

第四步:打包项目

npm run electron:build

打包成功后的文件如下:


image.png


3.png

到此一个简单的项目就搭建完成了;当然这只是理想的情况,而且是比较基础和简单的场景。当你在配置或者打包的时候会遇到安装或者打包报错的问题,这些问题需要自己手动解决。后续会逐步补充在使用中遇到的常见的一些问题。

相关文章
|
1月前
|
JSON JavaScript 前端开发
开发桌面程序-Electron入门
【10月更文挑战第16天】Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的框架,嵌入了 Chromium 和 Node.js。本文介绍了如何搭建 Electron 开发环境,包括安装 Node.js、创建项目、配置 main.js 和打包应用。通过简单的步骤,你可以快速创建并运行一个基本的 Electron 应用程序。
开发桌面程序-Electron入门
|
6月前
|
资源调度 JavaScript 前端开发
IM跨平台技术学习(十一):环信基于Electron打包Web IM桌面端的技术实践
这次借着论证 Web IM端 SDK 是否可以在 Electron 生成的桌面端正常稳定使用,我决定把官方新推出的 webim-vue3-demo,打包到桌面端,并记录了这次验证的过程以及所遇到的问题和解决方法。
108 2
|
2月前
|
JavaScript API
使用vue3+vite+electron构建小项目介绍Electron进程间通信
使用vue3+vite+electron构建小项目介绍Electron进程间通信
518 3
|
2月前
|
JavaScript 前端开发
如何使用Vue.js构建响应式Web应用程序
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用程序
|
2月前
|
开发框架 缓存 前端开发
electron-builder 解析:你了解其背后的构建原理吗?
本文首发于微信公众号“前端徐徐”,详细解析了 electron-builder 的工作原理。electron-builder 是一个专为整合前端项目与 Electron 应用的打包工具,负责管理依赖、生成配置文件及多平台构建。文章介绍了前端项目的构建流程、配置信息收集、依赖处理、asar 打包、附加资源准备、Electron 打包、代码签名、资源压缩、卸载程序生成、安装程序生成及最终安装包输出等环节。通过剖析 electron-builder 的原理,帮助开发者更好地理解和掌握跨端桌面应用的构建流程。
217 2
|
2月前
|
开发框架 JavaScript 前端开发
Electron技术深度解析:构建跨平台桌面应用的利器
【10月更文挑战第13天】Electron技术深度解析:构建跨平台桌面应用的利器
240 0
|
4月前
|
JavaScript 开发工具 git
Electron V8排查问题之构建时报错 "user32.lib is not found in LIB"如何解决
Electron V8排查问题之构建时报错 "user32.lib is not found in LIB"如何解决
53 1
|
4月前
|
容器 iOS开发 Linux
震惊!Uno Platform 响应式 UI 构建秘籍大公开!从布局容器到自适应设计,带你轻松打造跨平台完美界面
【8月更文挑战第31天】Uno Platform 是一款强大的跨平台应用开发框架,支持 Web、桌面(Windows、macOS、Linux)及移动(iOS、Android)等平台,仅需单一代码库。本文分享了四个构建响应式用户界面的最佳实践:利用布局容器(如 Grid)适配不同屏幕尺寸;采用自适应布局调整 UI;使用媒体查询定制样式;遵循响应式设计原则确保 UI 元素自适应调整。通过这些方法,开发者可以为用户提供一致且优秀的多设备体验。
197 0
|
4月前
|
前端开发 JavaScript API
强强联手打造桌面应用新标杆:Angular与Electron的完美融合——从环境搭建到通信机制,全面解析构建跨平台应用的最佳实践与技巧
【8月更文挑战第31天】随着Web技术的进步,开发者们越来越多地采用Web技术来构建桌面应用程序。通过结合使用开源框架Electron及前沿的前端框架Angular,开发者能充分利用JavaScript、HTML和CSS打造出高性能且易维护的跨平台桌面应用。本文将详细介绍如何搭建基于Angular与Electron的开发环境,包括创建Angular项目、安装Electron及相关依赖、配置Electron主进程以及实现Angular应用与Electron间的通信等关键步骤,并最终将应用打包成多平台可执行文件,为读者提供了一套完整的解决方案以快速入门并实践这一强大技术组合。
156 0
|
4月前
|
开发工具 Windows
Electron V8排查问题之构建 Electron 源码时遇到 dugite 下载失败如何解决
Electron V8排查问题之构建 Electron 源码时遇到 dugite 下载失败如何解决
54 0