本项目是vue3的项目，以vue3为例；
使用toLocaleString方法
年月日：
xxx.toLocaleString('chinese', { year: 'numeric', month: 'long', day: 'numeric' })
当前周：
xxx.toLocaleString('chinese', { weekday: 'short' })
时分秒：
xxx.currentDate.toLocaleString('chinese', { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false })

效果图（实际是动态的）

贴代码

<template>
  <div class="nav-top">
    <div class="nav-center">
      <span>{{ data.currentDate.toLocaleString('chinese', { year: 'numeric', month: 'long', day: 'numeric' }) }}</span>
      <span>{{ data.currentDate.toLocaleString('chinese', { weekday: 'short' }) }}</span>
      <span>{{ data.currentDate.toLocaleString('chinese', { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false }) }}</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, toRefs, onBeforeMount, onMounted, onUnmounted, ref, getCurrentInstance, shallowReactive, computed } from "vue";
import { useRouter, RouteLocationRaw } from "vue-router";
import { useUsersStore } from "@/stores/users";
import { PlusOutlined } from "@ant-design/icons-vue";
import { message, Modal } from "ant-design-vue";
import { load } from "@/components/loading/loading";

const { proxy } = getCurrentInstance() as any;
//注入用户信息模块状态数据
const users = useUsersStore();
interface DataProps {
  currentDate: any
}
const data: DataProps = reactive({
  currentDate: new Date()
});
/*
* 初始化
* 获取动态时间
*/
const updateTime = () => {
  data.currentDate = new Date();
};
onMounted(() => {
  updateTime();
  setInterval(updateTime, 1000);
});
onUnmounted(() => {
  clearInterval(updateTime);
});
</script>
<style scoped lang="less">
</style>