共计 1568 个字符,预计需要花费 4 分钟才能阅读完成。
从零开始搭建,基于 electron vue cli3 的桌面应用。github
本人刚入坑,项目适合新手,客官来了轻踩。若是能遇到高手对小女子我指点一二,更是感恩不尽。
在这里你可以找到的有
- 从零开始搭建一个项目
- 使用 vue-cli3 搭建 electron 项目
- 简单的实现一个主线程和渲染层的交互
查到的资料大部分都是 vue cli2 的版本,我们来探索新的版本吧
首先新建 vue 项目
vue create electron-vue-example
cd electron-vue-example
npm run serve
vue 项目的建立非常的简单,这里就不再巴拉巴拉了~
安装 vue-cli-plugin-electron-builder
接下来就是把让我们的项目可以被打包成桌面应用,这里我们用到了 [vue-cli-plugin-electron-builder] 它是一个 vue cli3 插件,帮你配置 electron-build。
第一步,在根目录下运用下面的命令
vue add electron-builder
第二步,运行启动命令
npm run electron:serve 复制代码
实现一个图片列表
我们实现一个 vue 列表
接下来,修改 src/background.js 添加一个新的窗口添加一个新的窗口给他
接下来是点击图片展示在另外一个页面,用到了通信 ipcMain
模块,一边发送一边接受,通过 arg 来传递参数。vue 点击事件里发送图片的 url 信息到 background.js 主进程,主进程监听事件,然后打开窗口传递信息到 image.vue 页面
background.js 头部添加 ipcMain
import {app, protocol, BrowserWindow, ipcMain} from 'electron' 复制代码
background.js 最后添加
//ipcMain 模块有如下监听事件方法:
// 监听 组件 @/compontents/ImageList.vue methods:openImage 下的 ipcRenderer.send("toggle-image", image)
// render 发送消息,main 接收消息
//
ipcMain.on('toggle-image', (event, arg) => {imageWindow.show()
// 拿到消息后再发送给 @/views/image.vue 中的 ipcRenderer.on('image'...
imageWindow.webContents.send('image', arg)
}) 复制代码
实现菜单配置
在 @/compontents/ImageList.vue 中添加方法
initMenu() { // 初始化菜单
const menu = Menu.buildFromTemplate([
{
label: "文件",
submenu: [
{
label: "设置",
accelerator: "CmdOrCtrl+,",
click: () => {ipcRenderer.send("toggle-about");
}
},
{type: "separator"},
{
label: "退出",
accelerator: "CmdOrCtrl+Q"
}
]
},
{
label: "演示菜单",
submenu: [{ label: "菜单 1"},
{label: "菜单 2"},
{label: "菜单 3"}
]
}
]);
Menu.setApplicationMenu(menu);
},
主要演示这两个小功能,需要注意的一点是,路由需要用 Hash,后面研究一下,怎么用 history 实现。第一次接触 electron 的同学,一定会疑惑如何主程序和渲染程序做交互,这个例子就简单的介绍了。
关于我
您可以扫描添加下方的微信并备注 Soul 加交流群,给我提意见,交流学习。
如果对你有帮助送我一颗小星星(づ~3~)づ╭❤~
转载请联系作者!