从零开始搭建，基于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的同学，一定会疑惑如何主程序和渲染程序做交互，这个例子就简单的介绍了。

关于我

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

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

转载请联系作者！