API 浏览器
Quasar CLI with Webpack - @quasar/app-webpack
BEX 准备

构建 SPA、移动应用、Electron 应用、BEX 或 SSR 之间的区别仅仅取决于 “quasar dev” 和 “quasar 构建” 命令中的 “mode” 参数。

¥The difference between building a SPA, Mobile App, Electron App, BEX or SSR is simply determined by the “mode” parameter in “quasar dev” and “quasar build” commands.

添加 Quasar BEX 模式(Add Quasar BEX Mode)

¥Add Quasar BEX Mode

为了构建 BEX,我们首先需要将 BEX 模式添加到我们的 Quasar 项目中:

¥In order to build a BEX, we first need to add the BEX mode to our Quasar project:

$ quasar mode add bex

如果你想直接开始开发,可以跳过 “quasar 模式” 命令并执行:

¥If you want to jump right in and start developing, you can skip the “quasar mode” command and issue:

$ quasar dev -m bex -T [chrome|firefox]

如果缺少 BEX 模式,这将通过在你的项目中创建 /src-bex 文件夹来自动添加它。

¥This will add BEX mode automatically, if it is missing, by creating the /src-bex folder into your project.

提示

src-bex 文件夹只是一个标准的浏览器扩展文件夹,因此你可以像使用其他浏览器扩展项目文件夹一样使用它。请参阅支持的浏览器扩展文档了解更多信息。

¥The src-bex folder is just a standard browser extension folder so you are free to use it as you would any other browser extension project folder. Please refer to supported Browser Extension documentation to learn more.

剖析 “/src-bex”(The Anatomy of “/src-bex”)

¥The Anatomy of “/src-bex”

新文件夹的结构如下:

¥The new folder has the following structure:

content.css
# CSS file which is auto injected into the consuming webpage via the manifest.json
icon-128x128.png
# Icon file at 128px x 128px
icon-16x16.png
# Icon file at 16px x 16px
icon-48x48.png
# Icon file at 48px x 48px
_locales/
# Optional BEX locales files that you might define in manifest
manifest.json
# The browser extension manifest file
background.js
# (or .ts) Standard background script BEX file (auto injected via manifest.json)
my-content-script.js
# (or .ts) Standard content script BEX file - auto injected via manifest.json (you can have multiple content scripts)

下一节将更详细地讨论这些。

¥The next section will discuss these in more detail.