javascript - 访问 Quasar(或 Vue 3)应用名称变量的最佳方式是什么？

Question

我如何在 Quasar 中实现类似的东西？无需重新定义每个组件中的变量:

<template>
    <div>Welcome to {{ APP_NAME }}.</div>
</template>

我的应用程序是使用 Quasar CLI 设置的，它在设置过程中要求输入应用程序名称，所以我想它存储在某个地方作为全局变量或我可以访问的东西。

否则，也许 Vue 3 有办法做到这一点。

Answer 1

Quasar 没有明确使用 main.js 文件。使用 quasar cli 创建项目时，大多数建议的答案都不起作用。使用 quasar.config.js 可能有效，但它仍然不是正确的地方。

由于您使用了 quasar cli，因此您需要使用 quasar new boot 添加一个引导文件。

这将在您的 src/boot 文件夹中生成文件 ezglobals.js:quasar new boot ezglobals

编辑后 ezglobals.js 文件中的代码将如下所示:

import { boot } from 'quasar/wrappers'
export default boot(({ app }) => {
  app.config.globalProperties.$APP_NAME = 'The name of your app';
})

最后在 quasar.config.js 中将 ezglobals.js 添加到启动数组中:

...
boot: [
      'ezglobals.js'
    ]
...