提供 UI 组件

本指南适用于您想要创建一个新的 UI 组件并通过应用扩展提供它，该扩展将将其注入到宿主应用程序中。

提示

为了创建应用扩展项目文件夹，请先阅读开发指南 > 简介。

完整示例

要查看我们将构建内容的示例，请访问MyComponent完整示例，这是一个包含此应用扩展的 GitHub 仓库。

创建文件夹结构以使您的代码模块化和组织化。例如，对于 UI 组件，请创建如下所示的结构

package.json

src/

boot/

# 用于包含启动代码的文件夹

# 组件的启动文件

component/

# 用于包含组件的文件夹

MyComponent.vue

# 组件文件（可以是 .vue 甚至 .js）

MyComponent.sass

# 组件的 Sass 文件（或 .scss/.css，或任何您需要的文件）

index.js

# 在索引 API 中描述

现在，您需要处理注册您的组件。您可以使用/index.js文件（在索引 API中描述）来完成此操作，该文件在您设置新的应用扩展时创建。

让我们分解一下。

export default function (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')

  if (api.hasVite === true) {
    api.compatibleWith('@quasar/app-vite', '^2.0.0-beta.1')
  }
  else { // api.hasWebpack === true
    api.compatibleWith('@quasar/app-webpack', '^4.0.0-beta.1')
  }

  // 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 版本是正确的。

提示

您不仅可以执行api.compatibleWith()以针对 Quasar 包进行检查，还可以针对任何其他可用包（您不会通过您的应用扩展自行提供）进行检查。请阅读应用扩展开发指南 > 简介页面中的处理包依赖项部分以获取更多信息。

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

function extendConf (conf, api) {
  // make sure my-component boot file is registered
  conf.boot.push('~quasar-app-extension-my-component/src/boot/register-my-component.js')

  // @quasar/app-vite does not need this
  if (api.hasVite !== true) {
    // make sure boot & component files get transpiled
    conf.build.transpileDependencies.push(/quasar-app-extension-my-component[\\/]src/)
  }

  // make sure my-component css goes through webpack to avoid ssr issues
  conf.css.push('~quasar-app-extension-my-component/src/component/MyComponent.sass')
}

最后，让我们看看启动文件是什么样的。请确保您阅读了@quasar/app-vite 启动文件 / @quasar/app-webpack 启动文件文档，并首先了解启动文件是什么。

import MyComponent from '../component/MyComponent.vue'

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

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