在我們深入實際開發之前,我們需要做一些準備工作。
步驟 1:新增 Quasar Electron 模式
為了開發/建置 Quasar Electron 應用程式,我們需要將 Electron 模式新增到我們的 Quasar 專案中。這樣做會使用 yarn/npm/pnpm/bun 安裝一些 Electron 套件並建立 /src-electron
資料夾。
$ quasar mode add electron
每個 Electron 應用程式都有兩個執行緒:主執行緒(處理視窗和初始化程式碼 – 來自新建立的資料夾 /src-electron
)和渲染器執行緒(處理應用程式的實際內容,來自 /src
)。
新資料夾具有以下結構
Windows 使用者注意事項
如果您在 npm install 期間遇到關於 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
# 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 視窗,該視窗將渲染您的應用程式,並排開啟開發人員工具。