文档的此部分涉及创建自己的应用扩展。

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

入门

应用扩展是npm软件包。 有两个用于创建应用扩展的官方工具包：

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

App Extension (AE) kit

如果你的应用扩展不涉及UI（即不具有组件或指令），那么就使用AE工具包。这方面的一个例子是，一个只创建一个启动文件的扩展。

UI kit

如果你的应用扩展涉及到UI（即有组件或指令），那么请使用UI工具包。这方面的一个例子是，一个提供UI元素的扩展，可以在你的应用程序中使用。这有一个ui文件夹用于创建你的组件/指令，一个ui/devQuasar应用程序用于单独测试你的组件/指令，以及一个app-extension文件夹用于创建应用程序扩展，通过Quasar CLI将你的组件/指令注入Quasar应用程序。UI工具包还可以用来使你的组件/指令也能与Quasar Vite插件或Vue CLI或UMD一起使用。

第三方集成

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

• 如果你还想提供一些使用Vue插件的UI组件之类的东西，你应该使用_UI Kit_。对于包括像日历扩展这样的东西来说，这将是一个不错的选择。
• 如果唯一的目标是通过一个简单的app.use(SomeVuePlugin)在启动文件中加载它，也许还有一些配置更新之类的，_AE Kit_可能是一个更好的选择。例如，对于包括Axios这样的东西来说，这是一个很好的选择。

创建应用扩展

$ yarn create quasar
# 或
$ npm init quasar

# 选择AppExtension选项

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

为了本文档，我们假设我们以my-ext回答了应用扩展“ext-id”问题（对应上述提示）。 请记住，应用扩展源文件夹的文件夹名称可以与实际的my-ext不同。 最后，我们将发布新的npm软件包（quasar-app-extension-my-ext）。

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

# app-extension kit
.
├── package.json
└── src
    ├── index.js      # 在索引API中描述
    ├── install.js    # 在安装API中描述
    ├── prompts.js    # 在提示API中描述
    └── uninstall.js  # 在卸载API中描述

# ui kit
.
├── app-extension
│   ├── package.json
│   └── src
│       ├── index.js           # 在索引API中描述
│       ├── install.js         # 在安装API中描述
│       ├── prompts.js         # 在提示API中描述
│       └── uninstall.js       # 在卸载API中描述
└── ui
    ├── package.json
    ├── build                  # 构建脚本
    ├── dev                    # Quasar应用程序，用于测试组件/指令
    └── src
        ├── components         # （可选）您的组件的文件夹
        │   ├── Component.js   # （可选）您的组件的代码
        │   └── Component.sass # （可选）您的组件的Sass
        ├── directives         # （可选）您的指令的文件夹
        │   ├── Directive.js   # （可选）您的指令的代码
        │   └── Directive.sass # （可选）您的指令的Sass
        ├── mixins             # （可选）mixin源码
        ├── index.js           # 导出和Vue注入
        └── index.sass         # Sass导入

除了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安装到您的应用扩展文件夹中，这会将它们提供给托管应用。

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

手动测试

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

$ yarn create quasar
# 或
$ npm init quasar

# 选择 "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

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

然后我们调用它。 调用过程假定已经安装了应用扩展的软件包（我们之前已经完成了），并且跳过了这一步：

# 我们说我们的<ext-id>将是“my-ext”，因此：
$ quasar ext invoke my-ext

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

此外，如果您希望在开发应用扩展时在测试应用程序中具有HMR（热模块重载）功能，则您的quasar.conf.js > devServer > watchFiles将如下所示：

// quasar.config.js
// 用于使用Webpack的Quasar CLI

devServer: {
  //请确保将下面的<myextid>
  //更改为您的应用程序扩展名：
  watchFiles: [
    '/node_modules/quasar-app-extension-<myextid>/*'
  ]
}

@quasar/app-webpack

您可能需要扩展Webpack配置。假设您正在使用chainWebpack方法，您的quasar.config.js > build > chainWebpack应该如下所示：

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

@quasar/app-vite

您可能需要扩展Vite配置。假设您正在使用extendViteConf 方法，您的quasar.config.js > build > extendViteConf应该如下所示：

extendViteConf (viteConf, { isClient, isServer }) {
  // 用viteConf就地取材
},

卸载脚本

假设您已按照上述部分安装了应用扩展，我们现在可以测试卸载脚本（如果有）：

$ quasar ext uninvoke my-ext

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

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

索引脚本

在以上各节中，我们描述了如何测试提示、安装和卸载脚本。 现在是时候编写索引脚本了，这是您的App Extension的核心。

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

结果是，每次执行$ quasar dev和$ quasar build都会运行索引脚本。

为了测试索引脚本，您每次在应用扩展脚本代码中进行更改时，都可以重复上述卸载和安装过程。 但这变得非常乏味。 如果您在Unix OS（MacOS，Linux）上进行开发，则可以利用yarn link命令来创建符号链接将测试应用程序的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 command (install/uninstall, etc)

# 然后

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

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

# 重新安装应用扩展
$ quasar ext invoke my-ext

您实际上只需要quasar ext invoke my-ext（安装）应用程序扩展来重新安装它。 以上信息仅供参考。

发布

在完成您的App Extension并准备部署它之后，您所需要做的就是将其发布到npm存储库中。

在您的App Extension文件夹中，运行yarn publish或npm publish。 两者都做同样的事情。