Ant DatePicker 组件将月份星期改为中文

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第14天，点击查看活动详情。

前言

这几天测试那边提出了一个Bug，界面上所有日期相关的功能，月份跟星期都是英文显示的，要求更改为中文。

一开始，去官网看解决方法：antdv.com/components/…

单个组件

<template>
  <a-date-picker v-model:value="value" :locale="locale" />
</template>
<script>
  import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
  import { defineComponent } from 'vue';
  export default defineComponent({
    setup() {
      return {
        locale,
        value: null,
      };
    },
  });
</script>

全局

<template>
  <a-config-provider :locale="locale">
    <a-date-picker v-model:value="value" />
  </a-config-provider>
</template>
<script>
  // 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale
  import dayjs from 'dayjs';
  import 'dayjs/locale/zh-cn';
  import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
  import { defineComponent } from 'vue';
  dayjs.locale('zh-cn');
  export default defineComponent({
    setup() {
      return {
        value: dayjs('2015-01-01', 'YYYY-MM-DD')
        dayjs,
        locale
      };
    },
  });
</script>

位置	图片
引入部分
属性绑定
最终效果

上面这两种方法尝试了，都不生效，配置完成了还是老样子，这就难受了，然后就网上各种找资料了，很多地方发的都是官网提供的案例，用不了。

后面看到了Ant在github上别人提的Issues，翻了一下楼，看到了里面有一张图片

发现其中引用的zh_CN路径与上面的方式不一致，于是拿过来修改了一下，看看效果怎么样。

竟然可以了！！！

然后跑去看了下别的页面，发现别的页面也被同时改好了！我明明只是在一个页面引入，为什么其它页面也被修改了呢？？？

带着这个问题，我把引入的部分分别注释掉，测试了引入部分的效果，最终发现，实际上生效的是moment这部分，当我把这部分注释掉的时候，该日期控件还是显示的英文。其它引入的注释掉对效果没有影响，我就直接删掉了。

好了，到这效果就基本实现了，剩下的部分就交给专业的前端了，全局定义那些没搞定，效果一会有一会没得，把我都搞麻了~~~

疑问

有没有前端的大佬，帮忙分析一下，我在App.vue中定义的

<template>
  <a-config-provider :locale="locale">
    <router-view />
  </a-config-provider>
</template>
<script>

也引入了moment，想定义成全局的，为啥就不会生效呢？？？

其它

如果引入moment提示找不到的，需要先npm install

npm install moment -g # 全局安装
npm install moment # 安装