提供一个 UI 组件 | Quasar Framework

提供一个 UI 组件

这份指南演示如何通过应用扩展提供一个新 UI 组件并注入到宿主应用中。

TIP

为了创建一个 App Extension 项目文件夹，请首先阅读开发指南 > 介绍。

完整示例

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

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

现在，您需要处理注册您的组件。您可以通过 /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 文件，以便我们可以添加
  // 一个引导文件，用于注册我们的新 UI 组件；
  // "extendConf" 将在下文中定义（请继续阅读教程）
  api.extendQuasarConf(extendConf);
}

第一步是与 Quasar 的兼容性检查（可选，但建议）相关的。如果您的组件使用了在某个版本之后才可用的 Quasar 功能，您可以确保安装的 Quasar 版本是正确的。

TIP

您不仅可以使用 api.compatibleWith() 来检查与 Quasar 包的兼容性，还可以检查与任何其他可用包（您未通过 App Extension 提供的）的兼容性。请阅读处理包依赖关系页面上的 App Extension 开发指南 > 介绍部分，获取更多信息。

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

function extendConf(conf, api) {
  // 确保 my-component 引导文件已注册
  conf.boot.push("~quasar-app-extension-my-component/src/boot/register-my-component.js");

  // @quasar/app-vite 不需要这个
  if (api.hasVite !== true) {
    // 确保引导和组件文件被转译
    conf.build.transpileDependencies.push(/quasar-app-extension-my-component[\\/]src/);
  }

  // 确保 my-component 样式通过 webpack 处理以避免 ssr 问题
  conf.css.push("~quasar-app-extension-my-component/src/component/MyComponent.sass");
}

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

import MyComponent from "../component/MyComponent.vue";

// 我们在 Vue 中全局注册我们的组件
export default ({ app }) => {
  app.component("my-component", MyComponent);
};

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