vue3项目使用Ant-Design-Vue组件库全局汉化

一、前言

Ant-Design-Vue 组件库某些组件默认是英文显示的，如时间选择、分页、弹出框等组件。这些组件的显示需要用户手动去进行汉化。官方文档对此也给出了说明及示例，但示例与实际项目配置存在小幅度出入。

二、实现流程

• 前置条件为已安装下载Ant-Design-Vue组件库，官网有详细流程，在此不做演示

1、安装及使用 dayjs 库。

注意： Ant-Design在 V3 版本开始，默认使用 dayjs库替换了 momentjs 库。

npm install dayjs --save

2、安装完成后在 main.js 文件中添加以下配置。

• main.js

import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');

3、在 App.vue 中添加以下配置

• App.vue

<template>
  <a-config-provider :locale="zhCN">
    <router-view />
  </a-config-provider>
</template>
<script setup>
import zhCN from 'ant-design-vue/es/locale/zh_CN';
</script>

进行以上操作后即可实现Ant-Design-Vue组件库全局汉化