江门电商网站设计培训安徽省干部建设教育网站
在 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://