如何在 vuetify 中设置 moment.js？

Posted 2023-02-23

【中文标题】如何在 vuetify 中设置 moment.js？

【英文标题】：How can I set up moment.js in the vuetify?

【发布时间】：2020-02-11 12:06:27

【问题描述】：

我使用 vuetify ：https://vuetifyjs.com/en/ 我想使用 moment.js。所以我读了这个参考：https://www.npmjs.com/package/vue-moment

我跑过npm install vue-moment

我仍然很困惑把这个脚本Vue.use(require('vue-moment'));

在 vuetify 中有两个文件：main.js 和 index.js

main.js 像这样：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index'
import './registerServiceWorker'
import vuetify from './plugins/vuetify'

Vue.config.productionTip = false

new Vue(
  router,
  store,
  vuetify,
  render: h => h(App)
).$mount('#app')

index.js 像这样：

import Vue from 'vue';
import Vuex from 'vuex';
import dataStore from './modules/data-store';
import createLogger from "vuex/dist/logger";
Vue.use(Vuex);
const debug = process.env.VUE_APP_DEBUG !== "production";
export default new Vuex.Store(
  modules: 
    dataStore
  ,
  strict: debug,
  plugins: debug ? [createLogger()] : []
);

我把Vue.use(require('vue-moment'));放在哪里？

我尝试将它放在main.js中，但是如果我调用我的vue组件，则会出现错误：ReferenceError: moment is not defined

我的 vue 组件是这样的：

<template>
  ...
</template>

<script>
export default 
  mounted() 
    let a = moment("2012-02", "YYYY-MM").daysInMonth();
    console.log(a)
  
;
</script>

【问题讨论】：

如果你只想在你的 vue 组件中使用moment，你可以尝试在export default上方的脚本标签中使用import moment from 'moment或const moment = require('moment')

@TJ Weems 它有效。谢谢。但是我如何在全球范围内实现它？所以没有必要把它放在每个组件上

【参考方案1】：

我在vue-moment npm 页面的底部找到了这个

vue-moment attaches the momentjs instance to your Vue app as 
this.$moment.

This allows you to call the static methods momentjs provides.

所以你应该能够使用你原来的vue-moment 配置并在你的mounted() 方法中这样做

 mounted() 
    let a = this.$moment("2012-02", "YYYY-MM").daysInMonth();
    console.log(a)
 

通知this.$moment

对于vue-moment 的设置，你应该把它放在你的 main.js 文件中

main.js

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

================================================ ============================

全球

如果你想在全局范围内使用 moment 和 Vue，你可以创建一个 Instance Proprety

main.js

import moment from 'moment'

Vue.prototype.moment = moment

然后在您的组件中调用 this.moment 在您的方法或计算属性中。在您的 mounted 部分中，它看起来像这样

 mounted() 
   let a = this.moment("2012-02", "YYYY-MM").daysInMonth();
   console.log(a)
 

组件

如果你只想在组件中使用moment，你可以像这样直接包含

<script>
import moment from 'moment'
export default 
  mounted()
    let a = moment("2012-02", "YYYY-MM").daysInMonth();
    console.log(a)


</script>

【讨论】：

不安装npm install vue-moment，你的脚本可以工作。脚本如何在不安装时刻的情况下工作

好的，谢谢。但是你能不能用第二种方式更新你的答案，即 vue moment。所以稍后在你的回答中有几种方法

@SuccessMan 我帮你改了。

我的意思是：npmjs.com/package/vue-moment。所以它使用vue-moment。也许它会添加import VueMoment from 'vue-moment'

不只是将Vue.use(require('vue-moment')) 放在你的 main.js 文件中。