依据electron-vite写一个多窗口多页面demo，包含切换主题，sqlite-better3数据库

最新推荐文章于 2023-11-22 18:13:27 发布

骑猪撸代码

最新推荐文章于 2023-11-22 18:13:27 发布

阅读量677

点赞数

分类专栏：前端笔记文章标签： electron javascript vue.js

本文链接：https://blog.csdn.net/weixin_37159138/article/details/131271129

版权

前端笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

新项目需求需要开发一款桌面软件，需要多窗口功能，在electron-vite基础上增加相关功能，基于vue3开发，包含多页面功能，根据ant-design-vue加入黑白两色主题模式，electron增加sqlite本地数据库，github地址

展示样式

白天主题
夜晚主题

sqlite运行如果出现一下问题:

was compiled against a different Node.js version using
NODE_MODULE_VERSION XX. This version of Node.js requires
NODE_MODULE_VERSION XX. Please try re-compiling or re-installing
the module (for instance, using `npm rebuild` or `npm install`).

可以通过以下命令解决：

npm install --save-dev electron-rebuild
.\node_modules\.bin\electron-rebuild -f -w better-sqlite3

优惠劵

骑猪撸代码

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
依据electron-vite写一个多窗口多页面demo，包含切换主题，sqlite-better3数据库

electron-vite-vue3多页面多窗口黑白主题
复制链接

扫一扫

专栏目录

electron-better-sqlite3-bindings-error:示例repo来演示electronic-esbuild和Better-sqlite3的问题

04-17

用@ electron-esbuild / create-app引导

electron+vite+vue3+sqlite3基础框架

最新发布

12-14

这是一个electron+vite+vue3+sqlite3基础框架，里面都已配置好，开箱即用，压缩包中写了详细的使用说明

4 条评论您还未登录，请先登录后发表或查看评论

electron-vue不同窗口切换改变窗口大小，以及setSize失效问题

ajiejie66的博客

09-02

1332

【代码】electron-vue不同窗口切换改变窗口大小，以及setSize失效问题。

electron之菜单栏和打开新窗口

qq_44961097的博客

05-16

6399

