electron.vite 项目创建以及better-sqlite3数据库使用

devtools/2025/2/12 19:54:32/

1.安装electron.vite

npm create @quick-start/electron@latest

中文官网：https://cn.electron-vite.org/

2. 安装项目依赖

npm i

3.修改 electron-builder 配置文件

appId: com.electron.app
productName: text33
directories:buildResources: build
files:- '!**/.vscode/*'- '!src/*'- '!electron.vite.config.{js,ts,mjs,cjs}'- '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'- '!{.env,.env.*,.npmrc,pnpm-lock.yaml}'- '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'
asarUnpack:- resources/**
win:icon: build/icon.ico# 配置文件示例，包含输入验证和异常处理逻辑target:- target: "nsis"  # 目标名称，必须为字符串arch: ["x64"]  # 架构列表，必须为非空列表executableName: text33
nsis:artifactName: ${name}-${version}-setup.${ext}shortcutName: ${productName}uninstallDisplayName: ${productName}createDesktopShortcut: alwaysoneClick: false # 设置为 false 以提供安装类型选择界面，允许用户选择是否创建桌面图标，允许用户选择安装路径perMachine: true # 设置为 true 将使安装程序默认为所有用户安装应用，这需要管理员权限allowToChangeInstallationDirectory: true # 如果设置为 true，安装程序将允许用户更改安装目录allowElevation: true #  一般情况下，此字段不会被直接使用，权限提升主要依赖于 perMachine 的设定。当perMachine为true，安装程序会请求管理员权限deleteAppDataOnUninstall: true # 如果设置为 true，卸载程序将删除AppData中的所有程序数据createStartMenuShortcut: true   # 如果设置为 true，安装程序将在开始菜单中创建程序快捷方式
mac:entitlementsInherit: build/entitlements.mac.plistextendInfo:- NSCameraUsageDescription: Application requests access to the device's camera.- NSMicrophoneUsageDescription: Application requests access to the device's microphone.- NSDocumentsFolderUsageDescription: Application requests access to the user's Documents folder.- NSDownloadsFolderUsageDescription: Application requests access to the user's Downloads folder.notarize: false
dmg:artifactName: ${name}-${version}.${ext}
linux:target:- AppImage- snap- debmaintainer: electronjs.orgcategory: Utility
appImage:artifactName: ${name}-${version}.${ext}
npmRebuild: false
publish:provider: genericurl: https://example.com/auto-updates
electronDownload:mirror: https://npmmirror.com/mirrors/electron/

4.修改启动文件package.json

"scripts": {"format": "prettier --write .","lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts,.vue --fix","typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false","typecheck:web": "vue-tsc --noEmit -p tsconfig.web.json --composite false","typecheck": "npm run typecheck:node && npm run typecheck:web","start": "electron-vite preview","dev": "electron-vite dev","postinstall": "electron-builder install-app-deps", "build": "npm run typecheck && electron-vite build","build:unpack": "npm run build && electron-builder --dir","build:win": "npm run build && electron-builder --win","build:mac": "npm run build && electron-builder --mac","build:linux": "npm run build && electron-builder --linux"},

5.安装better-sqlite3数据库

npm i better-sqlite3 -S

数据库可视化 SQLiteStudio 下载地址 https://github.com/pawelsalawa/sqlitestudio/releases

better-sqlite3 https://www.npmjs.com/package/better-sqlite3

{"scripts": {"postinstall": "npx electron-rebuild -f", "postinstall_backup": "electron-builder install-app-deps", "rebuild-sqlite": "electron-rebuild -f -w better-sqlite3"// ...},"dependencies": {"@electron-toolkit/preload": "^3.0.1","@electron-toolkit/utils": "^3.0.0","better-sqlite3": "^11.8.1"}// ....
}

6.修改 electron-builder 配置文件

files:- '!**/.vscode/*'- '!src/*'- '!electron.vite.config.{js,ts,mjs,cjs}'- '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'- '!{.env,.env.*,.npmrc,pnpm-lock.yaml}'- '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'- '!**/better-sqlite3/{deps/**/*,src/**/*}'

7.better-sqlite3使用
新建src/main/database/index.js文件

