2025.electron-vue3-sqlite3使用

vue要求电脑有node环境，sqlite要求有python和c++工具，不然编译的时候会报错，报错再解决

由于使用的vite是热更新，但是修改main层代码可能不会生效，还是需要重启，最好重启前删除vite缓存和out文件夹

1.安装脚手架electron-vite脚手架，官网，命令行如下，红框创建名字

https://cn.electron-vite.org/guide/
npm create @quick-start/electron@latest

2.跟据指令进入项目，执行 npm i 正常下载依赖包，运行项目，项目结构如下，代码业务代码都在src里

运行结果

3.前后通信，Send IPC按钮

**main,**再其中可以使用nodejs语法完成业务逻辑，其中有核心模块ipcMain，有on（异步）,handle(同步）方法，

例子中创建了一个ping事件，此打印会打印在cmd控制台而不是浏览器

想创建其他事件执行逻辑可以使用该模块

preload

想要在vue中可以获取到main中定义的ping事件需要在preload中将这些绑定到window上，

preload即可以访问window,也可以获取main中定义的事件，而mian中访问不到window，浏览器操作不了复杂node

在app,vue中打印window,其中已经添加了electron对象和它的方法,ipcRenderer就是用来通信的，所以在app.vue中执行以下代码触发了cmd控制台打印证明调用到了main中的方法，通信完成

复制代码

const ipcHandle = () => {
  console.log(window.api)
  window.electron.ipcRenderer.send('ping')}

vue通过window就可以调用到再main中定义的方法，因为preload中将其绑定再window上了

一些写法，可以在preload中直接使用ipcRenderer，通过api将内容直接绑定到window上，在vue文件中直接调用方法名（看起来好看很多

mian.index.js 加入两个事件

复制代码

  // IPC test
  ipcMain.on('ping', () => console.log('pon2g'))
  ipcMain.handle('ping-async', async () => {
    return { success: true, message: 'pong', timestamp: new Date().toISOString() };
  });

preload index.js，创建testApi

复制代码

import { contextBridge,ipcRenderer } from 'electron'
import { electronAPI } from '@electron-toolkit/preload'

// Custom APIs for renderer
const api = {
    // 测试方法
  ping: () => ipcRenderer.send('ping'),
}
const testApi = {
    // 测试方法
  pingAsync: () => ipcRenderer.invoke('ping-async'),
}


if (process.contextIsolated) {
  try {
    contextBridge.exposeInMainWorld('electron', electronAPI)
    contextBridge.exposeInMainWorld('api', api),
       // 单独API
    contextBridge.exposeInMainWorld('testApi', testApi)
  } catch (error) {
    console.error("暴露失败",error )
  }
} else {
  window.electron = electronAPI
  window.api = api,
    window.testApi = testApi
    console.log("成功")
}

app.vue中调用的js函数

复制代码

const ipcHandle = () => {
  console.log(window)
  window.api.ping()

  
  }
const pingAsyncFn = async () => {
  console.log(window.testApi.pingAsync())
 const data =  await window.testApi.pingAsync()  
 console.log(data)
  }

4.连接数据库sqlite3,这里可以使用sqlite3也可以使用better-sqlite3，其实都是sqlite

sqlite3,

复制代码

npm i -dev sqlite3

装的时候可能出现错误缺少各种乱起八胶的

安装sqlite3报错解决办法

复制代码

npm error gyp ERR! find VS - found "Visual Studio C++ core features"
npm error gyp ERR! find VS - found VC++ toolset: v143
npm error gyp ERR! find VS - missing any Windows SDK

//待写