使用Electron将vue项目改桌面程序

1,一个简单的实现案例

shell 复制代码
# 切换镜像,其他镜像:https://registry.npm.taobao.org/
npm config set registry https://registry.npmmirror.com/ 
# 推荐使用yarn来管理依赖包,相对于Node.js自带的npm包管理工具来说,它具有速度更快、使用更简捷、操作更安全的特点
npm install -g yarn
# 安装Vue CLI
yarn global add @vue/cli
# 使用Vue CLI创建一个Vue项目,如果提示vue命令不存在,执行yarn global bin ,将输出的yarn路径添加到环境变量的path中
# 这里选择使用vue3
vue create chapter3_4
# 安装Vue插件electron-builder,过程中会提示你选择Electron的版本,选择最新版即可
vue add electron-builder
# 启动程序
yarn electron:serve

启动后的效果如图:

2,部分代码介绍

  • 在没有开发完全之前,这个桌面程序可以当作一般vue网页来开发,启动用yarn serve 来启动
  • 要关闭桌面端默认打开的调试窗口,直接注释掉background.js中的win.webContents.openDevTools()
相关推荐
阿标的博客9 小时前
Electron学习(一):创建第一个应用并打包成功
electron
胡斌附体9 小时前
使用Electron创建helloworld程序
前端·javascript·electron·nodejs·pc
大美B端工场-B端系统美颜师9 小时前
工控软件开发选择难?Electron、Qt、WPF 对比
qt·electron·wpf
toobeloong9 小时前
Electron 从低版本升级到高版本 - webview通信的改造
前端·javascript·electron
#做一个清醒的人12 小时前
【electron6】Web Audio + AudioWorklet PCM 实时采集噪音和模拟调试
前端·javascript·electron·pcm
duandashuaige14 小时前
解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
javascript·typescript·electron·npm·vue·html
java水泥工20 小时前
旅游管理系统|基于SpringBoot和Vue的旅游管理系统(源码+数据库+文档)
spring boot·vue·计算机毕业设计·java毕业设计·旅游管理系统
duansamve2 天前
Vue3与Vue2中使用对比
vue
Jeffrey__Lin3 天前
解决ElementPlus使用ElMessageBox.confirm,出现层级低于el-table的问题
前端·javascript·elementui·vue·elementplus