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 文件夹。

提示

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

新文件夹具有以下结构

src-bex/

assets/

content.css

# 通过 manifest.json 自动注入到使用网页中的 CSS 文件

background.js

# 标准背景脚本 BEX 文件（通过 manifest.json 自动注入）

dom.js

# 注入到 DOM 中的 JS 文件，并与 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

# 浏览器扩展清单文件

my-content-script.js

# 标准内容脚本 BEX 文件 - 通过 manifest.json 自动注入（你可以有多个脚本）

下一部分将更详细地讨论这些内容。

1. 简介

2. 添加 Quasar BEX 模式

3. 了解“src-bex”的结构