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

Question

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

npm install vue-luxon;

文档没有说明在哪里，但我将这句话放在我的app.js文件中：

import VueLuxon from "vue-luxon";

据我所知，这一行必须更改为App.use(VueLuxon)，并放在app.js中：

Vue.use(VueLuxon);  

(根据医生)，就是这样.我应该可以打电话给：

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

若要显示格式化日期，请在控制台上继续获取此错误：

Uncaught :这个。卢克逊不是一个函数

以下是我的资源/js/app.js文件的内容：

import { createApp } from 'vue';
import App from './components/App.vue'
import VueLuxon from "vue-luxon";

createApp({
    components: {
        App,
    }
}).mount("#app")

App.use(VueLuxon)

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

<template>
<div class="flex flex--column flex--align-center flex--justify-center">
    <div class="logos">
        <img src="../../static/img/laravel.png" width="240" alt="" />
        <img src="../../static/img/vue.png" width="240" alt="" />
    </div>

    <div class="title">
        <h1 class="vue">Vue 3</h1>
        <h1 class="plus">+</h1>
        <h1 class="laravel">Laravel 8</h1>
    </div>

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

</div>
</template>

<script>
// import VueLuxon from "vue-luxon"; // I´ve tried importing luxon here... doesn't work either.

export default {
    mounted() {
        console.log("Component mounted.");
    },
};
</script>

我尝试将导入直接放在组件上，注册为app组件，或者任何可能的组合，结果都是一样的。我肯定错过了什么，所以任何帮助都会很感激的。

谢谢!

Answer 1

首先，你不使用“这个”。在模板中。

根据官方的存储库，这个插件与Vue 3不兼容，只与Vue 2兼容(至少目前是这样)。

来源：https://github.com/casbloem/vue-luxon/issues/21

解决办法：

1. 等待更新。
2. Fork这个存储库(并在后面发出拉请求)。
3. ，因为它使用的是luxon库，所以为它编写自己的包装器。用于处理日期的https://github.com/moment/luxon
4. Find替代方案.

Answer 2

您可以在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个月前”

Answer 3

对于Vue3，您也可以尝试：

import { App } from 'vue';
import {
    DateTime,
    Duration,
    Interval,
    ...
} from 'luxon'

type TLuxon = {
    DateTime: typeof DateTime,
    Duration: typeof Duration,
    Interval: typeof Interval,
    ...
} 

const luxon: TLuxon = {
    DateTime,
    Duration,
    Interval,
    ...
}

export default{
    install:(app: App) => {
        function load(): TLuxon{
            return luxon
        }
        app.config.globalProperties.$lx = load();
    }    
};

declare module "@vue/runtime-core" {
    //Bind to `this` keyword
    interface ComponentCustomProperties {
      $lx: TLuxon;
    }
}

然后在main.ts中：

import luxonLoader from './modules/luxon/luxonLoader'
createApp(App)
    .use(store)
    .use(router)
    .use(luxonLoader)
    .mount('#app')

你可以在任何模板中使用鲁迅：

<template>
  <div class="home">
    {{time}}
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue';

export default defineComponent({
  name: 'HomeView',
  components: {
    HelloWorld,
  },
  computed: {
    time(): string{
      let currentTime = this.$luxeon.DateTime.now().toString()
      return currentTime
    }
  }
});
</script>