提供一个UI组件 | Quasar Framework 中文网

提供一个UI组件

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

TIP

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

完整例子

要查看我们将构建的示例，请转到MyComponent完整示例, 它是此应用程序扩展的一个Github存储库。

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

.
├── package.json
└── src
    ├── boot                         # 包含“boot”代码的文件夹
    │   └── register-my-component.js # 组件的启动文件
    ├── component                    # 包含组件的文件夹
    │   ├── MyComponent.vue          # 组件文件（可以是.vue甚至是.js）
    │   └── MyComponent.sass         # 组件的sass文件（或.scss/.css或您需要的任何文件）
    └── index.js                     # 在索引API中描述

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

让我们分解一下。

// file: /index.js
module.exports = 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.js，
  // 因此我们可以添加一个启动文件来注册我们的新UI组件； 
  // “extendConf”将在下面定义（请继续阅读教程）
  api.extendQuasarConf(extendConf)
}

第一组与Quasar进行兼容性检查（这是可选的，但建议这样做）。如果您的组件使用的Quasar功能在某个版本之后可用，则可以确保安装的Quasar版本是正确的。

TIP

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

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

// file: /index.js
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 css通过webpack以避免ssr问题
  conf.css.push('~quasar-app-extension-my-component/src/component/MyComponent.sass')
}

最后，让我们看看启动文件会是什么样子。确保你先阅读@quasar/app-vitey启动文件/@quasar/app-webpack启动文件文档，了解什么是启动文件。

// 文件: /src/boot/register-my-component.js
import MyComponent from '../component/MyComponent.vue'

// 我们使用Vue全局注册了我们的组件
export default ({ app }) => {
  app.component('my-component', MyComponent)
}