laravel-inertia 中的 vue-moment 问题

Question

我尝试导入 vue-moment 并通过 using.use(VueMoment) 对其进行初始化，如下所示。 但是在我这样做之后，整个应用程序都会显示错误。 有人面临同样的问题吗？

    require('./bootstrap');

// Import modules...
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import VueMoment from 'vue-moment' ////////imported vue-moment

const el = document.getElementById('app');

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({
        methods: {
            route,
            validationError(field){
                if(this.$page.props.errors && this.$page.props.errors[field]){
                    return this.$page.props.errors[field];
                }
                else{
                    return null;
                }
            }
    } })
    .use(InertiaPlugin)
    .use(VueMoment) /////use vue-moment
    .mount(el);

InertiaProgress.init({ color: '#4B5563' });

这是我得到的错误

Answer 1

第一次安装时刻

npm install moment

<template>
{{today}}
</template>
<script>
import   moment from 'moment'
export default {
 name:'Home',
 data(){
  return{
  today:moment().startOf('day').toDate(), moment().endOf('day').toDate() 
}
}
</script>

Answer 2

有一个如何从我的 Laravel + 惯性项目中导入“vue-moment”的工作示例

const vm = new Vue({
  metaInfo: {
    titleTemplate: title => (title ? `${title} - Ping CRM` : 'Ping CRM'),
  },
  store,
  render: h =>
    h(App, {
      props: {
        initialPage: JSON.parse(el.dataset.page),
        resolveComponent: name => import(`@/Pages/${name}`).then(module => module.default),
      },
    }),
}).$mount(el)

Vue.use(require('vue-moment'))

Answer 3

可能会帮助在 Vue 中使用 InertiaJs 并希望在全球范围内声明的人。

在 app.js 中

createInertiaApp({
id: 'app',
setup({ el, App, props}) {
    let app = createApp({
        render: () => {
            return h(App, props);
        },
    });

    //you can declare any other variable you want like this
    app.config.globalProperties.$moment = moment;
    app.use(
        store,
        .....
    ).mount(el);
},
});

现在在 vue 文件中，您可以通过

this.$moment(this.time,'H:m').format('hh:mm a');