应用扩展开发

文档的这一部分介绍如何创建自己的应用程序扩展。

假设您已经安装了一个官方应用程序扩展。当您开始构建自己的应用程序扩展时，拥有这种经验将是非常有价值的。如果您遇到问题，请访问我们的不和服务器的频道 #app-extensions.

Getting started

应用程序扩展是一个 npm 包，有两个官方的应用程序扩展包:

1. App Extension (AE) kit
2. UI kit

App Extension (AE) kit

如果您的应用程序扩展名不涉及 UI（即没有组件或指令），请使用 AE 套件。一个例子是一个仅创建引导文件的扩展程序。

UI kit

如果您的应用扩展涉及到了 UI （例如带有组件或指令），那么就选择 UI 套件。这类扩展通常会为您的应用提供一个 UI 组件，它有一个 ui 文件夹，您可以再此提供您的组件/指令，一个 ui/dev 文件夹，这里是一个 Quasar 应用，用于测试您的组件或指令，一个 app-extension 文件夹，您可以在此通过类星体 CLI 将组件/指令注入到类星体应用程序中。也可以使用 UI 套件，以便您的组件/指令也可以与 Quasar Vite 插件或 Vue CLI 或 UMD 一起使用。

第三方集成

如果您的目标是将第三方库安装到VUE中，则取决于库…

• 如果您还打算提供一些使用 Vue 插件的 UI 组件，那么您应该使用 UI Kit。这对于包含诸如 Calendar 扩展之类的东西来说是一个很好的选择。
• 如果唯一的目标是通过引导文件中的一个简单 app.use(SomeVuePlugin) 加载它，或者一些配置更新之类的，那么 AE Kit 可能是更好的选择。例如集成 Axios 时这是一个很好的选择。

创建应用扩展

<<| bash Yarn |>>
$ yarn create quasar
# 然后选择 AppExtension 选项
<<| bash NPM |>>
$ npm init quasar
# 然后选择 AppExtension 选项
<<| bash PNPM |>>
# 实验性支持
$ pnpm create quasar
# 然后选择 AppExtension 选项
<<| bash Bun |>>
# 实验性支持
$ bun create quasar
# 然后选择 AppExtension 选项

它会提示你你的具体需求。你需要一个安装脚本，一个卸载脚本，你会提示用户一些问题吗？只选择你将要使用的东西。如果您另有决定，可以在以后手动添加这些。

假设我们用 my-ext 回答了应用程序扩展 ext-id 问题(关于上面的提示)。请记住，应用程序扩展源文件夹的文件夹名称可能与实际的 ext-id 不同。最后，我们将发布新的 npm 包(quasar-app-extension-my-ext)。

Quasar CLI 将为您的应用程序扩展的源代码创建一个文件夹，该文件夹将具有以下结构:

app-extension kit:

ui kit:

除了 src/index.js （应用扩展套件）或 app-extension/src/index.js（ui 套件）之外，所有其他文件都是可选的。您可以在任何时间点手动添加或删除它们。

当使用 UI 套件时，您会有两个 npm 包；一个是应用扩展模块，一个是 UI 模块。您可以在 ui 目录中运行 yarn dev 命令来启动 dev 目录下的应用进行测试。在 dev 目录中添加页面会被自动注入到测试应用中。更多命令参考 package.json 文件中的 scripts 部分。当你运行 yarn build 命令时，会在 dist 构建出各种格式的产物（common, esm, and umd）。

引用扩展脚本描述

处理依赖

如果您的扩展需要依赖才能运行（Quasar 依赖除外，如 “quasar”, “@quasar/extras”, “@quasar/app”），您需要在 /install.js 和 /index.js 文件中使用 “api.compatibleWith()”，这样，您扩展中安装的依赖也会应用到宿主应用中。参考 Install API 和 Index API

示例：您正在创建一个依赖于 “mytable” npm 包的 UI 组件（名称是伪造的，只是为了在这里表明一点），然后您应该在 AppExtension 文件夹中安装 yarn/npm install mytable。

手动测试

我们需要创建一个 Quasar 项目，以便在开发扩展时进行测试：

$ yarn create quasar
# or
$ npm init quasar

# 选择 "App with Quasar CLI"

Install 和 prompts (安装和提示脚本)

