本节文档涵盖创建您自己的应用扩展。

假设您已经安装了官方应用扩展之一。当您开始构建自己的应用扩展时，拥有此经验将非常宝贵。如果您遇到问题，请访问我们 Discord 服务器的 #app-extensions 频道。

入门

应用扩展是一个 npm 包。有两种官方工具包用于创建应用扩展

1. 应用扩展 (AE) 工具包
2. UI 工具包

应用扩展 (AE) 工具包

如果您的应用扩展不涉及 UI（即没有组件或指令），则使用 AE 工具包。一个例子是只创建一个引导文件的扩展。

UI 工具包

如果您的应用扩展确实涉及 UI（即确实有组件或指令），则使用 UI 工具包。一个例子是提供一个 UI 元素供您在应用程序中使用的扩展。它有一个 ui 文件夹用于创建您的组件/指令，一个 ui/dev Quasar 应用程序用于隔离测试您的组件/指令，以及一个 app-extension 文件夹用于创建将用于通过 Quasar CLI 将您的组件/指令注入 Quasar 应用程序的应用扩展。UI 工具包也可以用于使您的组件/指令也可以与 Quasar Vite 插件或 Vue CLI 或 UMD 一起使用。

第三方集成

如果您的目标是将第三方库安装到 Vue 中，那么这取决于库…

• 如果您还旨在提供一些 UI 组件，或者使用该 Vue 插件的东西，您应该使用UI 工具包。对于包含日历扩展等内容来说，这将是一个不错的选择。
• 如果唯一目标是通过引导文件中的简单 app.use(SomeVuePlugin) 加载它，也许还有一些配置更新等，那么AE 工具包可能是一个更好的选择。例如，对于包含 Axios 之类的内容来说，这是一个不错的选择。

创建应用扩展

$ yarn create quasar
# then pick the AppExtension option

它将根据您的特定需求提示您。您是否需要安装脚本、卸载脚本，您是否会提示用户一些问题？只选择您将使用的内容。如果您决定使用其他内容，可以稍后手动添加它们。

为了便于本文档页面的说明，假设我们对应用扩展 ext-id 问题（关于上面的提示）使用 my-ext 进行了回答。请记住，应用扩展源代码文件夹的文件夹名称可能与实际的 ext-id 不同。最后，我们将发布我们的新 npm 包 (quasar-app-extension-my-ext)。

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

应用扩展工具包

UI 工具包

除了 src/index.js（来自 app-extension 工具包）或 app-extension/src/index.js（来自 ui 工具包）之外，所有其他文件都是可选的。您可以在任何时候手动添加或删除它们。

使用 UI 工具包时，您将有两个 npm 包；一个是用于应用扩展的，一个是用于 UI 模块的。要使用 dev 应用程序进行测试，请从 ui 文件夹中键入 yarn dev。在 dev 文件夹中创建页面以进行测试，它们将自动注入测试应用程序。此外，请查看 package.json 中的 scripts 部分，以查看可用的内容。当您 yarn build 时，将创建一个 dist 文件夹，并填充各种类型的包（common、esm 和 umd）。

应用扩展脚本描述

处理包依赖项

如果您的应用扩展对其自己的依赖项有一些包，以便它能够运行（除了由 Quasar CLI 提供的包，如“quasar”、“@quasar/extras”、“@quasar/app” - 您应该在您的 /install.js 和 /index.js 脚本中使用“api.compatibleWith()” - 检查 安装 API 和 索引 API），然后将它们用 yarn/npm 安装到您的应用扩展文件夹中，将它们提供到宿主应用程序中。

例如：您正在创建一个 UI 组件，它依赖于“my-table” npm 包（名称是假的，只是为了说明问题），那么您应该在您的应用扩展文件夹中 yarn/npm 安装“my-table”。

手动测试

我们需要创建一个 Quasar 项目文件夹，以便在开发扩展时能够对其进行测试。

$ yarn create quasar
# or
$ npm init quasar

# pick "App with Quasar CLI"

安装和提示脚本

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

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

您需要确定哪个命令最适合您的环境。

然后我们调用它。调用过程假设应用程序扩展的包已经使用 `yarn/npm install` 安装（我们之前已经完成了），并且跳过该步骤。

# we said our <ext-id> will be "my-ext", so:
$ quasar ext invoke my-ext

这将触发我们新应用程序扩展的安装。您需要在每次更改并想要对其进行测试时重新执行这两个步骤。

此外，如果您想在开发应用程序扩展时在测试应用程序中拥有 HMR（热模块替换）功能，那么您的 quasar.config 文件 > 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 文件 > build > chainWebpack 将如下所示

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

@quasar/app-vite

您可能想扩展 Vite 配置。假设您使用的是 extendViteConf 方法，那么您的 quasar.config 文件 > build > extendViteConf 将如下所示

extendViteConf (viteConf, { isClient, isServer }) {
  // do stuff in-place with viteConf
},

卸载脚本

假设您按照上面的部分安装了应用程序扩展，我们现在可以测试卸载脚本（如果您有的话）。

$ quasar ext uninvoke my-ext

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

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

索引脚本

在上面的部分中，我们描述了如何测试提示、安装和卸载脚本。现在是时候介绍索引脚本了，它是应用程序扩展的核心。

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

因此，每次执行 $ quasar dev 和 $ quasar build 时都会运行索引脚本。

为了测试索引脚本，您可以每次更改应用程序扩展脚本代码中的内容时重复上面的卸载和安装过程。但这会变得非常繁琐。如果您在 Unix 操作系统（MacOS、Linux）上开发，您可以利用 yarn link 命令，该命令会从 Quasar 测试应用程序的 `node_modules` 文件夹到您的扩展文件夹创建 符号链接

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

# we register the extension through yarn
$ yarn link

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

$ yarn link quasar-app-extension-<ext-id>
# in our demo case, it's this:
# $ yarn link quasar-app-extension-my-ext

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

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

# run yarn/npm command (install/uninstall, etc)

# then

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

# Uninstall the app ext
$ quasar ext uninvoke my-ext

# Re-install the app ext
$ quasar ext invoke my-ext

您实际上只需要 quasar ext invoke my-ext（安装）应用程序扩展来重新安装它。以上信息是为了完整性。

发布

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

在您的应用程序扩展文件夹中，运行 yarn publish 或 npm publish。两者都做同样的事情。