提供 UI 组件 | Quasar 中文网

提供 UI 组件

本指南适用于你需要创建一个新的 UI 组件并通过应用扩展提供该组件，该扩展会将其注入到托管应用中的情况。

¥This guide is for when you want to create a new UI component and provide it through an App Extension, which will inject it into the hosting app.

提示

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

¥In order for creating an App Extension project folder, please first read the Development Guide > Introduction.

完整示例

要查看我们将要构建的示例，请前往 MyComponent 完整示例，这是包含此应用扩展程序的 GitHub 仓库。

¥To see an example of what we will build, head over to MyComponent full example, which is a GitHub repo with this App Extension.

创建一个文件夹结构，以保持代码模块化和有序性。例如，对于 UI 组件，请创建如下结构：

¥Create a folder structure to keep your code modularized and organized. For instance, for a UI component, create a structure that looks like this:

package.json

src/

boot/

# folder to contain boot code

# boot file for component

component/

# folder to contain component

MyComponent.vue

# component file (can be .vue or even .js)

MyComponent.sass

# sass file for component (or .scss/.css, or whatever you need)

index.js

# Described in Index API

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

¥Now, you need to handle registering your component. You do this with the /index.js file (described in the Index API) that was created when you set up your new App Extension.

让我们分解一下。

¥Let’s break it down.

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')
  }
  else { // api.hasWebpack === true
    api.compatibleWith('@quasar/app-webpack', '^4.0.0')
  }

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

¥The first group does a compatibility check with Quasar (which is optional, but recommended). If your component is using features of Quasar that were available after a certain version, you can make sure that the version of Quasar installed is the correct one.

提示

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

¥Not only can you do a api.compatibleWith() to check against Quasar packages, but with any other available packages (that you do not supply yourself through your App Extension) as well. Please read Handling package dependencies section from the App Extension Development Guide > Introduction page for more information.

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

¥The second group tells Quasar to call our custom function when the extendQuasarConf CLI life-cycle hook is called. It would look something like this:

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 Boot files / @quasar/app-webpack Boot files 文档并了解 Boot 文件的含义。

¥Finally, let’s see how the boot file would look like. Make sure that you read the @quasar/app-vite Boot files / @quasar/app-webpack Boot files documentation and understand what a Boot file is first.

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

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