首页-展示文章列表：处理相对时间: xx年前

推荐两个第三方库： Moment.js Day.js

1、安装

npm i dayjs

2、创建 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().to(dayjs(value))
})
​

3、在 main.js 中加载初始化

import './utils/dayjs'

4、使用 components /article-item index.vue

使用过滤器：

<p>{{ 日期数据 | relativeTime }}</p>
 <span>{{article.pubdate | relativeTime}}</span>