方式一 dayjs库

1.首先在vue项目中安装dayjs

npm install dayjs--save

2. 定义时间格式化全局过滤器，在utils文件夹下创建date-format.ts中编写代码

import dayjs from 'dayjs'

import utc from 'dayjs/plugin/utc'
// 将utc转化dayjs支持的样式
dayjs.extend(utc)

const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'

export function formatUtcString(utcString: string, format: string = DATE_TIME_FORMAT) {
  return dayjs.utc(utcString).format(format)
}

3.在全局定义

import { App } from 'vue'
import { utcToDateTimeFormat } from '@/utils/date-formt'

function registerGlobalProperties(app: App) {
  app.config.globalProperties.$filters = {
    formatTime(value: string) {
      return utcToDateTimeFormat(value)
    }
  }
}
export default registerGlobalProperties

4.使用

  <span>{{ $filters.formatTime(scope.row.createAt) }}</span>

方式二 moment库

1.首先在vue项目中安装moment

npm install moment --save

2. 定义时间格式化全局过滤器，在dateUtil.js中或组件中导入该组件

import moment from 'moment'
dateUtil.js代码：

import moment from "moment";
 
function dateFormat(data) {
 
    return moment(new Date(data).getTime()).format('YYYY-MM-DD HH:mm');;
 
}
 
export {
 
    dateFormat
 
}

3. 使用方法一

3.1在全局中定义时间格式化

// 定义一个全局过滤器实现日期格式化
 
Vue.filter('datefmt', function (input, fmtstring) {
 
  return moment.unix(input).format(fmtstring)
 
})

3.2在main.js中或组件中导入该组件

import moment from 'moment'
这样就可以在我们需要对时间进行格式化的组件中进行使用了，如下：

<div>
 
    <span>{{item.publishdate | datefmt('MM/DD')}}</span>
 
    <span>{{item.publishdate | datefmt('YYYY')}}</span>
 
</div>

这里我有两个span标签，第一个是将时间戳格式为 月/日（11/24） 这样的格式，第二个则是格式化为年份值（如2018这样的）