2024最新版本 electron + vite + sqlite 开发收藏夹程序 2024最新版本 electron + vite + sqlite 开发收藏夹程序【续一】 2024最新版本 electron + vite + sqlite 开发收藏夹程序【完结】
2023闲来无事，想模仿某播做一个windows下的桌面直播工具，下图为雏形
因为作者年纪比较大，又不是专业程序员，全是自学，现学现用，在编写的过程中需要查阅大量资料，时间一久查阅过的网页还想再看看，没整理又忘记在哪了，思考了下索性自己先写一个收藏功能权当练练手，虽然在技术大佬面前可能是微不足道，不过觉得有可能帮助到纯小白，所以还是决定把编写过程分享给需要的朋友，下图为初步成型的收藏应用截图
难点：
1、国内开发环境很差，npm包，github连接不稳定等；
2、网络上查阅的大部分资料已经过时；
开发环境 ：
平台：windows 10 版本2202H，家里和办公室对比了下，这个版本比较稳定，对nodejs支持较好
编辑器：Visual Studio Code， 这里下载的是最新的1.85版本，开发前安装好备用
语言：nodejs 20.10.0，javascript，似乎现在很火的是typescript，作者尝试过，很难，放弃了，有大佬免费教的吗？
框架：vue 3.3.11 ，electron 28.1.1
UI框架：TDesign ，腾讯出品，因为框架为vue3，所以选择了 vue next
构建工具：vite 5.0.10 也有说是打包工具的？
本地数据库：SQLite 3
包管理器：npm各种问题，选择了yarn，目前基本上稳定
搭建步骤
- 第一步：搭建VITE项目
1、进入任意空文件夹，地址栏输入cmd回车，命令符下输入code回车，即可直接用vscode打开该文件，也可以直接运行vscode打开此文件夹
2、vscode打开后，按快捷键 ctrl+shift+` 打开一个终端，输入
yarn create vite
回车，
提示：project name即文件夹名称，可缺省或自定义输入；提示：Select a framework，选择 vue；提示：Select a variant，选择 javascript
3、cd your-project，执行 yarn 安装依赖，依赖安装完毕后执行 yarn dev，浏览器打开http://localhost:5173/ 出现如下界面表示VITE项目搭建成功
- 第二步：添加 electron & electron-builder
vscode 终端输入
yarn add --dev electron electron-builder
此命令将添加 electron & electron-builder （electron-builder为electron打包工具）
- 第三步：添加生产依赖，链接尽可能是中文版文档
vscode 终端输入
yarn add axios cheerio fs-extra less tdesign-vue-next
此命令将在项目中添加以下依赖 axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中 cheerio cheerio基于 @FB55’s forgiving htmlparser2。cheerio可以解析几乎任何HTML或XML文档。 fs-extra fs-extra是fs模块的替代品 less Less 是一门CSS预处理语言，它扩充了CSS语言，增加了诸如变量、混合（mixin）、函数等功能，让CSS更易维护、方便制作主题、扩充。Less可以运行在Node.js或浏览器端 tdesign-vue-next 企业级设计体系，腾讯出品
- 第四步：添加开发依赖，链接尽可能是中文版文档
vscode 终端输入
yarn add concurrently unplugin-auto-import unplugin-vue-components -d
此命令将在项目中添加以下依赖 concurrently 前后端连载 unplugin-auto-import unplugin-vue-components 自动导入常用的使用的第三方库的 API
- 第五步：添加SQLite3
vscode 终端输入
yarn add sqlite3
SQLite3添加时会有各种各样的状况，可以自行百度或私信我
至此，我们已经完成了此次开发所需要的准备工作，目录结构应该长这样
为了正常开发，需要对package.json文件做出以下修改
1、删除 “type”: “module”, 包括逗号，以支持CommonJs，否则electron无法运行 3、根节点添加 “main”: “electron/main.js” 2、“scripts”: {} 中添加两行
"electron:dev": "concurrently -k \"vite\" \"electron .\"",
"electron:build": "vite build && electron-builder",
完整package.json
{
"name": "vite-project",
"private": true,
"version": "0.0.0",
"main": "electron/main.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"electron:dev": "concurrently -k \"vite\" \"electron .\"",
"electron:build": "vite build && electron-builder"
},
"dependencies": {
"axios": "^1.6.4",
"cheerio": "^1.0.0-rc.12",
"concurrently": "^8.2.2",
"fs-extra": "^11.2.0",
"less": "^4.2.0",
"sqlite3": "^5.1.6",
"tdesign-vue-next": "^1.7.2",
"unplugin-auto-import": "^0.17.3",
"unplugin-vue-components": "^0.26.0",
"vue": "^3.3.11"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.5.2",
"electron": "^28.1.1",
"electron-builder": "^24.9.1",
"vite": "^5.0.8"
}
}
最后在项目根目前新建文件夹名为：electron，在新建的目录下新建 main.js，输入以下内容并保存
const { app, BrowserWindow} = require('electron')
const path = require('node:path')
const isPackaged = app.isPackaged
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
var mainWindow
app.whenReady().then(() => {
createMainWindow()
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) createMainWindow()
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
const createMainWindow = () => {
mainWindow = new BrowserWindow({
frame:false,
fullscreenable:false,
fullscreen: false,
maximizable: false,
shadow: true,
hasShadow: true,
resizable: false,
width: 880,
height: 500,
webPreferences:{
nodeIntegration:true,
contextIsolation: true
}
})
mainWindow.on('ready-to-show', () => {
mainWindow.show()
})
if (!isPackaged){
mainWindow.loadURL("http://localhost:5173/");
}else{
mainWindow.loadFile(path.resolve(__dirname, '../build/index.html'))
}
}
**vscode 终端输入
yarn run electron:dev
出现以下界面代表基础环境搭建成功**
未完待续，后续文章将会讲解electron 与 vue 通信 的处理过程
精彩链接
您阅读本篇文章共花了：
发表评论