生成SPA、移动应用、Electron应用、BEX或SSR之间的区别仅由“quasar dev”和“quasar build”命令中的“mode”参数确定。
TIP
您将需要@quasar/app
v1.7+ 才能运行BEX模式。
1. 添加Quasar BEX模式
为了构建BEX,我们首先需要将BEX模式添加到我们的Quasar项目中:
$ quasar mode add bex
如果您想直接进入并开始开发,则可以跳过“quasar mode”命令并发出:
$ quasar dev -m bex
如果项目未添加src-bex
文件夹,它将自动添加BEX模式。
TIP
src-bex
文件夹只是一个标准的浏览器扩展文件夹,因此您可以像使用任何其他浏览器扩展项目文件夹一样自由使用它。 请参考受支持的浏览器扩展文档以了解更多信息。
- Mozilla FireFox浏览器扩展文档
- Google Chrome浏览器扩展程序文档
- 其他基于Chromium的浏览器 - 请参阅其特定文档。
2. 了解src-bex的结构
新文件夹具有以下结构:
.
└── src-bex/
├── css # CSS to use in the Browser Context
| ├── content-css.css # CSS file which is auto injected into the consuming webpage via the manifest.json
├── icons/ # Icons of your app for all platforms
| ├── icon-16x16.png # Icon file at 16px x 16px
| ├── icon-48x48.png # Icon file at 48px x 48px
| └── icon-128x128.png # Icon file at 128px x 128px
├── js/ # Javascript files used within the context of the BEX.
| ├── background.js # Standard background script BEX file - auto injected via manifest.json
| ├── background-hooks.js # Background script with a hook into the BEX communication layer
| ├── content-hooks.js # Content script script with a hook into the BEX communication layer
| ├── content-script.js # Standard content script BEX file - auto injected via manifest.json
| └── dom-hooks.js # JS file which is injected into the DOM with a hook into the BEX communication layer
└── www/ # Compiled BEX source - compiled from /src (Quasar app)
└── manifest.json # Main thread code for production
下一章节将更详细地讨论这些内容。