在 Vuejs 中包含和使用 moment 的正确步骤是什么？答案

【问题标题】：在 Vuejs 中包含和使用 moment 的正确步骤是什么？
【发布时间】：2022-01-23 02:27:54
【问题描述】：

我正在尝试在我的 Vuejs 应用程序中调用 moment()，我尝试像这样声明它：

methods: {
  moment: function () {
    return moment();
  }
},

并尝试像这样测试它：

beforeMount() {
    console.log(moment().format('MMMM Do YYYY, h:mm:ss a'))
},

我一直得到

[Vue 警告]：beforeMount 钩子中的错误：“ReferenceError: moment is not defined”

我需要在我的 package.json 中添加片刻并运行 yarn install 吗？

我想让它尽可能轻，因为我只需要访问 moment() 应用程序的一页，我宁愿不在所有页面上加载它们。

请多多指教

【问题讨论】：

好吧，如果你只在一个页面上使用一个库，你可能根本不需要使用它。你应该在组件定义之前导入moment。

标签： javascript vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

首先您应该使用以下命令进行安装：

npm i moment --save

然后在您的组件中导入它并像这样使用它：


import moment from 'moment/moment';

export default{

...
beforeMount() {
    console.log(moment().format('MMMM Do YYYY, h:mm:ss a'))
}

}

【讨论】：

【解决方案2】：

由于 moment 是一个 deprecated lib（由于可变性）在大小方面也是一个巨大的库，因此建议使用其他现代库 sush dayjs，它只是一个 2kB 快速库提供与 moment 相同的功能

你可以安装它

npm install dayjs --save

然后在你的项目中（使用特定的插件天数js来显示你的特定格式Do）

import advancedFormat from 'dayjs/plugin/advancedFormat';

export default{

...
beforeMount() {
    dayjs.extend(advancedFormat) // use plugin
    console.log(dayjs().format('MMMM Do YYYY, h:mm:ss a'))
}

查看纯 js 中的示例片段：

dayjs.extend(dayjs_plugin_advancedFormat);

console.log(dayjs().format('MMMM Do YYYY, h:mm:ss a') );

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.7/dayjs.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.7/plugin/advancedFormat.min.js"></script>

【讨论】：