electron vue桌面應用入門實例

從零開始搭建，基於electron vue cli3 的桌面應用。github

本人剛入坑，項目適合新手，客官來了輕踩。如果能遇到高手對小女子我指點一二，更是感恩不盡。

在這裏你能夠找到的有

1. 從零開始搭建一個項目
2. 使用vue-cli3搭建electron項目
3.  簡單的實現一個主線程和渲染層的交互
   

查到的資料大部分都是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的同窗，必定會疑惑如何主程序和渲染程序作交互，這個例子就簡單的介紹了。

關於我

您能夠掃描添加下方的微信並備註 Sol 加交流羣，給我提意見，交流學習。

若是對你有幫助送我一顆小星星（づ￣3￣）づ╭❤～

轉載請聯繫做者！