從零開始搭建，基于electron vue cli3 的桌面應(yīng)用。 github

本人剛?cè)肟?#xff0c;項(xiàng)目適合新手，客官來了輕踩。若是能遇到高手對小女子我指點(diǎn)一二，更是感恩不盡。

在這里你可以找到的有

從零開始搭建一個(gè)項(xiàng)目

使用vue-cli3搭建electron項(xiàng)目

簡單的實(shí)現(xiàn)一個(gè)主線程和渲染層的交互

查到的資料大部分都是vue cli2的版本，我們來探索新的版本吧

首先新建vue項(xiàng)目

vue create electron-vue-example

cd electron-vue-example

npm run serve

vue項(xiàng)目的建立非常的簡單，這里就不再巴拉巴拉了~

安裝vue-cli-plugin-electron-builder

接下來就是把讓我們的項(xiàng)目可以被打包成桌面應(yīng)用，這里我們用到了[vue-cli-plugin-electron-builder] 它是一個(gè)vue cli3插件，幫你配置electron-build。

第一步，在根目錄下運(yùn)用下面的命令

vue add electron-builder

第二步，運(yùn)行啟動命令

npm run electron:serve復(fù)制代碼

實(shí)現(xiàn)一個(gè)圖片列表

我們實(shí)現(xiàn)一個(gè)vue列表

接下來，修改src/background.js添加一個(gè)新的窗口添加一個(gè)新的窗口給他

接下來是點(diǎn)擊圖片展示在另外一個(gè)頁面，用到了通信ipcMain?模塊，一邊發(fā)送一邊接受，通過arg來傳遞參數(shù)。vue點(diǎn)擊事件里發(fā)送圖片的url信息到background.js主進(jìn)程，主進(jìn)程監(jiān)聽事件，然后打開窗口傳遞信息到image.vue頁面

background.js頭部添加 ipcMain

import { app, protocol, BrowserWindow, ipcMain } from 'electron'復(fù)制代碼

background.js最后添加

//ipcMain 模塊有如下監(jiān)聽事件方法:

// 監(jiān)聽 組件@/compontents/ImageList.vue methods:openImage下的ipcRenderer.send("toggle-image", image)

// render 發(fā)送消息，main 接收消息

//

ipcMain.on('toggle-image', (event, arg) => {

imageWindow.show()

// 拿到消息后再發(fā)送給@/views/image.vue中的 ipcRenderer.on('image'...

imageWindow.webContents.send('image', arg)

})復(fù)制代碼

實(shí)現(xiàn)菜單配置

在@/compontents/ImageList.vue中添加方法

initMenu() { // 初始化菜單

const menu = Menu.buildFromTemplate([

{

label: "文件",

submenu: [

{

label: "設(shè)置",

accelerator: "CmdOrCtrl+,",

click: () => {

ipcRenderer.send("toggle-about");

}

},

{ type: "separator" },

{

label: "退出",

accelerator: "CmdOrCtrl+Q"

}

]

},

{

label: "演示菜單",

submenu: [

{ label: "菜單 1" },

{ label: "菜單 2" },

{ label: "菜單 3" }

]

}

]);

Menu.setApplicationMenu(menu);

},

主要演示這兩個(gè)小功能，需要注意的一點(diǎn)是，路由需要用Hash，后面研究一下，怎么用history實(shí)現(xiàn)。第一次接觸electron的同學(xué)，一定會疑惑如何主程序和渲染程序做交互，這個(gè)例子就簡單的介紹了。

關(guān)于我

您可以掃描添加下方的微信并備注 Sol 加交流群，給我提意見，交流學(xué)習(xí)。

如果對你有幫助送我一顆小星星(づ￣3￣)づ╭?～

轉(zhuǎn)載請聯(lián)系作者！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。