为什么捐赠
API 浏览器
联系站长
Quasar CLI with Vite - @quasar/app-vite
开发 Electron 的准备工作

开始真正的开发前,我们需要进行一些准备工作。

Step 1: 添加 Quasar Electron 开发模式

为了开发/构建一个 Quasar Electron 应用,我们需要为 Quasar 项目添加 Electron 模式。运行以下命令会通过 yarn/npm/pnpm/bun 安装相关 Electron 依赖并创建 /src-electron 目录。

$ quasar mode add electron

每个 Electron 应用都有两个进程:一个是主进程(使用 /src-electron 目录中的代码处理应用窗口和初始化工作),另一个是渲染进程(基本上是您的 /src 目录下的 UI 代码)。

新创建的目录结构如下:

icon.icns
# Icon file for Darwin (MacOS) platform
icon.ico
# Icon file for win32 (Windows) platform
icon.png
# Tray icon file for all platforms
electron-preload.js
# (or .ts) Electron preload script (injects Node.js stuff into renderer thread)
electron-main.js
# (or .ts) Main thread code
electron-env.d.ts
# TypeScript only

Windows 用户的注意事项

如果您在安装 node-gyp 时遇到错误,您的电脑可能缺少必要的构建工具。例如 Python 和 Visual Studio 等。所幸,这里有一些工具可以帮您简化这个过程。

第一步要做的是检查我们的 npm 版本,确保没有过时,可以通过 npm-windows-upgrade 来完成。但如果您在使用 yarn,那么可以跳过这个检查。

然后我们可以使用 windows-build-tools 继续安装上述的构建工具,它会为我们在全局依次安装 Visual C++、Python 等等。

注意:2019 年 4 月

使用 Powershell.exe(管理员方式运行) npm install --global windows-build-tools 目前似乎失败,错误指向 python2 和 vctools。您可以使用 Chocolatey 来解决这个问题:

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString(‘https://chocolatey.org/install.ps1’))

然后运行: choco upgrade python2 visualstudio2017-workload-vctools.

这时应该安装成功了,但如果没有,那么您将需要全新安装 Visual Studio。请注意,这些不是 Quasar 的问题,而是与 NPM 和 Windows 有关。

Step 2: 开始开发

如果您想直接进入开发过程,您可以跳过上面的 “quasar mode” 步骤,直接运行:

$ quasar dev -m electron

# passing extra parameters and/or options to
# underlying "electron" executable:
$ quasar dev -m electron -- --no-sandbox --disable-setuid-sandbox
# when on Windows and using Powershell:
$ quasar dev -m electron '--' --no-sandbox --disable-setuid-sandbox

如果缺少 Electron 模式,项目将自动添加。运行成功后会打开一个 Electron 窗口渲染您的应用并在右边打开一个开发者调试工具。