使用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()
相关推荐
Passerby_K7 小时前
vue3+dhtmlx 甘特图真是案例
前端·vue·甘特图
码农研究僧8 小时前
Vue3 上传后的文件智能预览(实战体会)
vue·html·图片预览
Bald Monkey9 小时前
【Element Plus】解决移动设备使用 el-menu 和 el-sub-menu 时,子菜单需要点击两次才会隐藏的问题
前端·elementui·vue·element plus
朝阳3912 小时前
Electron Forge【实战】百度智能云千帆大模型 —— AI聊天
electron
顾青12 小时前
在 Electron 中引入本地谷歌插件
前端·electron
顾青12 小时前
Electron自定义安装脚本
前端·electron
若愚679212 小时前
Vue3 + OpenLayers 开发教程 (五)移动端适配与数据可视化
前端·arcgis·vue
若愚679212 小时前
Vue3 + OpenLayers 开发教程 (四) 样式配置与性能优化
前端·arcgis·vue
佩奇的技术笔记13 小时前
桌面端开发技术栈选型:开启高效开发之旅
electron
若愚679213 小时前
Vue3 + OpenLayers 开发教程 ( 三 ) 交互与空间分析
arcgis·vue·交互