提供一个指令
这份指南演示如何通过应用扩展提供一个新指令并注入到宿主应用中。
TIP
为了创建一个应用扩展项目文件夹，请首先阅读 开发指南 > 介绍。
完整示例
要查看我们将构建的示例，请转到 MyDirective 完整示例，这是一个包含此 App Extension 的 GitHub 仓库。
创建一个文件夹结构以使您的代码模块化和有序。例如，对于一个指令，创建一个如下所示的结构：
./
package.json
src/
boot/
# folder to contain boot code
register-my-directive.js
# boot file for directive
directive/
# folder to contain directive
MyDirective.js
# directive file
index.js
# Described in Index API
现在，您需要处理注册您的 Vue 指令。您可以通过 /index.js 文件（在设置新的 App Extension 时创建，详见 Index API）来完成这个任务。
让我们来详细看一下。
export default function (api) {
// （可选！）
// Quasar 兼容性检查；您可能需要
// 强硬的依赖，比如 "quasar" 包的最小版本
// 或 Quasar App CLI 的最小版本
api.compatibleWith('quasar', '^2.0.0')
if (api.hasVite === true) {
api.compatibleWith('@quasar/app-vite', '^1.0.0-beta.0')
}
else { // api.hasWebpack === true
api.compatibleWith('@quasar/app-webpack', '^3.0.0')
}
// 在这里我们扩展了 /quasar.config 文件，以便我们可以添加
// 一个引导文件，用于注册我们的新 Vue 指令；
// "extendConf" 将在下文中定义（请继续阅读教程）
api.extendQuasarConf(extendConf)
}
第一组是与 Quasar 的兼容性检查（可选，但建议）相关的。如果您的组件使用了在某个版本之后才可用的 Quasar 功能，您可以确保安装的 Quasar 版本是正确的。
TIP
您不仅可以使用 api.compatibleWith() 来检查与 Quasar 包的兼容性，还可以检查与任何其他可用包（您未通过 App Extension 提供的）的兼容性。请阅读 处理包依赖关系 页面上的 App Extension 开发指南 > 介绍部分，获取更多信息。
第二组告诉 Quasar 在调用 extendQuasarConf CLI 生命周期钩子时调用我们的自定义函数。它可能看起来像这样：
function extendConf (conf, api) {
// 确保 my-directive 引导文件已注册
conf.boot.push('~quasar-app-extension-my-directive/src/boot/register-my-directive.js')
// @quasar/app-vite 不需要这个
if (api.hasVite !== true) {
// 确保引导和其他文件被转译
conf.build.transpileDependencies.push(/quasar-app-extension-my-directive[\\/]src/)
}
}
最后，让我们看看引导文件会是什么样子。确保您阅读 @quasar/app-vite 引导文件 / @quasar/app-webpack 引导文件 文档，并首先了解引导文件是什么。
import MyDirective from '../directive/MyDirective.js'
// 我们在 Vue 中全局注册我们的指令；
// 请记住，在 Vue 中所有指令都将以 'v-' 开头
// 但这不应该是您指令名称的一部分
// https://vuejs.org/guide/custom-directive.html#custom-directives
// 'my-directive' 将被用作 'v-my-directive'
export default ({ app }) => {
app.directive('my-directive', MyDirective)
}