当前位置：首页 > news >正文

vue+electron ipc+sql相关开发（三）

news 来源：原创 2025/6/19 4:17:25

在 Electron 中使用 IPC（Inter-Process Communication）与 SQLite 数据库进行通信是一个常见的模式，特别是在需要将数据库操作从渲染进程（Vue.js）移到主进程（Electron）的情况下。这样可以更好地管理数据库连接和提高安全性。下一篇介绍结合axios写成通用接口形式，虽然没啥卵用（个人觉得），只是前端调用好看╮(╯▽╰)╭
建议将读取固定安装路径的数据改成，在运行程序时在C盘用户目录下创建sql文件，避免后期程序更新或删除程序把数据库一块清掉的问题

文章目录

- - **1. 项目初始化**
  - - **1.1 创建 Vue 项目**
    - **1.2 安装 Electron**
  - **2. 安装 SQLite 库**
  - - **2.1 安装 `sqlite3` 库**
  - **3. 配置 Electron**
  - - **3.1 修改 `background.js`**
  - **4. 配置 Preload 脚本**
  - - **4.1 创建 `preload.js`**
  - **5. 在 Vue 组件中使用 IPC**
  - - **5.1 创建一个 Vue 组件**
    - **5.2 编写组件代码**
  - **6. 配置 Vue Router**
  - - **6.1 安装 Vue Router**
    - **6.2 配置路由**
  - **7. 运行项目**
  - - **7.1 启动开发服务器**
    - **7.2 构建 Electron 应用**
  - **总结**

1. 项目初始化

1.1 创建 Vue 项目

使用 Vue CLI 创建一个新的 Vue 项目。

npm install -g @vue/cli
vue create my-electron-app
cd my-electron-app

1.2 安装 Electron

在 Vue 项目中安装 Electron。

vue add electron-builder

2. 安装 SQLite 库

2.1 安装 `sqlite3` 库

使用 sqlite3 库来操作 SQLite 数据库。

npm install sqlite3

3. 配置 Electron

3.1 修改 `background.js`

在 background.js 中配置 Electron 的主进程，并设置 IPC 通信。数据库部分最好另写文件，格式好点，后期也好改，但我懒(*￣rǒ￣)

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const sqlite3 = require('sqlite3').verbose();let mainWindow;function createWindow() {mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js'),nodeIntegration: true, // 允许使用 Node.js APIcontextIsolation: false // 禁用上下文隔离}});mainWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL || `file://