Electron开发准备 | Quasar Framework 中文网

Electron开发准备

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

1.添加Quasar Electron模式

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

$ quasar mode add electron

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

新文件夹具有以下结构：

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

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等。

注意：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有关。

2.开始开发

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

$ quasar dev -m electron

# 给底层的“cordova”可执行文件
# 传递额外的参数和/或选项：
$ quasar dev -m electron -- --no-sandbox --disable-setuid-sandbox

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

阅读更多?