BEX 准备 | Quasar 框架

Quasar CLI 与 Webpack - @quasar/app-webpack

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 模式，如果缺少，会添加一个 src-bex 文件夹到您的项目中。

提示

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

新文件夹具有以下结构

src-bex/

css/

# 在浏览器上下文中使用的 CSS

content-css.css

# 通过 manifest.json 自动注入到消费网页的 CSS 文件

icons/

# 所有平台应用程序图标

icon-16x16.png

# 16px x 16px 的图标文件

icon-48x48.png

# 48px x 48px 的图标文件

icon-128x128.png

# 128px x 128px 的图标文件

js/

# 在 BEX 上下文中使用的 Javascript 文件。

background.js

# 标准后台脚本 BEX 文件 - 通过 manifest.json 自动注入

background-hooks.js

# 具有 BEX 通信层钩子的后台脚本

content-hooks.js

# 具有 BEX 通信层钩子的内容脚本脚本

content-script.js

# 标准内容脚本 BEX 文件 - 通过 manifest.json 自动注入

dom-hooks.js

# 注入到 DOM 中的 JS 文件，具有 BEX 通信层的钩子

www/

# 已编译的 BEX 源代码 - 从 /src（Quasar 应用程序）编译

manifest.json

# 生产环境的主线程代码

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

1. 简介

2. 添加 Quasar BEX 模式

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