在开始实际开发之前,我们需要做一些准备工作。
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时)
├── electron-preload.js # (或.ts) Electron预加载脚本(将Node.js的东西注入渲染器线程)。
└── electron-main.js # (或.ts) 主线程代码
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
# 在Windows上使用Powershell时:
$ quasar dev -m electron '--' --no-sandbox --disable-setuid-sandbox
如果没添加electron模式,这将自动添加。 它将打开一个Electron窗口,渲染您的应用并和打开的开发工具窗口并排放置。