注入 Quasar 插件

本指南适用于你需要确保将 Quasar 插件注入到托管应用中的情况，因为你的应用扩展程序需要依赖它才能正常工作。

¥This guide is for when you want to ensure that a Quasar Plugin will be injected into the hosting app, because you depend on it for your own App Extension to work.

提示

为了创建 App Extension 项目文件夹，请首先阅读开发指南 > 简介。

¥In order for creating an App Extension project folder, please first read the Development Guide > Introduction.

完整示例

要查看我们将要构建的示例，请前往完整示例，这是包含此应用扩展程序的 GitHub 仓库。

¥To see an example of what we will build, head over to full example, which is a GitHub repo with this App Extension.

我们只需要 /index.js 脚本，因为我们可以使用索引 API 从主机应用配置 quasar.config 文件，以包含我们所需的 Quasar 插件。

¥We will only need the /index.js script for this, because we can use the Index API to configure quasar.config file from the host app to include our required Quasar Plugin.

package.json

src/

index.js

# Described in Index API

/index.js 如下所示：

¥And /index.js would look like this:

export default function (api) {
  // (Optional!)
  // Quasar compatibility check; you may need
  // hard dependencies, as in a minimum version of the "quasar"
  // package or a minimum version of Quasar App CLI
  api.compatibleWith('quasar', '^2.0.0')

  if (api.hasVite === true) {
    api.compatibleWith('@quasar/app-vite', '^2.0.0')
  }
  else { // api.hasWebpack === true
    api.compatibleWith('@quasar/app-webpack', '^4.0.0')
  }

  // Here we extend /quasar.config file, so we can add
  // a boot file which registers our new Vue directive;
  // "extendConf" will be defined below (keep reading the tutorial)
  api.extendQuasarConf(extendConf)
}

我们的 “extendConf” 方法，与上述文件位于同一文件中：

¥Our “extendConf” method, in the same file as above:

function extendConf (conf) {
  // we push to /quasar.config file > framework > plugins:
  conf.framework.plugins.push('AppVisibility')
}