electron vue桌面应用入门实例

从零开始搭建,基于electron vue cli3 的桌面应用。github

本人刚入坑,项目适合新手,客官来了轻踩。若是能遇到高手对小女子我指点一二,更是感恩不尽。

在这里你可以找到的有

  1. 从零开始搭建一个项目
  2. 使用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中添加方法

// remote 模块提供了一种在渲染进程(网页)和主进程之间进行进程间通讯(IPC)的简便途径。const { remote, ipcRenderer } = require("electron") // menu 类可以用来创建原生菜单const { Menu } = remote...
methods:{   initMenu() { // 初始化菜单      const menu = Menu.buildFromTemplate([        {          label: "文件",          submenu: [            {              label: "设置",              accelerator: "CmdOrCtrl+,",              click: () => {                ipcRenderer.send("toggle-settings");              }            },            { type: "separator" },            {              label: "退出",              accelerator: "CmdOrCtrl+Q"            }          ]        },        {          label: "演示菜单",          submenu: [            { label: "菜单 1" },            { label: "菜单 2" },            { label: "菜单 3" }          ]        }      ]);      Menu.setApplicationMenu(menu);    },
}复制代码

主要演示这两个小功能,需要注意的一点是,路由需要用Hash,后面研究一下,怎么用history实现。第一次接触electron的同学,一定会疑惑如何主程序和渲染程序做交互,这个例子就简单的介绍了。

关于我

您可以扫描添加下方的微信并备注 Soul 加交流群,给我提意见,交流学习。

如果对你有帮助送我一颗小星星(づ ̄3 ̄)づ╭❤~

转载请联系作者!


转载于:https://juejin.im/post/5d0af5d2f265da1b614ffd72

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值