從零開始搭建，基于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￣)づ╭?～

轉載請聯系作者！

總結

以上是生活随笔為你收集整理的pythonelectron桌面开发案例_electron vue桌面应用入门实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。