提供一个 UI 组件
这份指南演示如何通过应用扩展提供一个新 UI 组件并注入到宿主应用中。
TIP
为了创建一个 App Extension 项目文件夹，请首先阅读 开发指南 > 介绍。
完整示例
要查看我们将构建的示例，请转到 MyComponent 完整示例，这是一个包含此 App Extension 的 GitHub 仓库。
创建一个文件夹结构以使您的代码模块化和有序。例如，对于一个 UI 组件，创建一个如下所示的结构：
./
package.json
src/
boot/
# folder to contain boot code
register-my-component.js
# 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 文件（在设置新的 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)
}