内容简介:从零开始搭建,基于electron vue cli3 的桌面应用。本人刚入坑,项目适合新手,客官来了轻踩。若是能遇到高手对小女子我指点一二,更是感恩不尽。查到的资料大部分都是vue cli2的版本,我们来探索新的版本吧
electron vue桌面应用入门实例
从零开始搭建,基于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 ̄)づ╭❤~
转载请联系作者!
以上所述就是小编给大家介绍的《electron vue桌面应用入门实例》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。