BEX 準備 | Quasar 框架

Quasar CLI with Vite - @quasar/app-vite

BEX 的準備工作

建立 SPA、行動應用程式、Electron 應用程式、BEX 或 SSR 之間的差異僅僅由 “quasar dev” 和 “quasar build” 命令中的 “mode” 參數決定。

新增 Quasar BEX 模式

為了建置 BEX，我們首先需要將 BEX 模式新增到我們的 Quasar 專案中

$ quasar mode add bex

如果您想直接開始開發，您可以跳過 “quasar mode” 命令並發出

$ quasar dev -m bex

如果缺少 BEX 模式，這將自動新增 BEX 模式，並將 src-bex 資料夾新增到您的專案中。

提示

src-bex 資料夾只是一個標準的瀏覽器擴充功能資料夾，因此您可以像使用任何其他瀏覽器擴充功能專案資料夾一樣自由使用它。請參閱支援的瀏覽器擴充功能文件以瞭解更多資訊。

新資料夾具有以下結構

src-bex/

assets/

content.css

# CSS 檔案，透過 manifest.json 自動注入到消費網頁中

background.js

# 標準背景腳本 BEX 檔案 (透過 manifest.json 自動注入)

dom.js

# JS 檔案，注入到 DOM 中，並 Hook 到 BEX 通訊層

icons/

# 適用於所有平台的應用程式圖示

icon-128x128.png

# 128px x 128px 的圖示檔案

icon-16x16.png

# 16px x 16px 的圖示檔案

icon-48x48.png

# 48px x 48px 的圖示檔案

_locales/

# 您可能在 manifest 中定義的可選 BEX 地區設定檔

manifest.json

# 瀏覽器擴充功能 manifest 檔案

my-content-script.js

# 標準內容腳本 BEX 檔案 - 透過 manifest.json 自動注入 (您可以有多個腳本)

下一節將更詳細地討論這些內容。

1. 簡介

2. 新增 Quasar BEX 模式

3. 瞭解 “src-bex” 的結構