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

占星安啦2024-09-28 20:30

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()