如何在 Quasar 中全局注册组件？

Question

我有一个组件，我将在我的网络应用程序的每个页面中使用它。为了简化我的工作，我该如何在全球范围内注册这个组件？我用过一次 nuxt，npm @nuxtjs/global-components 非常简单。 Quasar 的流程是什么？谢谢！

Answer 1

您可以创建一个包含所有全局组件的引导文件，例如global-components.js

您需要导入您的组件并将它们应用到 Vue：

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

Vue.component('my-component', MyComponent)

最后你需要在quasar.conf.js

中调用你的引导文件

boot: ["global-components"]

More info

Answer 2

在类星体 2 中：

import { boot } from 'quasar/wrappers'
import MyComponent from '../components/MyComponent.vue'

export default boot(async ({ app }) => {
  app.component('my-component', MyComponent)
})

Answer 3

我使用这个解决方案，它帮助我们动态注册组件

在 src/boot 文件夹中创建一个文件，例如我创建了 register-my-component.js 并写入此代码：

// src/boot/register-my-component.js
import upperFirst from "lodash/upperFirst";
import camelCase from "lodash/camelCase";

export default ({ app }) => {
  const requireComponent = require.context(
    "src/components",
    true,
    /[A-Z-_]\w+\.(vue)$/
  );

  requireComponent.keys().forEach((fileName) => {
    const componentConfig = requireComponent(fileName);
    const componentName = upperFirst(
      camelCase(
        fileName
          .split("/")
          .pop()
          .replace(/\.\w+$/, "")
      )
    );
    app.component(componentName, componentConfig.default || componentConfig);
  });
};

现在在 quasar.conf.js 中注册这个引导文件。你可以在根目录中找到它

// app boot file (/src/boot)
// --> boot files are part of "main.js"
// https://quasar.dev/quasar-cli/boot-files
boot: [ ..., "register-my-component" ],

现在您不再需要导入和注册组件（注意：正如您所见，只有 src/component 中的组件会自动注册。因此，如果您在其他路径中编写组件，则需要导入和注册那)

如何在 Quasar 中全局注册组件？

How do I register component globally in Quasar?

quasar-framework

quasar