1.需要用到 dayjs 包

下载dayjs到工程中      yarn add dayjs

2.之后也可能用到,所以封装一个工具里,在utils文件下创建data.js文件

import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime' // 到指定时间需要的插件
import 'dayjs/locale/zh' // 集成中文
 
/**
 * .....多久之前
 * @param {*} 之前的时间
 * @returns 系统时间到之前指定时间的距离值
 */
export const timeAgo = (targetTime) => {
  // 格式化时间
  dayjs.extend(relativeTime)
  dayjs.locale('zh')
  var a = dayjs()
  var b = dayjs(targetTime)
  return a.to(b) // 返回多久之前...
}

3.在页面上使用

import { timeAgo } from '@/utils/date'
 
export default {
  // 核心代码
  methods: {
    timeAgo: timeAgo
  },
  async created () {
    const res = await articlesListAPI({
      channelId: 0 // 默认推荐频道(id为0)
    })
 
    // 回来的数据进行预处理, 把时间转成多久多久之前
    res.data.data.results.forEach((obj) => {
      obj.pubdate = this.timeAgo(obj.pubdate)
    })
 
    this.articleList = res.data.data.results
  }
}

4.具体代码还是要结合自身数据列表使用,仅供参考

5.www.cnblogs.com/wtsx-2019/p…

6.www.cnblogs.com/codestarer/…