Electron开发准备

在开始实际开发之前,我们需要做一些准备工作。

1.添加Quasar Electron模式

为了开发/构建Quasar Electron应用程序,我们需要在我们的Quasar项目中添加Electron模式。 它的功能是通过npm安装一些Electron软件包并创建/src-electron文件夹。

$ quasar mode -a electron

每个Electron应用程序都有两个线程:主线程(处理窗口和初始化代码 - 来自新创建的文件夹“/src-electron”)和渲染线程(处理应用程序的实际内容 - 来自“/src“)。

新文件夹具有以下结构:

.
└── src-electron/
   ├── icons/ # 所有平台的应用图标
   | ├── icon.icns # Darwin (MacOS)平台的图标文件
   | ├── icon.ico # win32 (Windows)平台的图标文件
   | └── linux-256x256.png # Linux平台的图标文件
   └── main-process/ # 主线程源代码
   ├── electron-main.dev.js # 开发时的主线程代码; 参见下文
   └── electron-main.js # 主生产线程代码

当您添加Quasar Electron模式时,您会注意到安装了几个npm软件包。这些是Electron特有的,因为Electron不遵循semver符号,所以最好锁定已安装的版本。否则,从事同一项目的其他开发人员最终可能会在不同的Electron版本上使用 - 这会导致问题。Electron经常发布版本,所以功能总是可调整的

Electron-main.dev.js

该文件(/src-electron/main-process/electron-main.dev.js)专门用于开发,用于安装开发工具。通常不需要修改,但可以用来扩展您的开发需求。在它设置开发工具之后,它会导入electron-main.js,这是你将做的最多(如果不是全部的话)改变的地方。

Windows用户注意事项

如果在npm安装期间遇到关于node-gyp的错误,那么很可能没有在系统上安装正确的构建工具。构建工具包括Python和Visual Studio等项目。幸运的是,有几个软件包可以帮助简化这个过程。

我们需要检查的第一项是我们的npm版本,并确保它不会过时。这是使用npm-windows-upgrade完成的。如果你正在使用yarn,那么你可以跳过这个检查。

一旦完成,我们就可以继续设置所需的构建工具。使用windows-build-tools为我们完成大部分繁重的工作。全局安装将依次设置Visual C++包,Python等。

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

2.开始开发

如果您想直接进入并开始开发,可以使用“quasar mode”命令跳过上一步并发出:

$ quasar dev -m electron -t [mat|ios]

如果没添加electron模式,这将自动添加electron模式。
它将打开一个Electron窗口,渲染您的应用并和打开的开发工具窗口并排放置。