1.主进程main.js var electron = require('electron') var app = electron.app var BrowserWindow = electron.BrowserWindow var mainWindow = null app.on('ready', () => { mainWindow = new BrowserWindow({ width: 400, height: 300, webPre

electron 打开新窗口和当前窗口内容替换（二）

黄彪博客

09-18

7368

文章目录例子html页面添加事件切换页面和打开窗口的方法例子 html页面添加事件 <ul> <li><button onclick="openNewWindow()">new BrowserWindow</button></li> <li><button onclick="windowOpen()">window.open</button></li> <li><butt

Electron实现使用Sqlite3库

jiyulonely的专栏

08-11

2万+

Electron作为现今比较流行的客户端框架，势必会用本地缓存，在以往软件的一些缓存中一般用到的文件、日志等，这里提到的是sqlite3——轻量级数据库。Electron是完全符合node.js语法，并且支持很多第三方库，sqlite3也是其中一块，使用它首先需要具备node.js环境，这里不再赘述，安装sqlite3，npm install sqlite3安装以后，发现Electron不能正常使用

Electron 中安装Better-sqlite3遇到的问题总结

u010547904的博客

09-24

7493

2020年9月24日撰写：今天尝试在Electron使用Better-sqlite3，遇到了很多坑，主要还是使用sqlite3库时感觉特别不爽才硬刚的就不多说了，直接进入正题。安装better-sqlite3需要在Electron运行需要保证Node和Electron的ABI（NODE_MODULE_VERSION）一至； https://nodejs.org/zh-cn/download/releases/Node版本对照表；我使用的nodejs版本为v12.16.3(ABI为72)，.

使用 Vue3 和 Vite 创建 SQLite 数据库并进行数据存储

qq_43326668的博客

05-23

6887

现在，我们已经完成了使用 Vue3 和 Vite 创建 SQLite 数据库并进行数据存储的过程。现在，我们可以添加、更新和删除待办事项，并且它们的数据会存储在 SQLite 数据库中。方法中，我们使用 SQL 语句查询指定 ID 的待办事项，并将查询结果转换为。首先，我们需要创建一个新的 Vue3 项目。方法中，我们使用 SQL 语句查询所有的待办事项，并将查询结果转换为。方法中，我们使用 SQL 语句更新指定 ID 的待办事项。方法中，我们使用 SQL 语句删除指定 ID 的待办事项。

electron-vite 使用 better-sqlite 遇到的坑

qq_41120857的博客

11-22

996

如果你是采用 npm create vite 的方式进行安装，那么当你操作数据库时会出现类似这样的报错。如果直接安装使用的话，可能会报node版本的错误，重建一下对应模块即可。这样的工具插件，但它不是万能的，尤其是在一些动态加载的场景，这同样也是。当然，这不是绝对的。格式的构建工具像 Vite、Rollup 十分的致命。在我卡了一天后，发现........似乎是版本的问题。方式，那么我相信你有更好的办法处理它们。扩展有个很显著的特点，它只支持构建成为。模块构建，以保障它能正常工作。格式的模块，并且使用。

windows下，electron安装better-sqlite3

qscq002的博客

06-17

2923

1. 安装 windows-build-tools，注意用管理员身份启动终端 npm install --global windows-build-tools 这里有个点要注意一下，这个工具分版本 vs2015, vs2017，默认是2017，如果是需要2015版安装时后面加参数 npm install --global windows-build-tools --vs2015 ...

electron-vue-sqlite3-demo:电子vue-sqlite3-demo

05-08

电子演示2 一个Vue.js项目构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请查看的和。电子vue-sqlite3-demo 电子vue-sqlite3-demo

electron-vue-vite:Electron、vue3、vite2、ant-design-vue2 整合

05-02

用 vite 试试，算一个储备方案 ^_^ Command npm run dev npm run build 如果只需要最基础的集成 Demo 请使用或分支 Note 踩坑记 import { write } from 'fs' 的这种形式会被 vite 编译成 /@modules/fs?import ...

electron-vite-quick-start:全栈使用 Vite 运行 Electron 应用程序，包括主进程

07-24

:high_voltage: 全栈使用 Vite来运行 Electron 应用程序，包括主进程。 :light_bulb: 项目使用管理，因此推荐使用Yarn作为包管理工具。快速使用 # Clone this repository $ git clone ...

electron-vite-tailwind-starter:这个 Starter 结合使用 Electron、Vite 和 Tailwindcss。它试图坚持最佳实践

07-23

Electron 12 + Vite 2 + Tailwind 2 - 启动器这个 Starter 结合使用、和。它试图遵循在提到的最佳实践它也使用。安装 yarn 发展 yarn dev 建造 yarn build

electron-vue-vite-webpack:Electron、vue3、vite2、webpack5、ant-design-vue2 整合

05-17

Electron + vue3 + vite2 + webpack5 + ant-design-vue2 如何和为什么 Vite是未来的脚手架在开发期间使用“拜访”以保持快速启动的优势使用“ webpack”解决包装期间的包装问题命令 npm run dev npm运行构建 ...

electron-vue-sqlite3:这个基于电子战的项目，被定制为与sqlite3一起使用，主题是受邮递员启发的

03-07

电子-VUE-SQLITE3 该项目是与sqlite3一起使用的电子战入门套件，该项目的灵感来自邮递员（）。邮递员是最流行的应用之一，它可以与电子React。我们在此项目中附加了一些流行的javascript脚本，这些脚本可立即使用...

Electron那些事03：渲染界面

uikoo9的专栏

03-16

3659

【前言】 js技术栈开发桌面端很大的优势就是ui界面开发比较快，对比原生的桌面端开发要快很多，并且基于chromium内核，支持最新的html5，css3特性，又可以开发出很酷炫的ui。总结一下就是electron开发ui界面，又快又好～【打包代码结构调整】接上一篇文章的代码结构，如下，只有src内是最终桌面应用的代码，其余的是提供electron开发环境&打包相关的代码，为了方便后续引入渲染进程相关代码，这里做一些拆分 1.将src文件夹修改为electro..

Electron无边框窗口（最小化、最大化、关闭、拖动）以及动态改变窗口大小

热门推荐

WWF_HelloWorld

10-27

4万+

文章目录一、目标原型1. 目标2. 原型设计3. 原型初步实现二、无边框窗口1. 要点2. 改造三、可拖拽区1. 要点2. 改造四、最小化、最大化、关闭1. 要点2. 改造五、动态改变窗口大小1. 要点2. 改造六、实例源码下载一、目标原型 1. 目标实现一个无边框窗口，包括最小化、最大化、关闭、拖动等功能动态改变窗口大小，即在页面跳转的时候根据需要改变窗口大小 2. 原型设计 (1) ...

electron 的中文文档的地址以及窗口改变的步骤

ASP.NET

09-23

1005

electron的中文文档的地址： http://www.kancloud.cn/wizardforcel/electron-doc/137791 1、创建窗口和改变窗口 import { BrowserWindow, globalShortcut, Menu } from 'electron' import Common from '../common/common.js' const winURL = process.env.NODE_ENV === 'development' ?..

用electron-vite开发一个登录功能

05-26

好的，首先，你需要确保已经安装了Node.js和npm。接下来，你可以按照以下步骤使用electron-vite开发一个登录功能： 1. 创建一个新的Electron项目并进入项目目录 ``` mkdir my-electron-app cd my-electron-app ``` 2. 初始化npm ``` npm init -y ``` 3. 安装依赖 ``` npm install --save-dev electron electron-builder vite npm install --save express ``` 4. 创建一个vite.config.js文件 ``` const { defineConfig } = require('vite') module.exports = defineConfig({ build: { outDir: 'dist', emptyOutDir: true, target: 'esnext', // 设置 electron-main 为主进程入口文件 main: 'src/electron-main/index.js', // 设置 electron-renderer 为渲染进程入口文件 renderer: 'src/electron-renderer/index.js', }, }) ``` 5. 创建一个src/electron-main/index.js文件 ``` const { app, BrowserWindow } = require('electron') const path = require('path') let mainWindow function createWindow () { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, }, }) mainWindow.loadFile(path.join(__dirname, '../electron-renderer/index.html')) mainWindow.on('closed', function () { mainWindow = null }) } app.on('ready', createWindow) app.on('window-all-closed', function () { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', function () { if (mainWindow === null) { createWindow() } }) ``` 6. 创建一个src/electron-renderer/index.js文件 ``` const express = require('express') const app = express() app.use(express.static('public')) app.listen(3000, () => console.log('App listening on port 3000!')) ``` 7. 创建一个src/electron-renderer/index.html文件 ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My Electron App</title> </head> <body> <h1>Welcome to My Electron App</h1> <script src="http://localhost:3000/login.js"></script> </body> </html> ``` 8. 创建一个public/login.js文件 ``` console.log('Login page') ``` 9. 运行应用 ``` npx electron-builder serve ``` 10. 打包应用 ``` npx electron-builder build ``` 以上就是使用electron-vite开发一个登录功能的步骤，你可以根据自己的需求进行修改和扩展。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交