使用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()
相关推荐
杉之4 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
@PHARAOH9 小时前
WHAT - Electron 系列(一)
前端·javascript·electron
loriloy9 小时前
Electron崩溃问题排查指南
javascript·electron
剑亦未配妥11 小时前
Vue2函数式组件实战:手写可调用的动态组件,适用于toast轻提示、tip提示、dialog弹窗等
前端·vue.js·vue
蔓越莓19 小时前
[Electron] app.quit 会对哪些资源进行清理?
前端·electron
斯~内克1 天前
Electron 菜单系统深度解析:从基础到高级实践
前端·javascript·electron
wuaro1 天前
RBAC权限控制具体实现
前端·javascript·vue
蔓越莓2 天前
[Electron] win.setSize 在RTL布局下的表现,是否需要适配?
前端·electron
前端互助会3 天前
AILabel标注工具指南(二):禁止图片外标注
vue·ailabel
枫声4 天前
耗时一个月,我用Electron开发了一个剪贴板工具
electron