李钟意讲前端

外观

咨询/接单/付费bug修复/学习交流群

精通 electron 常用开源库 ​

Electron 为我们打开了一个构建跨平台桌面应用的大门。要充分发挥其功能，以下开源库和工具是不可或缺的。

1. electron-log ​

  • 简介：electron-log 是专门为 Electron 应用开发的日志工具，能自动识别主进程和渲染进程，同时支持日志的各种级别和输出方式。
  • 用法：可以轻松为应用添加日志功能，支持将日志保存到文件、控制台等多种输出方式。
  • electron-log

2. node-sqlite3 ​

  • 简介：提供 SQLite3 数据库的 Node.js 绑定，让 Electron 应用能够轻松集成一个轻量级的关系型数据库。
  • 用法：无需服务器，直接在应用中进行数据的存储、查询和操作。
  • node-sqlite3

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

3. electron-store ​

  • 简介：提供一个简洁的 API 来保存和读取 Electron 应用中的用户设置和其他数据。
  • 用法：替代 localStorage，将数据存储到用户的电脑上，保证数据的持久性。
  • electron-store

4. ffi-napi 和 ref-napi ​

  • 简介：从 Node.js 调用 C 语言动态链接库，打通 Electron 和原生模块的交互。
  • 用法：当 Electron 应用需要调用系统 API 或其他原生库时，这两个库都是非常有用的。
  • ffi-napi
  • ref-napi

5. electron-builder ​

  • 简介：提供一整套的解决方案，包括构建、打包和发布 Electron 应用。
  • 用法：只需要一个简单的配置文件，就能打包并生成适用于各个平台的安装文件。
  • electron-builder

6. vue-cli-plugin-electron-builder ​

  • 简介：为 Vue 开发者提供的插件，将 Electron 集成到 Vue CLI 项目中。
  • 用法：允许您在 Vue 项目中直接使用 Electron，无需繁琐的配置。
  • vue-cli-plugin-electron-builder

7. electron-vite-vue ​

  • 简介：提供了一个现代化的 Electron 开发模板，集成了 Vite 和 Vue 3。
  • 用法：使得 Electron 开发更为快速和流畅，特别是在前端开发中。
  • electron-vite-vue

8. node-gyp 和 node-pre-gyp ​

  • 简介：用于编译和构建 Node.js 原生插件模块的工具。
  • 用法：当 Electron 应用需要使用原生模块时，这些工具能确保模块正确地编译和打包。
  • node-gyp
  • node-pre-gyp

9. @electron/rebuild ​

  • 简介：当 Electron 版本发生变化时，这个工具能够自动重建应用中的原生模块。
  • 用法：确保 Electron 升级后，原生模块仍能正常工作。
  • @electron/rebuild

10. vxe-table ​

  • 简介：为 Vue 设计的高级表格组件，支持虚拟滚动、树形结构等众多功能。
  • 用法：在 Electron 应用中展示和操作大量数据时，这个组件能大大提高效率和用户体验。
  • vxe-table

11. Visual Studio 2022 ​

  • 简介：除了作为开发工具，Visual Studio 2022 还提供了 Electron 应用所需的 DLL 编译环境。
  • 用法：确保 Electron 应用能够正确地编译和运行。
  • 安装指南

12. electron-updater ​

  • 简介：自动更新工具，可以用来在 Electron 应用中实现自动检查并下载更新。
  • 用法：与 electron-builder 配合，让应用保持最新状态。
  • electron-updater

13. electron-context-menu ​

  • 简介：为 Electron 应用提供一个定制的上下文菜单。
  • 用法：只需几行代码，即可实现丰富和可定制的上下文菜单。
  • electron-context-menu

14. electron-notarize ​

15. electron-remote ​

  • 简介：在 Electron 的主进程和渲染进程之间进行高效的数据交换。
  • 用法：可以替代传统的 ipcMain 和 ipcRenderer 通信方法，提供更好的性能。
  • electron-remote

16. electron-devtools-installer ​

  • 简介：允许您轻松地为 Electron 应用安装 Chrome DevTools 扩展。
  • 用法：在 Electron 应用中使用例如 React 或 Vue 的开发者工具。
  • electron-devtools-installer