electron中使用vue
本文将介绍如何在 electron中使用 vue.js, 不使用 vue-cli 创建的vue工程。
版本
这里使用的版本:
- electron: 17.1.0
- vue: 3.2.31
安装 vue
yarn add vue --save
安装bootstrap
这不是必须的，只是使用 bootstrap 做一些布局，和组件。
你也可以直接使用Input标签代替 boostrap 的 button 组件。
yarn bootstrap --save
renderer/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'"> -->
<link type="text/css" rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap-grid.min.css">
<!-- <script src="../node_modules/vue/dist/vue.cjs.js"></script> -->
<title>electron + vue</title>
</head>
<body>
<h1>electron + vue</h1>
<div id="root">
<div class="container" id="app">
{{ count }}
<button type="button" class="btn btn-primary" @click="add" >add</button>
<button type="button" class="btn btn-primary" @click="sendRendererMsg" >渲染进程向主进程发送消息</button>
</div>
</div>
</div>
<script src="./index.js">
</script>
</body>
</html>
renderer/index.js
const { ipcRenderer } = require('electron')
const Vue = require('vue');
const { ref } = Vue;
const app = Vue.createApp({
setup(props, context){
const count = ref(1);
function add(){
count.value ++
}
function sendRendererMsg(){
ipcRenderer.send('msg_renderer_to_main', { 'param1': "hello" }, { 'param2': "world" });
}
return {
count,
add,
sendRendererMsg
}
}
});
const vm = app.mount("#app");
使用
const vm = app.mount("#app");
将 Vue 实例挂载到 html节点：<div class="container" id="app">
而创建 Vue 实例时，Vue.createApp({}) 参数没有给 template设置值，这样将使用挂载点：
<div class="container" id="app">
作为 template。
main.js
// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow, ipcMain } = require('electron')
// 在文件头部引入 Node.js 中的 path 模块
const path = require('path')
function createWindow () {
// 创建浏览器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false, //解决require is not defined的问题:https://blog.csdn.net/weixin_44637104/article/details/117904734
// preload: path.join(__dirname, 'preload.js')
}
})
// 加载 index.html
win.loadFile(path.join(__dirname, '/renderer/index.html'))
// 打开开发工具
win.webContents.openDevTools()
}
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他
// 打开的窗口，那么程序会重新创建一个窗口。
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
ipcMain.on("msg_renderer_to_main", (event, param1, param2) => {
console.log(param1);
console.log(param2);
//console.log(event.sender);
})
})
// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在
// 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
// 在这个文件中，你可以包含应用程序剩余的所有部分的代码，
// 也可以拆分成几个文件，然后用 require 导入。
效果
- 点击 add 按钮，count 递增显示
- 主进程main.js 使用
app.whenReady().then(() => {
...
ipcMain.on("msg_renderer_to_main", (event, param1, param2) => {
console.log(param1);
console.log(param2);
//console.log(event.sender);
})
})
点击【渲染进程向主进程发送消息】按钮，渲染进程【index.js】向主进程【main.js】发生事件【msg_renderer_to_main】
而主进程监听该事件，并收到传的参数并打印到控制台，输出如下：
{ param1: 'hello' }
{ param2: 'world' }