First, the project package-lock.json configure moment-timezone
{ "name": "dashboard", "version": "0.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { ....... "moment-timezone": { "version": "0.5.28", "resolved": "http://r.cnpmjs.org/moment-timezone/download/moment-timezone-0.5.28.tgz", "integrity": "sha1-8JPXidCR7XsFXYKqgagkZ/cuQzg=", "requires": { "moment": ">= 2.9.0" } }, ........ } }
Second, the project package.json
{ "name": "dashboard", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.6.4", "element-ui": "^2.13.0", "js-cookie": "^2.2.1", "jwt-decode": "^2.2.0", "moment": "^2.24.0", "moment-timezone": "^0.5.28", "vue": "^2.6.10", "vue-headful": "^2.1.0", "vue-i18n": "^8.15.3", "vue-moment": "^4.1.0", "vue-router": "^3.1.5", "vuex": "^3.1.2" }, ...... }
Third, the main js project inside importing and exporting
import Vue from "vue"; import VueMoment from "vue-moment"; import moment from "moment-timezone"; import "moment/locale/zh-cn"; import ElementUI from "element-ui"; import Headful from "vue-headful"; Vue.use(VueMoment, { moment }); Vue.use (components); Vue.component("head-ful", Headful); export const DATE_FORMAT = "yyyy-MM-dd"; ALL const Export = "All" ; Export TIMESTAMP_FORMAT, const = "YYYY-the MM-DD HH: mm: SS"; // this is specific to the second Export TIMESTAMP_DATE_FORMAT = const "the MM-DD-YYYY"; // this is specific to the day
Fourth, the application of the page
<template> ...... <el-table-column label="更新于" width="110"> <template slot-scope="scope">{{ scope.row.fytjdwgl.updatedAt|moment(TIMESTAMP_FORMAT) }}</template> </el-table-column> ..... </template> <script> import { TIMESTAMP_FORMAT } from "@/components"; export default { data() { return { TIMESTAMP_FORMAT }; }, created(){}, methods:{} }; </script>
Fifth, I want to know more
Vue time format used in the moment, please go here to see the detailed moment