前言

因为习惯用vue进行前端开发，外加vue的UI库用起来比较方便一点。

故本文介绍如何在Electron中使用vue进行开发。

会装vue和Electron的可以直接跳到三。

一、安装vue

npm create vue@latest

注意： 如果提示不成功，可能是node版本太低的原因。我用的是18.16.0

image.png

根据提示一步步来

cd .\目录名\
npm install
npm run dev

得到一个vue页面 ： http://localhost:5173/

image.png

二、安装Electron

  1. 新建一个 electron-base 文件夹
cd electron-base
  1. 生成 package.json 文件
npm init
  1. npm导入electron (导入时间有点慢，可以换国内源) 参考官网
npm install electron --save-dev
  1. 修改 package.json 配置文件

image.png

  1. 新建主线程文件main.js,并贴入代码（具体可参考上篇文章）
// app 模块，它控制应用程序的事件生命周期。
// BrowserWindow 模块，它创建和管理应用程序 窗口。
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('node:path')
const createWindow = () => {
  // 创建一个浏览器窗口对象
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // 窗口对象对应的html文件
  win.loadFile('./pages/index.html')
  // win.loadURL('http://localhost:5173/')
}

// app模块准备完成，创建窗口
app.whenReady().then(() => {
  ipcMain.handle('__dirname', () => __dirname)
  createWindow()
})
  1. 新建预加载线程preload.js并写入代码

const { contextBridge, ipcRenderer }  = require('electron')
contextBridge.exposeInMainWorld('versions', {
  getVersions: (name) => {
    return process.versions[name]
  },
})

contextBridge.exposeInMainWorld('jinlin', {
  pika: '皮卡丘'
});

contextBridge.exposeInMainWorld('sex', '男');

contextBridge.exposeInMainWorld('dirname', ipcRenderer.invoke('__dirname'))
  1. 新建html文件并写入代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>hello world!</h1>
  <h2></h2>
  <script>
    const h2 = document.querySelector('h2')
    window.dirname.then(res => {
      console.log('res', res)
      // 因为在预加载脚本preload.js中暴露了全局变量 varName，所以在html中可以直接访问到其中的node.js的内容
      h2.innerText = 
      `
      该应用的Chrome版本为${versions.getVersions('chrome')},
      Node.js的版本为${versions.getVersions('node')}
      Electron版本为${versions.getVersions('electron')}
      我的精灵是:${jinlin.pika}
      我的性别是:${sex}
      文件路径是:${res}
      `
    })
  </script>
  <!-- 通常专门弄一个renderer.js文件来写html中运用到的js内容，称之为渲染脚本 -->
  <!-- <script src="./renderer.js">

  </script> -->
</body>
</html>
  1. 启动electron
npm run start

image.png

三. 将vue和Electron结合使用

在前面使用Electron都是直接加载一个html页面，Electron窗口还提供了一个加载URL的方法，我们只需要在主线程中加载vue启动项目的动态URL就可以在vue中使用Electron的属性和方法。

image.png

注意：确保vue项目是启动着的，然后新开命令行窗口运行Electron。

image.png

3.1 在vue中使用Electron提供的预加载线程变量

先把HomeView文件中多余部分全部删除

image.png

注意： 在vue中的template模板不能直接调用window变量（vue设计如此）。

image.png

3.2 动态启动Electron

当前在vue中更改代码后，页面内容都会动态改变。但是在Electron中修改代码必须关掉再启动。

可以安装nodemon实现Electron动态启动。

npm i nodemon -D

修改package.json的start命令

"start": "nodemon --exec electron . --watch ./ --ext .js,.html"

此时修改Electron中的内容就会自动重启了。

3.3 打包

打包就是两个项目分别打包。

  1. 如果要将vue项目部署上线，就直接改为部署后的URL再执行Electron打包。

  2. 如果只想本地打包，就将vue打包后的dist文件夹复制到Electron文件夹中，再读取html文件，最后打包。

在此我详细介绍第二种本地打包方式。

1. vue打包

  1. 修改vite.config.js，新增base路径

image.png

  1. 切换目录，打包得到dist文件夹
npm run build

2. Eletron打包

  1. 将上面得到的dist文件夹粘贴过来

image.png

  1. 修改主线程文件路径

image.png

  1. 执行打包命令(具体可看上篇文章)
npm install --save-dev @electron-forge/cli 
npx electron-forge import
npm install --save-dev @electron-forge/plugin-fuses
npm run make

项目目录：https://github.com/pengzhijian/Electron_vue

总结

本质就是用vue写前端页面，然后用Electron套壳，通过window传递消息，实现前端和node之间的通信。

# electron # 学习 # javascript
Logo
Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue