2024最新版本 electron + vite + sqlite 开发收藏夹程序

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 通信 的处理过程