使用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()
相关推荐
软件20510 小时前
【vue3主题切换】
vue
豆豆(设计前端)14 小时前
如何成为高级前端开发者:系统化成长路径。
前端·javascript·vue.js·面试·electron
结衣结衣.16 小时前
Vue3入门-计算属性+监听器
前端·javascript·vue.js·vue·js
伍哥的传说1 天前
Webpack5 新特性与详细配置指南
webpack·前端框架·vue·vue3·react·webpack5·前端构建
xaboy3 天前
Vue 开源项目低代码表单设计器 FcDesigner v3.3 版本发布!兼容Element Plus/Ant Design/Vant,支持PC/移动端
低代码·vue·表单设计器
程序猿小D3 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+vue实现的酒店预订管理系统,推荐!
数据库·mysql·spring·vue·毕业设计·mybatis·酒店预订
马卡龙MK3 天前
vue 不完美的多标签页解决方案
vue
goms3 天前
前端项目集成lint-staged
前端·vue·lint-staged
字节架构前端4 天前
浅谈 Electron视频渲染跨端技术
electron
梁辰兴4 天前
企业培训笔记:axios 发送 ajax 请求
前端·笔记·ajax·vue·axios·node