在测试 Quasar 项目中，我们手动添加我们的应用程序扩展。请注意，我们并没有指定 npm 包的名称（它还没有发布！），而是指定我们开发它的应用程序扩展文件夹的路径，因为我们想测试未发布的工作：

$ yarn add --dev file://path/to/our/app/ext/app-extension
# 或
$ yarn add --dev link://path/to/our/app/ext/app-extension
# 或
$ npm add --save-dev file://path/to/our/app/ext/app-extension

您需要弄清楚哪个命令最适合您的环境。

然后我们调用它。调用过程假设应用扩展的包已经被安装了（我们之前已经安装了），并跳过该步骤：

# 假设我们的 <ext-id> 是 "my-ext"
$ quasar ext invoke my-ext

这将触发我们新的应用程序扩展的安装。每次进行更改并测试时，都需要重做这两个步骤。

此外，如果您希望在开发应用程序扩展时在测试应用程序中具有HMR（热模块重新加载）功能，那么您的 quasar.config file > devServer > watchFiles 需要如下修改：

// quasar.config file for
// Quasar CLI with Webpack (@quasar/app-webpack)

devServer: {
  // be sure to change <myextid> below to
  // your App Extension name:
  watchFiles: [
    '/node_modules/quasar-app-extension-<myextid>/*'
  ]
}

@quasar/app-webpack

如果您想要扩展 Webpack 配置，假设您在使用 chainWebpack，那么您的 quasar.config file > build > chainWebpack 应该像这样：

chainWebpack (chain) {
  chain.merge({
    snapshot: {
      managedPaths: []
    }
  })
},

@quasar/app-vite

如果您想要扩展 Vite 配置，假设您在使用 extendViteConf ，那么您的 quasar.config file > build > extendViteConf 应该像这样：

extendViteConf (viteConf, { isClient, isServer }) {
  // 使用 viteConf 进行适当的操作
},

Uninstall Script（卸载脚本）

假设您已经按照上面的部分安装了应用程序扩展，我们现在可以测试卸载脚本：

$ quasar ext uninvoke my-ext

上面的命令不会修改或从 package.json 和 node_modules 中删除 npm 包。它只需调用卸载脚本，并将其从测试 Quasar 应用程序项目文件夹中的已注册/已安装的应用程序扩展列表中删除。然而，您的最终用户会调用 $ quasar ext remove my-ext 来卸载它，这也会卸载 npm 包。

每次更改卸载脚本并要对其进行测试时，您都需要重做这些安装步骤并发出 uninvoke 命令。

Index Script（初始化脚本）

在上面的部分中，我们描述了如何测试提示、安装和卸载脚本。接下来学习 index script (初始化脚本)，它是应用程序扩展的核心。

在这里，您可以篡改所有 quasar.config 文件配置项，扩展 Webpack 配置，注册quasar CLI 命令，启动开发应用程序所需的外部服务等等。

所以初始化脚本会在每次 $ quasar dev and $ quasar build 时被调用

为了测试初始化脚本，每次更改应用程序扩展脚本代码时，都可以重复上述卸载和安装过程。但它变得非常乏味。如果您在使用 Unix 操作系统（MacOS、Linux）进行开发，您可以利用 yarn link 命令，该命令可以创建一个从 Quasar 测试应用程序的 node_modules 文件夹到扩展文件夹的符号链接：

$ cd /path/to/app/extension/folder

# 在 yarn 注册扩展
$ yarn link

$ cd /path/to/quasar/testing/app/folder

$ yarn link quasar-app-extension-<ext-id>
# 在我们的示例中，他是:
# $ yarn link quasar-app-extension-my-ext

请记住，如果您需要在您的应用程序扩展中安装 yarn/npm install 任何依赖项，则还必须卸载应用程序扩展并在测试应用程序中重新安装：

$ cd /path/to/app/extension/folder

# 运行 yarn/npm 命令 (install/uninstall, 等)

# 然后

$ cd /path/to/quasar/testing/app/folder

# 卸载应用扩展
$ quasar ext uninvoke my-ext

# 重新安装
$ quasar ext invoke my-ext

实际上您只需要运行 quasar ext invoke my-ext 可重新安装它。以上信息是为了完整。

发布

当您完成应用程序扩展并准备部署它时，您所需要做的就是将其发布到 npm 存储库。

在您的应用扩展目录运行 yarn publish 或 npm publish。