Vue 学习之 安装electron，serialport，sqlite3

最新推荐文章于 2024-05-28 00:10:38 发布
最新推荐文章于 2024-05-28 00:10:38 发布
阅读量1.5k 收藏 9
点赞数 1
分类专栏： # vue 学习 文章标签： vue electron serialport sqlite3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gpf19930310/article/details/104642553
版权

写在最前面 我的node 版本
在这里插入图片描述

一.Electron 基础环境搭建

1.安装 vue,vue-cli

vue 安装
npm install vue -g

vue-cli 安装
npm install -g @vue/cli
# OR
yarn global add @vue/cli

2.安装electron-vue 并新建工程

安装 electron
npm install electron --save-dev

安装 Windows-Build-Tools
	这里默认安装的时 vs2017 生成工具，如果曾经安装过，可能需要在重新手动安装 vsBuild.exe

 npm install --global windows-build-tools

通过脚手架，安装新工程
vue init simulatedgreg/electron-vue my-project

如果网络比较慢，可以先把工程模板下载下来(https://github.com/SimulatedGREG/electron-vue),在通过下面的指令安装
vue init E:\MyWork\electron-vue(工程模板的路径) my-project

3.安装依赖环境

 npm install

4.运行

npm run dev

在这里插入图片描述在这里插入图片描述

二.Serialport 安装

1.安装依赖

配置工具
npm install -g node-gyp

编译工具
npm install --save-dev electron-rebuild

2.安装Serialport

npm install serialport --save

3. 重新编译

.\node_modules\.bin\electron-rebuild.cmd

在这里 出现了几个问题

a.编译时 出现乱码，并且报出致命错误在这里插入图片描述

解决方法：
首先卸载 serialport ，然后全局用npm 官方源安装 serialport ，之后再.\node_modules.bin\electron-rebuild.cmd ，这个时候提示 rebuild complete

另外 以后如果有什么问题，尽量第一做法是卸载 组件，然后再用官方源安装一遍
在这里插入图片描述

----------------------------------以下是尝试过程----------------------------------------------

这时我的做法是 先将Serialport 卸载了，然后再重新安装

卸载 serialport
npm uninstall serialport

之后再在node_modules\serialport 下 运行 串口配置命令

node-gyp configure

然后又报错了
在这里插入图片描述
在node_modules 下搜索 binding.gyp 发现有四个文件
在这里插入图片描述
发现在node_modules/@serialport/bindings 目录下，有一个bindng.gyp,不清楚是不是要把这个binding.gyp 复制到node_modules/serialport 下。我是在 node_modules/@serialport 下运行 配置命令，然后没有报错
—》 这种做法最后在生成 app后，console 提示未找到 serialport 类

新做法–》 将 @serialport 下所有文件复制到serialport 下 然后node-gyp rebuild 没有错误，但是出现下面的问题 不知道什么问题
在这里插入图片描述
在这里插入图片描述
之后不管是rebuild 还是 install 都没有报错

如果有其他的问题，可以参考这个链接

三. 安装sqlite3

cnpm i sqlite3 -S
1. 编译sqlite3
node-gyp rebuild --target=2.0.4 --arch=x64 --target_platform=win32 --dist-url=https://atom.io/download/electron/ --module_name=node_sqlite3 --module_path=../lib/binding/electron-v2.0.4-win32-x64
平台配置 win10 64位   --arch=x64 --target_platform=win32

如果太慢,可以把
--dist-url=https://atom.io/download/electron/
换成
--dist-url=http://npm.taobao.org/mirrors/atom-shell

四. 过程中遇到的错误

1.node-sass 兼容问题

在这里插入图片描述
这种情况 重新rebuild 一下就好

npm rebuild node-sass

2.控制台运行时，出现 (Module not found: Error: Can’t resolve ‘XXX’ in ‘XXXX’ )

在这里插入图片描述
这时候 安装下，然后再rebuild 就好了

npm i XXX --save

如果有ERR，可以
npm uninstall XXX
npm i XXX --save
繁夜
关注
专栏目录
前端使用SerialPort串口通信
weixin_73250108的博客
08-06 446
添加autoOpen为false改为关闭，手动打开open方法。path串口名称，baudRate波特率。在mounted或者onLoad中初始化，默认创建的。
electron-vue-serialport:electron-vue serialport 串口读取
05-24
项目参考 项目运行环境 1，必须安装nodejs node下载地址- 2，安装node-gyp node-gyp是用来编译c++模块的工具，这里用来编译serialport， node-gyp的github文档- 全局安装 npm install -g node-gyp 通过命令npm install --global --production windows-build-tools,但是要注意 的是必须以管理员的身份启动CMD窗口 安装完成之后执行一下命令 npm config set msvs_version 2017 其他安装方法……百度 项目的安装与使用 clone到本地 # clone到本地 git clone https://github.com/648702308/electron-vue-serialport.git # 切换到项目目录 npm install`或者`cnp
electron-vue 安装 sqlite3 详细步骤
qq：489366879
06-17 1979
使用 Visual Studio instaler 安装Visual Studio 2019， 安装桌面应用 使用c++的桌面开发, 勾选 MSVC 相应的选项。 可以根据自己实际情况安装版本使用 cmd 管理员身份或者 powerShell 管理员身份 执行以下命令：1. npm install --global --production windows-build-tools 2 . npm config set msvs_version 2019 --global 3. npm install
Electron+vue3项目使用SQLite3数据库
SUN-天旭
08-08 6431
SQLite是一种嵌入式关系型数据库管理系统，是一个零配置、无服务器的、自给自足的、事务性的SQL数据库引擎。SQLite是一个轻量级的数据库，可以在各种操作系统上使用，并且支持SQL语言标准。它是一个零配置的数据库，这意味着与其他数据库不一样，我们不需要在系统中配置。在electron目录下新建db文件夹，存放sqlite3db.js文件。/electron/main.js里面引入sqlite3db.js文件。是一个进程内的库，实现了自给自足的、无服务器的、零配置的、事务性的。直接访问其存储文件。
electron-vue-serialport
qq_41432775的博客
04-01 324
1、必须安装nodejsnode下载地址2、安装node-gypnode-gyp是用来编译c++模块的工具，这里用来编译serialport， node-gyp的github文档-node-gyp文档全局安装通过命令，但是要注意 的是必须以管理员的身份启动CMD窗口。
electron 安装 serialport 流程
u012817876的博客
11-01 557
electron npm 安装速度慢问题 转载：https://blog.csdn.net/GorgeousChou/article/details/82929887 把安装包放在 用户 文件下 如： c:\Users\SUNMI\.electron 下 serialport 安装 转载：https://www.cnblogs.com/yangxiaobai123/p/113867...
electron+vite+vue3+sqlite3基础框架
12-14
本项目是一个基于`Electron`的桌面应用程序开发框架，它结合了现代前端开发工具`Vite`和流行的前端框架`Vue.js`的最新版本`Vue3`，以及轻量级的本地数据库系统`SQLite3`。这个基础框架为开发者提供了一个快速启动新...
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 ... 电子vue-sqlite3-demo
electron-serialport.zip_electron 读串口_electron串口_nodejs_nodejs串口编
07-13
Electron的独特之处在于它同时运行了Chromium的渲染进程和Node.js的主进程。在处理串口通信这类后台任务时，通常在主进程中进行，然后通过IPC（Inter-Process Communication）机制与渲染进程通信，将串口数据传递给...
electron-vue+elementui自建sqlite3.orm层，设计。
梦一样的博客，神话般的感觉
01-26 839
操作系统： MacOS:Big Sur 11.1 工具版本： nodejs:15.0.2 npm:7.0.10 yarn:1.22.10 python:2.7.16 框架版本： electron:11.2.0 vue:2.5.16 elementui:2.14.1 sqlite3:5.0.0 1. 安装sqlite3(具体的安装过程我就不详解了，网上好多文章说编译不通过。sqlite3没有预编译库等等问题。不知为何，小编从来没有碰到过) yarn add sqlite3 2.先封装一下针.
vue-node-sqlite3:vue + node + sqlite3实现增删改查
03-19
vue-node-sqlite3 vue + node + sqlite3实现增删改查 backend后端文件 前前端文件 整体实现登录注册（jwt）增删改查都需携带令牌 网上vue + node + sqlite3完整的实现这一套功能还是很少的，期待你的Star
electron-vue项目使用串口工具serialport
lrqforest的博客
06-03 2121
第一步：配置环境 安装Python2.7 配置环境变量（官网下载）看网上说明必须是2.7版本，3不支持 下载 ： https://www.python.org/downloads/ 配置环境变量： 2.安装 npm install --global --production windows-build-tools 3.安装node-gyp npm install -g node-gyp 第二步：安装 1.安装serialport npm install --save serialport 2.安装e
Vue下使用serialport
明耀的博客
02-27 9053
用黑框框（命令）运行 1：先要安装 node-gyp npm install -g node-gyp （全局安装） 2.需要安装VS2017和python （我电脑里面有VS2017) 切记：python安装目录不要更改 也就是要装C盘 指令：如下 npm config set python python2.7 npm config set msvs_version 2...
electron+vue+sqlite3开发环境配置
qq_39544728的博客
01-05 630
electron环境搭建中的报错记录
第二篇 electron + vue + sqlite3 桌面端集成本地数据库实现增删改查
qq_42647677的博客
02-18 3249
SQLite是一种嵌入式关系型数据库管理系统，是一个零配置、无服务器的、自给自足的、事务性的SQL数据库引擎。SQLite是一个轻量级的数据库，可以在各种操作系统上使用，并且支持SQL语言标准。SQLite可以用来存储和管理大量的数据，并且可以通过SQL语句来查询和操作这些数据。它可以用于移动应用程序、桌面应用程序、Web应用程序、嵌入式系统等等。
Electron 框架 + Vue3 + Prisma + SQLite笔记
最新发布
zsyok的专栏
05-28 706
下面错误，有可能是通过 yarn prisma db push 推送时建立的数据库有问题，解决方法，使用其他sqllite管理软件手动建立数据库 然后再执行推送建。初始化Prisma生成 prisma/schema.prisma 文件。electron 使用 prisma 安装客户端工具。prisma/schema.prisma 文件。将 Prisma 模型推送到数据库。重新生成 Prisma 客户端。配置数据库文件 .env。
electron-vue 台称串口对接 SerialPort
Embrace924的博客
07-11 4083
1.首先找一个串口工具（）试试读取串口是否成功连上；2.创建；3.安装，调整版本，启动项目；4.学习工具；5.开发入口文件，测试是否成功获取串口信息6.成功获取串口后，接收台称数据7.根据台称说明书与协议，解析台称数据（数值，单位，正负，精度...）8.完成称重需求9.完成打印需求10.完成自动更新11.防止开启多个应用。
electron-vue使用serialport串口通信及踩过的坑（已解决！）
w_ziShan的博客
04-10 3371
一、配置环境
vite+Vue3+typrscript+electron使用sqlite3案例
05-11
下面是一个使用vite、Vue3、TypeScript和Electron的SQLite3案例： 1. 首先，创建一个新的Electron项目： ``` mkdir my-electron-project cd my-electron-project npm init -y npm install --save-dev electron ``` 2. 安装vite作为前端构建工具： ``` npm install --save-dev vite ``` 3. 创建一个新的Vue3项目： ``` npm install --save-dev vue@next npm install --save-dev @vue/compiler-sfc ``` 4. 集成TypeScript： ``` npm install --save-dev typescript npm install --save-dev @types/node npm install --save-dev @types/electron ``` 5. 安装SQLite3依赖： ``` npm install --save sqlite3 ``` 6. 在你的项目根目录下创建一个`src`文件夹，然后在`src`下创建一个新的`main.ts`文件，作为Electron应用程序的入口点： ``` import { app, BrowserWindow } from 'electron'; let win: BrowserWindow | null = null; function createWindow() { win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, }, }); win.loadURL(`http://localhost:3000`); win.webContents.openDevTools(); win.on('closed', () => { win = null; }); } app.on('ready', createWindow); app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { if (win === null) { createWindow(); } }); ``` 7. 在`src`下创建一个新的`renderer.tsx`文件，用于渲染Vue3组件： ``` import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app'); ``` 8. 在`src`下创建一个新的`App.vue`文件，这是Vue3的根组件： ``` <template> <div id="app"> <h1>SQLite3 Example</h1> <p v-if="data">Data: {{ data }}</p> <button @click="fetchData">Fetch Data</button> </div> </template> <script lang="ts"> import { defineComponent, reactive } from 'vue'; import sqlite3 from 'sqlite3'; export default defineComponent({ setup() { const state = reactive({ data: null, }); const fetchData = () => { const db = new sqlite3.Database(':memory:'); db.serialize(() => { db.run('CREATE TABLE lorem (info TEXT)'); const stmt = db.prepare('INSERT INTO lorem VALUES (?)'); for (let i = 0; i < 10; i++) { stmt.run(`Ipsum ${i}`); } stmt.finalize(); const results: string[] = []; db.each('SELECT rowid AS id, info FROM lorem', (err, row) => { results.push(`${row.id}: ${row.info}`); }, (err, count) => { state.data = results.join('\n'); }); }); db.close(); }; return { data: state.data, fetchData, }; }, }); </script> <style> body { font-family: sans-serif; font-size: 16px; margin: 0; padding: 0; } #app { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; } button { margin-top: 2em; padding: 1em; font-size: inherit; } </style> ``` 9. 在项目根目录下创建一个新的`index.html`文件，作为Vue3应用程序的入口点： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SQLite3 Example</title> </head> <body> <div id="app"></div> <script type="module" src="/src/renderer.tsx"></script> </body> </html> ``` 10. 在项目根目录下创建一个新的`main.ts`文件，作为vite的入口点： ``` import { app, BrowserWindow } from 'electron'; import path from 'path'; import url from 'url'; import vite from 'vite'; let win: BrowserWindow | null = null; async function createWindow() { const viteServer = await vite.createServer({ server: { middlewareMode: true, }, }); await viteServer.listen(); win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, }, }); if (process.env.NODE_ENV === 'development') { win.loadURL(`http://localhost:3000`); } else { win.loadURL( url.format({ pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true, }) ); } win.webContents.openDevTools(); win.on('closed', () => { win = null; }); } app.on('ready', createWindow); app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { if (win === null) { createWindow(); } }); ``` 11. 在`package.json`中添加以下脚本： ``` "scripts": { "dev": "cross-env NODE_ENV=development electron .", "build": "cross-env NODE_ENV=production vite build && electron .", "start": "electron ." } ``` 12. 运行开发服务器： ``` npm run dev ``` 13. 运行Electron应用程序： ``` npm run start ``` 这样，你就可以在Electron应用程序中使用SQLite3了。在这个示例中，我们创建了一个内存数据库，并插入了10条数据。当用户点击“Fetch Data”按钮时，我们从数据库中检索这些数据，并在屏幕上显示它们。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值