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

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

相关文章
|
21天前
|
存储
最新款electron38+vite7+vue3.5+pinia3桌面客户端聊天程序
最新原创electron38+vite7+vue3 setup+pinia3+element-plus电脑端仿微信聊天EXE应用。
49 1
|
9月前
|
人工智能 移动开发 JavaScript
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
849 18
|
8月前
|
安全 Linux 开发工具
零基础构建开源项目OpenIM桌面应用和pc web- Electron篇
OpenIM 为开发者提供开源即时通讯 SDK,作为 Twilio、Sendbird 等云服务的替代方案。借助 OpenIM,开发者可以构建安全可靠的即时通讯应用,如 WeChat、Zoom、Slack 等。 本仓库基于开源版 OpenIM SDK 开发,提供了一款基于 Electron 的即时通讯应用。您可以使用此应用程序作为 OpenIM SDK 的参考实现。本项目同时引用了 @openim/electron-client-sdk 和 @openim/wasm-client-sdk,分别为 Electron 版本和 Web 版本的 SDK,可以同时构建 PC Web 程序和桌面应用(Wi
507 2
|
11月前
|
JSON JavaScript 前端开发
开发桌面程序-Electron入门
【10月更文挑战第16天】Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的框架,嵌入了 Chromium 和 Node.js。本文介绍了如何搭建 Electron 开发环境,包括安装 Node.js、创建项目、配置 main.js 和打包应用。通过简单的步骤,你可以快速创建并运行一个基本的 Electron 应用程序。
492 4
开发桌面程序-Electron入门
|
12月前
|
JavaScript API
使用vue3+vite+electron构建小项目介绍Electron进程间通信
使用vue3+vite+electron构建小项目介绍Electron进程间通信
1447 3
|
12月前
|
JavaScript 前端开发
如何使用Vue.js构建响应式Web应用程序
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用程序
|
12月前
|
开发框架 缓存 前端开发
electron-builder 解析:你了解其背后的构建原理吗?
本文首发于微信公众号“前端徐徐”,详细解析了 electron-builder 的工作原理。electron-builder 是一个专为整合前端项目与 Electron 应用的打包工具,负责管理依赖、生成配置文件及多平台构建。文章介绍了前端项目的构建流程、配置信息收集、依赖处理、asar 打包、附加资源准备、Electron 打包、代码签名、资源压缩、卸载程序生成、安装程序生成及最终安装包输出等环节。通过剖析 electron-builder 的原理,帮助开发者更好地理解和掌握跨端桌面应用的构建流程。
703 2
|
12月前
|
开发框架 JavaScript 前端开发
Electron技术深度解析:构建跨平台桌面应用的利器
【10月更文挑战第13天】Electron技术深度解析:构建跨平台桌面应用的利器
753 0
|
JavaScript 开发工具 git
Electron V8排查问题之构建时报错 "user32.lib is not found in LIB"如何解决
Electron V8排查问题之构建时报错 "user32.lib is not found in LIB"如何解决
126 1
|
JavaScript Windows
electron程序运行在某些 windows 上白屏
electron程序运行在某些 windows 上白屏