Vue3 project Ant-Design-Vue Sinicization (a-date-picker and other components)

foreword

Ant-Design-VueSome components in the component library are displayed in English by default, such as time selection and other components. The display of these components requires manual localization by the user.

The official documents also give explanations and examples, but as of the release date of this blog, there is a slight discrepancy between the examples and the actual project configuration. I also stepped on some pitfalls because of this, so I came up with the idea of ​​writing this blog, sharing this experience, and trying to avoid other people stepping on the same pitfalls as me.

operation method

1. Official website description and examples

First look at the instructions and examples given on the official website.

<template>
  <a-config-provider :locale="locale">
    <App />
  </a-config-provider>
</template>

<script>
  import zhCN from 'ant-design-vue/es/locale/zh_CN';
  import dayjs from 'dayjs';
  import 'dayjs/locale/zh-cn';
  dayjs.locale('zh-cn');

  export default {
      
      
    data() {
      
      
      return {
      
      
        locale: zhCN,
      };
    },
  };
</script>

The instructions given on the official website are generally correct, but there are some points that need attention in the details. The following is the configuration process in actual operation.

2. Solutions

Ant-DesignStarting with version V3, the library dayjsis replaced by default momentjs.

Originally, I planned to use to momentjssolve the problem of Sinicization time, but since the official website said to use dayjsthe library by default, I will also use this library.

Install and use dayjsthe library.

npm install dayjs --save

After the installation is complete, main.tsadd the following configuration to the file.

main.ts

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

Then App.vueadd the following configuration in , for the convenience of browsing, the following is the completed content of App.vue.

app.vue

<script setup lang="ts">
import zhCN from 'ant-design-vue/es/locale/zh_CN';
</script>

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

In this way, the configuration has been completed, let's see the effect next.

It can be seen that the Sinicization has been successful, so far the ant-design Sinicization configuration is successful.

END