为 Vue v3 导入 Vue-luxon - this.$luxon 不是函数错误

Question

我\xc2\xb4已经尝试了我能想到的一切让 vue-luxon 在我的 Laravel 8 / Vue 3 应用程序上运行，但失败了。I\xc2\xb4ve 根据文档遵循了以下步骤：

\n

npm install vue-luxon;\n

\n

文档没有\xc2\xb4t说在哪里，但我把这句话放在我的app.js文件中：

\n

import VueLuxon from "vue-luxon";\n

\n

据我了解，这一行必须更改为 App.use(VueLuxon) 并且也放置在 app.js 中：

\n

Vue.use(VueLuxon);  \n

\n

而且（根据文档），\xc2\xb4s 它......我应该能够调用：

\n

this.$luxon("2020-10-05T14:48:00.000Z")\n

\n

显示格式化的日期，但我不断在控制台上收到此错误：

\n

\n

未捕获的类型错误：this.$luxon 不是函数

\n

\n

这里\xc2\xb4s是我的resources/js/app.js文件的内容：

\n

import { createApp } from 'vue';\nimport App from './components/App.vue'\nimport VueLuxon from "vue-luxon";\n\ncreateApp({\n    components: {\n        App,\n    }\n}).mount("#app")\n\nApp.use(VueLuxon)\n

\n

以及我的 js/components/App.vue 文件的内容：

\n

<template>\n<div class="flex flex--column flex--align-center flex--justify-center">\n    <div class="logos">\n        <img src="../../static/img/laravel.png" width="240" alt="" />\n        <img src="../../static/img/vue.png" width="240" alt="" />\n    </div>\n\n    <div class="title">\n        <h1 class="vue">Vue 3</h1>\n        <h1 class="plus">+</h1>\n        <h1 class="laravel">Laravel 8</h1>\n    </div>\n\n    {{ this.$luxon("2020-10-05T14:48:00.000Z") }}\n\n</div>\n</template>\n\n<script>\n// import VueLuxon from "vue-luxon"; // I\xc2\xb4ve tried importing luxon here... doesn't work either.\n\nexport default {\n    mounted() {\n        console.log("Component mounted.");\n    },\n};\n</script>\n

\n

我\xc2\xb4ve尝试将导入直接放置在组件上、注册为应用程序组件或任何可能的组合，但结果相同。我\xc2\xb4m 肯定缺少一些东西，所以任何帮助将不胜感激。

\n

谢谢！

\n

Answer 1

您可以在 vue 3 中使用 globalProperties：

在你的 main.js 中

const { DateTime } = require("luxon");
app.config.globalProperties.$luxonDateTime = DateTime;

然后在你的模板中：

<template>
{{ $luxonDateTime.fromISO("2020-10-05T14:48:00.000Z").toRelative() }}
</template>

您将得到“6 个月前”