import Database from "better-sqlite3"; // 用于操作 SQLite 数据库的库
import { app, ipcMain } from "electron"; // 用于 Electron 应用的全局功能
import path from "path"; // 用于处理和操作文件路径的模块
import fs from "fs";
let db; // 声明一个变量用来存储数据库实例// 数据库版本
const DB_VERSION = 1; // 当前数据库版本
// 初始化数据库的函数
export function initDatabase() {// 判断当前环境是否是开发环境let databasePath = path.join(app.getPath("userData"), "database");console.log(databasePath);// 确保数据库文件夹存在，如果不存在则创建它if (!fs.existsSync(databasePath)) {fs.mkdirSync(databasePath, { recursive: true });}// 初始化数据库并创建或打开指定路径的 SQLite 数据库文件db = new Database(path.join(databasePath, "uploadfile.db"), {verbose: console.log,});// 设置数据库的日志模式为 WAL（写时日志）模式，提高性能db.pragma("journal_mode = WAL");// 创建版本表createVersionTable();// 获取当前数据库版本const currentVersion = getCurrentDatabaseVersion();// 如果数据库版本不匹配，执行数据库更新if (currentVersion !== DB_VERSION) {updateDatabase(currentVersion);}// 创建表，如果表不存在则创建createTable();// 在 Electron 的主进程中注册一个 IPC 事件处理器ipcMain.handle("db_query", async (_, query, params=[]) => {const stmt = db.prepare(query); // 准备 SQL 查询return stmt.all(...params); // 执行查询并返回结果});// 在应用退出时关闭数据库连接app.on("quit", () => {db.close(); // 关闭数据库连接});
}// 创建版本表
function createVersionTable() {const createVersionTableQuery = `CREATE TABLE IF NOT EXISTS version (id INTEGER PRIMARY KEY AUTOINCREMENT,version INTEGER NOT NULL);`;db.prepare(createVersionTableQuery).run();// 检查是否有版本记录，若没有，则插入默认版本 1const currentVersion = getCurrentDatabaseVersion();if (!currentVersion) {const insertVersionQuery = `INSERT INTO version (version) VALUES (?);`;const stmt = db.prepare(insertVersionQuery);stmt.run(1); // 默认插入版本 1}
}// 更新数据库
function updateDatabase(currentVersion) {console.log(`Updating database from version ${currentVersion} to ${DB_VERSION}`);if (currentVersion === 1) {// 执行 1 -> 2 的更新操作updateToVersion2();}// 更新数据库版本记录const updateVersionQuery = `INSERT INTO version (version) VALUES (?);`;const stmt = db.prepare(updateVersionQuery);stmt.run(DB_VERSION);console.log(`Database updated to version ${DB_VERSION}`);
}// 创建任务列表表
function createTable() {const createTableQuery = `CREATE TABLE IF NOT EXISTS todo_list (user_id_role TEXT,todo_id TEXT UNIQUE,task_title TEXT,task_description TEXT,priority INTEGER,due_date TEXT,status TEXT,created_at INTEGER,updated_at INTEGER,id INTEGER PRIMARY KEY AUTOINCREMENT);`;// 执行创建表的 SQL 语句db.prepare(createTableQuery).run();
}

@src/main/index.ts文件修改

import { initDatabase } from "./database/index";
// 在启动项目里面使用
app.whenReady().then(() => { // 初始化数据库ipcMain.on("initDatabase", () => {// 初始化数据库initDatabase();});
}

页面可以直接调用

// 初始化数据库const initDatabase = () => {window.electron.ipcRenderer.send('initDatabase');}
// 获取数据库中的所有待办事项
const getTodoList = () => {// 获取数据库数据window.ipcRenderer.invoke("db_query", "SELECT * FROM todo_list;").then((res)=>{console.log('getTodoList', res);getTodoListData.value = res;}).catch((err)=>{})};

on对应send，不返回
handle对应invoke，返回

8.多窗口使用

  // 创建新窗口ipcMain.on('create-new-window', () => { if (newWindow) {// 是否是最小化if (newWindow.isMinimized()) {newWindow.restore()};newWindow.focus() // 存在 则聚焦return}newWindow = new BrowserWindow({width: 312,height: 422,show: false,autoHideMenuBar: true,...(process.platform === "linux" ? { icon } : {}),webPreferences: {preload: join(__dirname, "../preload/about.js"),sandbox: false,},});newWindow.webContents.setWindowOpenHandler((details) => {shell.openExternal(details.url);return { action: "deny" };});newWindow.on("ready-to-show", () => {newWindow.show();});// 关闭清理newWindow.on('closed', () => {newWindow = null});// HMR for renderer base on electron-vite cli.// Load the remote URL for development or the local html file for production.if (is.dev && process.env["ELECTRON_RENDERER_URL"]) {console.log("process.env['ELECTRON_RENDERER_URL']",process.env["ELECTRON_RENDERER_URL"] + "/about.html");newWindow.loadURL(process.env["ELECTRON_RENDERER_URL"] + "/about.html");} else {newWindow.loadFile(join(__dirname, "../renderer/about.html"));}});

…/preload/about.js 文件内容

import { contextBridge } from "electron";
import { electronAPI } from "@electron-toolkit/preload";// Custom APIs for renderer
const api = {};// Use `contextBridge` APIs to expose Electron APIs to
// renderer only if context isolation is enabled, otherwise
// just add to the DOM global.
if (process.contextIsolated) {try {contextBridge.exposeInMainWorld("electron", electronAPI);contextBridge.exposeInMainWorld("api", api);} catch (error) {console.error(error);}
} else {// @ts-ignore (define in dts)window.electron = electronAPI// @ts-ignore (define in dts)window.api = api
}

在这里插入图片描述
遇到问题

mac在打包win，安装完成会出现以下错误属于系统编辑问题，请使用win系统进行对应打包
请添加图片描述

npm i 安装不上,网络正常情况
npm config set registry https://registry.npmmirror.com
淘宝镜像可能会出现问题

win在打包是否出现的权限问题需要开启管理员权限

如遇到其他问题可以沟通


http://www.ppmy.cn/devtools/158298.html

相关文章

在ArcGIS JS API中使用WebGL实现波纹扩散特效

在ArcGIS JS API中使用WebGL实现波纹扩散特效

在现代WebGIS开发中，ArcGIS JS API 是一个非常强大的工具，它允许开发者创建丰富的地理信息应用。结合WebGL技术，我们可以实现更加复杂和炫酷的可视化效果。本文将介绍如何使用ArcGIS JS API结合WebGL实现一个波纹扩散特效。 波纹扩散效果 1 概…
阅读更多...
Rust 文件读取：实现我们的 “迷你 grep”

Rust 文件读取：实现我们的 “迷你 grep”

1. 准备示例文件 首先，在项目根目录（与 Cargo.toml 同级）下新建一个名为 poem.txt 的文件。示例内容可参考 Emily Dickinson 的诗： Im nobody! Who are you? Are you nobody, too? Then theres a pair of us — dont tell! Th…
阅读更多...
请解释 JavaScript 中的函数式编程，优缺点是什么？

请解释 JavaScript 中的函数式编程，优缺点是什么？

一、对JavaScript函数式编程的理解 函数式编程（Functional Programming，FP）是一种编程范式，它将计算视为数学函数的求值，并避免改变状态和可变数据。 在JavaScript中，函数式编程具有以下几个关键特性&…
阅读更多...
使用epoll与sqlite3进行注册登录

使用epoll与sqlite3进行注册登录

将 epoll 服务器 客户端拿来用 客户端：写一个界面，里面有注册登录 服务器：处理注册和登录逻辑，注册的话将注册的账号密码写入数据库，登录的话查询数据库中是否存在账号，并验证密码是否正确 额外功能&…
阅读更多...
fastadmin图片前台导出

fastadmin图片前台导出

参考 https://github.com/hhurz/tableExport.jquery.plugin#options define([jquery, bootstrap, backend, table, form], function ($, undefined, Backend, Table, Form) {$(document).ready(function(){$(#table).bootstrapTable(refreshOptions, {exportOptions: {onMsoNu…
阅读更多...
体验 DeepSeek-R1：解密 1.5B、7B、8B 版本的强大性能与应用

体验 DeepSeek-R1：解密 1.5B、7B、8B 版本的强大性能与应用

文章目录 🍋引言🍋DeepSeek 模型简介🍋版本更新：1.5B、7B、8B 的区别与特点🍋模型评估🍋体验 DeepSeek 的过程🍋总结 🍋引言 随着大规模语言模型的持续发展，许多模型在性…
阅读更多...
Node.js 实现简单爬虫

Node.js 实现简单爬虫

介绍 爬虫是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。 本文将使用 Nodejs 编写一个简单的爬虫脚本，爬取一个美食网站，获取菜品的标题和图片链接，并以表格的形式输出。 准备工作 1、初始化项目 首先&#xff0…
阅读更多...
ESP8266配置为TCP客户端，连接电脑和手机（使用Arduino配置）

ESP8266配置为TCP客户端，连接电脑和手机（使用Arduino配置）

一、简介 基于 ESP8266 的 Arduino 代码，其主要功能是将 ESP8266 连接到指定的 Wi-Fi 网络，并与指定 IP 地址和端口号的服务器建立 TCP 连接。在连接成功后，实现了串口和网络数据的双向传输，也就是将从串口接收到的数据通过 Wi-Fi…
阅读更多...
最新文章

Copyright @ 2022~2023