我已经尝试了所有我能想到的让 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")
显示格式化的日期,但我在控制台上不断收到此错误:
未捕获的类型错误:this.$luxon 不是函数
这是我的 resources/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>
我尝试将导入直接放在组件上,注册为应用程序组件或任何可能的组合,结果相同。我肯定错过了一些东西,所以任何帮助将不胜感激。
谢谢!