Electron は人気のあるデスクトップ アプリケーション開発フレームワークであり、Vue は人気のある JavaScript フレームワークです。これら 2 つのフレームワークを組み合わせると、強力なデスクトップ アプリケーションを作成できます。この記事では、Vue3とElectronを使ってプロセス通信を実装し、ウィンドウを作成し、パラメータを渡す方法を紹介します。
- Vue3プロジェクトを作成する
まず、Vue3 プロジェクトを作成する必要があります。ターミナルで次のコマンドを実行します。
vue create electron-ipc-demo
- 電子をインストールする
プロジェクトのルート ディレクトリで次のコマンドを実行して Electron をインストールします。
npm install electron --save-dev
- 電子の設定
プロジェクトのルート ディレクトリに main.js という名前のファイルを作成します。このファイルが Electron のメイン プロセスになります。このファイルに次のコードを追加する必要があります。
const {
app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')
function createWindow () {
// 创建浏览器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true, // 将contextIsolation设置为false，以便我们可以在渲染进程中使用Vue
contextIsolation: false,
enableRemoteModule: true // 允许使用remote模块
}
})
// 加载应用的index.html
win.loadFile('dist/index.html')
// 打开开发者工具
win.webContents.openDevTools()
// 监听从渲染进程发来的消息
ipcMain.on('open-new-window', (event, arg) => {
// 创建一个新的浏览器窗口
const win2 = new BrowserWindow({
width: 600,
height: 400,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true
}
})
// 加载应用的newWindow.html并传递参数
win2.loadFile('dist/newWindow.html', {
query: {
arg } })
})
}
// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法
app.whenReady().then(() => {
createWindow()
})
// 当所有窗口都关闭时退出应用程序
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
このコードは、新しい Electron ウィンドウを作成し、Vue プロジェクトのindex.html ファイルを読み込みます。また、デバッグを容易にする開発者ツールも有効にしました。また、レンダリング プロセスから送信されたメッセージを受信し、メッセージの受信後に新しいブラウザ ウィンドウを作成する ipcMain リスナーも追加しました。
- 新しいウィジェットを作成する
NewWindow.vue という名前のファイルを src/views ディレクトリに作成します。このファイルが新しいウィジェットになります。このコンポーネントには、次のコードを追加する必要があります。
<template>
<div>
<h1>New Window</h1>
<p>{
{ arg }}</p>
</div>
</template>
<script>
export default {
props: ['arg']
}
</script>
<style>
h1 {
font-size: 28px;
margin-bottom: 20px;
}
p {
font-size: 18px;
}
</style>
このコードは、タイトルと、渡されたパラメーターを表示する段落を含む新しいウィジェットを作成します。
- App.vue にボタンを追加
新しいウィンドウを開く操作をトリガーするボタンを src/App.vue に追加します。次のコードをテンプレートに追加します。
<template>
<div id="app">
<h1>Hello World</h1>
<button @click="openNewWindow">Open New Window</button>
</div>
</template>
<script>
const { ipcRenderer } = require('electron')
export default {
name: 'App',
methods: {
openNewWindow() {
ipcRenderer.send('open-new-window', 'Hello from main window!')
}
}
}
</script>
このコードはボタンを追加し、ボタンがクリックされたときにメインの Electron プロセスにメッセージを送信し、新しいウィンドウのオープンをトリガーします。
- アプリケーションを構築する
これで、アプリケーションを構築できます。ターミナルで次のコマンドを実行します。
npm run build
これにより、アプリケーション ファイルを含む dist ディレクトリが生成されます。
- アプリケーションを実行する
最後に、アプリケーションを実行できます。ターミナルで次のコマンドを実行します。
npm run electron:serve
これにより、Electron アプリケーションが起動し、Vue アプリケーションが表示されます。
- 結果
現在、アプリケーションは正常に実行されています。「新しいウィンドウを開く」ボタンをクリックすると、アプリケーションは NewWindow.vue コンポーネントを新しいウィンドウで開き、パラメーター「メイン ウィンドウからこんにちは!」をコンポーネントに渡します。NewWindow.vue コンポーネントでは、props を通じてこのパラメータを取得し、ページに表示できます。
この例を通じて、Vue3 と Electron を使用してプロセス通信を実装し、ウィンドウを作成し、パラメーターを渡す方法を学びました。Electron の ipcMain モジュールと ipcRenderer モジュールを使用すると、メイン プロセスとレンダリング プロセスの間でメッセージとデータを簡単に受け渡し、さまざまな複雑なアプリケーション機能を実装できます。