使用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()
相关推荐
vvilkim3 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim3 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
喜欢敲代码的程序员4 小时前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
海的诗篇_7 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
sunbyte12 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
Cacciatore->1 天前
Electron 快速上手
javascript·arcgis·electron
vvilkim1 天前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
skyymrj10 天前
Vue3 + Tailwind CSS 后台管理系统教程
前端·css·vue
程序猿小D10 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+Vue实现的校园二手交易平台管理系统,推荐!
java·数据库·mysql·spring·vue·毕业设计·校园二手交易平台
ZJ_.10 天前
Electron自动更新详解—包教会版
linux·前端·javascript·windows·electron·前端框架·node.js