drawio-desktop 项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00104/article/details/140976745

drawio-desktop 项目教程

drawio-desktopOfficial electron build of draw.io项目地址:https://gitcode.com/gh_mirrors/dr/drawio-desktop

1. 项目的目录结构及介绍

drawio-desktop 是一个基于 Electron 的图表和白板桌面应用程序。项目的目录结构如下：

drawio-desktop/
├── .github/
├── .vscode/
├── build/
├── css/
├── images/
├── js/
├── node_modules/
├── package.json
├── src/
│   ├── main/
│   └── renderer/
├── test/
├── yarn.lock
└── README.md

.github/: 包含 GitHub 相关的配置文件。
.vscode/: 包含 Visual Studio Code 的配置文件。
build/: 包含构建相关的文件和资源。
css/: 包含样式文件。
images/: 包含图像文件。
js/: 包含 JavaScript 文件。
node_modules/: 包含项目依赖的 Node.js 模块。
package.json: 项目的配置文件，包含依赖、脚本等信息。
src/: 包含源代码文件。
- main/: 包含主进程的代码。
- renderer/: 包含渲染进程的代码。
test/: 包含测试文件。
yarn.lock: 锁定依赖版本的文件。
README.md: 项目的说明文档。

2. 项目的启动文件介绍

项目的启动文件主要是 package.json 中的 main 字段指定的文件，通常是 src/main/main.js。这个文件负责启动 Electron 应用的主进程。

{
  "main": "src/main/main.js"
}

src/main/main.js 文件的主要功能是创建窗口和管理应用的生命周期。

3. 项目的配置文件介绍

项目的配置文件主要是 package.json。这个文件包含了项目的元数据、依赖、脚本等信息。

{
  "name": "drawio-desktop",
  "version": "1.0.0",
  "main": "src/main/main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "dependencies": {
    "electron": "^12.0.0"
  },
  "devDependencies": {
    "electron-builder": "^22.10.5"
  }
}

name: 项目的名称。
version: 项目的版本号。
main: 主进程的入口文件。
scripts: 包含可执行的脚本命令。
- start: 启动开发环境的命令。
- build: 构建应用的命令。
dependencies: 生产环境依赖的模块。
devDependencies: 开发环境依赖的模块。