Proyecto Vue3 Ant-Design-Vue Sinicization (un selector de fechas y otros componentes)

prefacio

Ant-Design-VueAlgunos componentes de la biblioteca de componentes se muestran en inglés de forma predeterminada, como la selección de tiempo y otros componentes. La visualización de estos componentes requiere una localización manual por parte del usuario.

Los documentos oficiales también brindan explicaciones y ejemplos, pero a partir de la fecha de publicación de este blog, existe una ligera discrepancia entre los ejemplos y la configuración real del proyecto. También pisé algunos escollos por esto, así que se me ocurrió la idea de escribir este blog, compartir esta experiencia y tratar de evitar que otras personas pisen los mismos escollos que yo.

Método de operación

1. Descripción y ejemplos del sitio web oficial

Primero mire las instrucciones y ejemplos dados en el sitio web oficial.

<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>

Las instrucciones dadas en el sitio web oficial son generalmente correctas, pero hay algunos puntos que necesitan atención en los detalles.El siguiente es el proceso de configuración en funcionamiento real.

2. Soluciones

Ant-DesignA partir de la versión V3, la biblioteca dayjsse reemplaza por defecto momentjs.

Originalmente, planeé usar para momentjsresolver el problema del tiempo de sinización, pero dado que el sitio web oficial decía usar dayjsla biblioteca de forma predeterminada, también usaré esta biblioteca.

Instalar y usar dayjsla biblioteca.

npm install dayjs --save

Una vez completada la instalación, main.tsagregue la siguiente configuración al archivo.

principal.ts

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

Luego App.vueagregue la siguiente configuración en , para facilitar la navegación, el siguiente es el contenido completo de App.vue.

aplicación.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>

De esta manera, la configuración se ha completado, veamos el efecto a continuación.

Se puede ver que la sinización ha sido exitosa, hasta ahora la configuración de sinización con diseño de hormiga es exitosa.

FIN