推荐两个第三方库:
- Moment.js
- Day.js
两者都是专门用于处理时间的 JavaScript 库,功能差不多,因为 Day.js 的设计就是参考的 Moment.js。但是 Day.js 相比 Moment.js 的包体积要更小一些,因为它采用了插件化的处理方式。
Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样,如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js 。
Day.js 可以运行在浏览器和 Node.js 中。
🕒 和 Moment.js 相同的 API 和用法
💪 不可变数据 (Immutable)
🔥 支持链式操作 (Chainable)
🌐 国际化 I18n
📦 仅 2kb 大小的微型库
👫 全浏览器兼容
下面是具体的操作流程。
Dayjs官方文档
安装 dayjs:
npm install dayjs --save
创建封装 utils/dayjs.js:
import Vue from 'vue'
import dayjs from 'dayjs'// 加载中文语言包
import 'dayjs/locale/zh-cn'import relativeTime from 'dayjs/plugin/relativeTime'// 配置使用处理相对时间的插件
dayjs.extend(relativeTime)// 配置使用中文语言包
dayjs.locale('zh-cn')// 全局过滤器:处理相对时间
Vue.filter('relativeTime', value => {return dayjs().from(dayjs(value))
})
在 main.js 中加载初始化:
import './utils/dayjs'
使用过滤器:
<span>{{ article.pubdate | relativeTime }}</span>