Vue3 如何使用moment

Vue3 是一款流行的前端框架，而 Moment.js 是一款非常强大的日期时间处理库。在 Vue3 中使用 Moment.js 来处理日期时间是非常常见的需求。下面我们就来了解一下在 Vue3 中如何使用 Moment.js。

一、安装 Moment.js

在开始之前，我们首先需要在项目中安装 Moment.js。可以通过以下命令来安装 Moment.js：

npm install moment --save

// 或者使用 yarn
yarn add moment

// 或者使用 pnpm
pnpm install moment

1.1 按需引入

在 Vue3 中，推荐使用 ES6 的 import 语法来引入 Moment.js。在需要使用Moment.js的地方，可以直接使用import导入的moment对象来调用Moment.js的方法。

例如，假设你需要在组件中格式化当前日期并将其显示在模板中，你可以这样做：

import { ref, onMounted } from 'vue';
import moment from 'moment';

export default {
  setup() {
    const formattedDate = ref('');

    onMounted(() => {
      const now = moment();
      formattedDate.value = now.format('YYYY-MM-DD');
    });

    return {
      formattedDate
    };
  }
}
 

1.2 全局配置

在 Vue3 中，可以通过全局配置来配置 Moment.js 的一些默认选项。例如，可以设置 Moment.js 的默认语言为中文：