Vue.js try 在类星应用程序中使用Vue插件(Vue 3 Mq)如何配置

我正在try 为我们配置一个类星JavaScript应用程序一个Vue插件(Vue 3 Mq-用于媒体查询功能).

使用nPM安装Vue3 Mq后，我try 了以下操作，但没有成功:

1. 使用quasar.font.js中的以下代码将Vue3Mq添加为插件:

framework: {
...
    plugins: ['vue3-mq']
},
...

这会生成以下错误-"卸载错误:'-'处出现意外标记"

2. 使用quasar.font.js中的以下代码将Vue3Mq添加为" bootstrap "插件:

module.exports = configure(function (/* ctx */) {
    return {
        boot: ['vue3mq']
}

添加将以下文件(vue3mq.js)添加到apps的"/SRC/Boot"文件夹:

import { boot } from 'quasar/wrappers'
import Vue3Mq from 'vue3-mq'
import Vue from "vue";

Vue.use(Vue3Mq)

export default boot(({ app }) => {
    app.config.globalProperties.$vue3mq = vue3mq
})

这会生成以下错误- bootstrap 错误:类型错误:无法获取动态导入的模块:http://localhost:9000/src/Boot/vue 3 mq

3. 只需导入Vue3 Mq:

<template>
    <div>
        <mq-responsive mq="lg">
            <span>Large</span>
        </mq-responsive>
        <mq-responsive mq="md">
            <span>Med</span>
        </mq-responsive>
        <mq-responsive mq="sm">
            <span>Small</span>
        </mq-responsive>
      </div>
</template>

<script setup>
    import { onMounted, ref } from 'vue'
    import { MqResponsive } from "vue3-mq";
    import { useMq } from "vue3-mq";

    const mq = useMq();

</script>

这将生成以下错误-"Uncatch(promise 中)错误:Vue 3 Mq未安装在此应用程序中.请按照安装说明再试一次"

删除"const mq = useMq()"可以修复该错误，但在任何一种情况下，标签都不会响应屏幕大小的变化-所有三个跨度都被打印.

任何建议都将不胜感激！