vue 国际化时间格式

在Vue中实现国际化时间格式通常可以使用一些库来简化操作，其中最常用的是`moment.js`和`dayjs`。这两个库都提供了丰富的API来处理和格式化日期和时间。以下是使用`dayjs`和`vue-i18n`实现国际化时间格式的步骤：

1. **安装依赖**：
首先，你需要安装`dayjs`和`vue-i18n`：

   npm install dayjs vue-i18n

2. **配置`vue-i18n`**：
在你的项目中创建一个`i18n.js`文件来配置国际化：

   import Vue from 'vue';
   import VueI18n from 'vue-i18n';
   import dayjs from 'dayjs';
   import 'dayjs/locale/zh-cn';
   import 'dayjs/locale/en';

   Vue.use(VueI18n);

   const messages = {
     en: {
       message: {
         hello: 'hello world',
         date: 'MMMM D, YYYY'
       }
     },
     zh: {
       message: {
         hello: '你好，世界',
         date: 'YYYY年M月D日'
       }
     }
   };

   const i18n = new VueI18n({
     locale: 'zh', // 设置默认语言
     messages
   });

   export default i18n;

3. **在Vue组件中使用**：
在你的Vue组件中使用`dayjs`和`vue-i18n`来格式化日期：

   <template>
     <div>
       <p>{{ $t('message.hello') }}</p>
       <p>{{ formattedDate }}</p>
     </div>
   </template>

   <script>
   import dayjs from 'dayjs';
   import i18n from '@/i18n';

   export default {
     data() {
       return {
         date: new Date()
       };
     },
     computed: {
       formattedDate() {
         return dayjs(this.date).locale(i18n.locale).format(i18n.messages[i18n.locale].message.date);
       }
     }
   };
   </script>

通过以上步骤，你就可以在Vue项目中实现国际化的时间格式了。