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
组件库全局汉化
转载自:https://juejin.cn/post/7262349502920949817