nuxt3项目使用dayjs

1.下载dayjs依赖

npm i dayjs

2.composables目录下创建dayjs.ts

3.dayjs.ts文件中引入dayjs

import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import relativeTime from "dayjs/plugin/relativeTime";
dayjs.extend(relativeTime);
dayjs.locale("zh-cn"); // 使用本地化语言

export default {
  $dayjs: dayjs,
};

4.使用dayjs方法

 <p class="time">
    {{ dayjs.$dayjs('2023-9-25 10:28:29').format('YYYY-MM-DD') }}
 </p>

网页上显示。日期格式化使用成功

5.对dayjs方法进行一些简单的封装

const timeFromNow = (time: any) => {
  if (!time) {
    time = new Date();
  }
  let nowtimes = new Date().getTime();
  let times = new Date(time).getTime();
  if (times <= nowtimes - 7 * 24 * 60 * 60 * 1000) {
    return dayjs(time).format("MM-DD");
  } else if (nowtimes - times < 60 * 1000) {
    return Math.floor((nowtimes - times) / 1000) + "秒前";
  } else {
    return dayjs(time).fromNow().replace(" ", "");
  }
};

export default {
  $dayjs: dayjs,
  $timeFromNow: timeFromNow,
};

<p class="time">
   {{ dayjs.$timeFromNow('2023-9-25 10:28:29') }}
</p>

将日期显示为几分钟、几小时，几天前等形式。

希望能够帮助到大家。