為何捐款
API 瀏覽器
升級指南
NEW!
quasar.config 檔案
轉換為搭配 Webpack 的 CLI
瀏覽器相容性
支援 TypeScript
目錄結構
指令列表
CSS 預處理器
路由
延遲載入 - 程式碼分割
處理資源
啟動檔案
預先載入功能
API 代理
處理 Webpack
處理 process.env
使用 Pinia 進行狀態管理
使用 Vuex 進行狀態管理
Linter
測試與稽核
開發行動應用程式
Ajax 請求
開放 Dev Server 給公眾
搭配 Webpack 的 Quasar CLI - @quasar/app-webpack
Electron 準備工作

在我們深入實際開發之前,我們需要做一些準備工作。

步驟 1:新增 Quasar Electron 模式

為了開發/建置 Quasar Electron 應用程式,我們需要將 Electron 模式新增到我們的 Quasar 專案中。這樣做會使用 yarn/npm/pnpm/bun 安裝一些 Electron 套件並建立 /src-electron 資料夾。

$ quasar mode add electron

每個 Electron 應用程式都有兩個執行緒:主執行緒(處理視窗和初始化程式碼 – 來自新建立的資料夾 /src-electron)和渲染器執行緒(處理應用程式的實際內容,來自 /src)。

新資料夾具有以下結構

icon.icns
# Darwin (MacOS) 平台的圖示檔案
icon.ico
# win32 (Windows) 平台的圖示檔案
icon.png
# 所有平台(尤其是 Linux)的系統匣圖示檔案
electron-preload.js
# (或 .ts)Electron 預載腳本(將 Node.js 內容注入渲染器執行緒)
electron-main.js
# (或 .ts)主執行緒程式碼

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 視窗,該視窗將渲染您的應用程式,並排開啟開發人員工具。