提供 UI 元素 | Quasar Framework

提供 UI 元素

本指南适用于您想创建一个新的 UI 组件并通过 App Extension 提供给宿主应用的场景，App Extension 会将组件注入到宿主应用中。

完整示例

要查看我们将要构建的完整示例，请前往 MyComponent 完整示例，这是一个包含此 App Extension 的 GitHub 仓库。

/ae/

# Your App Extension

src/

runtime/

# UI elements

boot.register.js

# (or .ts) boot file for injecting component

MyComponent.vue

# (or .js or .ts) the component file

index.js

# (or .ts) Described in Index API

/playground/

# Testing/Development app (a @quasar/app-vite project)

src/

pages/

index/

test1.vue

# Example of page using the component

您需要处理组件的注册。通过创建 App Extension 时生成的 /index.js 文件（详见 Index API）来完成。

让我们逐步分解。

import { defineIndexScript } from '@quasar/app-vite'

export default defineIndexScript(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')
  api.compatibleWith('@quasar/app-vite', '^3.0.0-beta.15')

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

第一组代码进行了与 Quasar 的兼容性检查（可选但推荐）。如果您的组件使用了 Quasar 某个版本之后才有的特性，您可以确保安装的 Quasar 版本是正确的。

TIP

您不仅可以使用 api.compatibleWith() 来检查 Quasar 包的兼容性，还可以检查任何其他可用的包（不是由您的 App Extension 自身提供的）。请阅读 App Extension 开发指南 > 介绍页面中的处理包依赖章节了解更多信息。

第二组代码告诉 Quasar 在 extendQuasarConf CLI 生命周期钩子被调用时执行我们的自定义函数。它看起来像这样：

function extendConf(conf, api) {
  return {
    // make sure my-ext boot file is registered
    boot: ['~quasar-app-extension-my-ext/src/runtime/boot.register.js']
  }
}

// Alternatively, directly touch the "conf" param
function extendConf(conf, api) {
  conf.boot.push('~quasar-app-extension-my-ext/src/runtime/boot.register.js')
}

最后，让我们看看 boot 文件的样子。请确保您已阅读 @quasar/app-vite Boot 文件文档并理解什么是 Boot 文件。

import { defineBoot } from '@quasar/app-vite'
import MyComponent from './MyComponent.vue'

// we globally register our component with Vue
export default defineBoot(({ app }) => {
  app.component('my-component', MyComponent)
})

WARNING

您可能习惯从 #q-app 导入 defineX() 函数。在编写 App Extension 时，请改为从 @quasar/app-vite 导入。这不是错误，如果您需要 IDE 自动补全或 TypeScript 支持，这是必须的。

发现错误？在浏览器中编辑此页