基本使用

本文将介绍VueI18n的基本使用，不包含Vue项目中的使用，此章节后续会更新，本文的项目代码：

1. Getting Started

首先引入 CDN

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-i18n@9"></script>

创建 HTML 基本结构

<div id="app">
    <p>{{ $t('message.hello') }}</p>
</div>

书写JS内容

创建语言之间的翻译

这里的对象与 HTML 中的 {{ $t('message.hello') }} 对应

const messages = {
    en: {
        message: {
            hello: 'hello world'
        }
    },
    zhcn: {
        message: {
            hello: '你好 世界'
        }
    }
}

创建 i18n 对象实例

const i18n = VueI18n.createI18n({
    locale: 'zhen', // 设置本地场景语言
    fallbackLocale: 'en', // 设置本来的语言
    messages: messages, // 配置项，与上文的 messages 对象对应
})

使用 Vue 控制标签

const app = Vue.createApp()
app.use(i18n)
app.mount('#app')

此时页面将展示 你好世界 中文

2. 基本使用

2.1 具名差值

在上面的章节中，我们使用了 {{ $t(‘’) }} 语法，我们可以把 $t 看为一个函数，也就是说，他可以传递参数。

对上面的例子进行改造

<p>{{ $t('message', { msg: 'hello' }) }}</p>
<script>
    const messages = {
        en: {
            message: {
                hello: '{msg} world'
            }
        }
    }
</script>

上述例子中，我们传递了一个对象，其中含有 msg 属性，在 messages 对象中，我们可以用 {msg} 形式来接收值。

当然，我们也可以传递数组

<p>{{ $t('message', ['hello']) }}</p>
<script>
    const messages = {
        en: {
            message: {
                hello: '{0} world'
            }
        }
    }
</script>

此时需要用到 {0} 形式

同时也可以设置多个属性来接收值

<p>email: {{ $t('address', { account: 'foo', domain: 'domain.com' }) }}</p>
<script>
    const messages = {
        address: "{account}{'@'}{domain}"
    }
</script>

其中 {‘@’} 代表直接返回一个字符串

输出：

<p>email: foo@domain.com</p>

2.2 messages 对象

如果有一些 messages key 经常被使用，可以使用 @:key 语法来使用它：

<p>{{ $t('message.linked') }}</p>
<script>
    const messages = {
        en: {
            message: {
                the_world: 'the world',
                dio: 'DIO',
                linked: '@:message.dio @"message.the_world !!!"'
            }
        }
    }
</script>

2.3 @:key 语法

Built-in Modifiers：内置修改器(不知道翻译的对不对)

@key 可以带有修饰符，就像 Vue 中的 @click.stop 一样，Vue-i18n 的用法是 @.modifier:key，其中内置的 modifier 有三种

upper 将所有字母大写
lower 将所有字母小写
capitalize 只将首字母大写

<p>{{ $t('message.word') }}</p>
<script>
const messages = {
    en: {
        message: {
            prefix: 'hello',
            suffix: 'world',
            word: '@.capitalize:message.prefix @.upper:message.suffix !!!!'
        }
    }
}
</script>

显示：

<p>Hello WORLD !!!!</p>

2.4 自定义修改(Custom Modifiers)

如果不想使用内置修改器(built-in modifers)的话，可以使用自定义修改。

想要使用自定义修改，应该在 createI18n 方法中定义 modifiers 属性，内容是定义如何修改的函数。

const i18n = VueI18n.createI18n({
    locale: 'en',
    messages: messages,
    modifiers: {
        noa: (str) => str.replace(/a/g, '')
    }
})

messages 对象配置：

const messages = {
    en: {
        message: {
            words: 'aaa帅哥鉴赏',
            uname: "@.noa:{'message.words'}"
        }
    }
}

@.noa:{‘message.words’} 表示绑定 message 属性中的 words 项，等同于 @.noa:message.words

2.5 官方提供的另一种渲染方式

不建议

<p v-html="$t{'message.hello'}"></p>

3. 多元化

3.1 基本使用

首先我们需要使用管道符 | 分隔内容，像是下面这样：

const messages = {
    en: {
        car: 'benchi | baoma',
        food: 'niu | yang | {named}'
    }
}

Vue.createI18n 方法不变，这些多值的属性，VueI18n 为我们提供了 $tc API 去灵活使用。

<p>{{ $tc('message.car', 0) }}</p>
<p>{{ $tc('message.car', 1) }}</p>
<p>{{ $tc('message.food', 0) }}</p>
<p>{{ $tc('message.food', 1) }}</p>
<p>{{ $tc('message.food', 100, { named: 'zhu' }) }}</p>

和 $t 不同的是，$tc 可以在第二个参数中传入索引值，并且当索引值超出 messages 中类似数组的长度，就会显示最后一个，第三个参数是传入对象，与 $t 一致

3.2 自定义

有一些多元化方式并不适合所有语言，所以 VueI18n 还提供了可选的 pluralizationRules 去满足用户需求(虽然做的很棒，但我确实看不懂这里的语言，各位可以去官网看)：Pluralization | Vue I18n (intlify.dev)

4. Datetime Formatting

顾名思义，本章将讲解 Datetime Formatting 的知识

const datetimeFormats = {
  'en': {
    short: {
      year: 'numeric', month: 'short', day: 'numeric'
    },
    long: {
      year: 'numeric', month: 'short', day: 'numeric',
      weekday: 'short', hour: 'numeric', minute: 'numeric'
    }
  }
}

另外需要额外配置 VueI18n.createI18n 方法

const i18n = VueI18n.createI18n({
    datetimeFormats
})

VueI18n 提供了 $d API，第一个参数可以传入一个 Date 类，第二个参数填 datetimeFormats 配置对象的属性，当然此方法存在第三个参数，如果不填，默认显示的是 VueI18n.createI18n 配置的 locale 的属性值。这里篇幅有限，详细可以看项目文件。

<p>{{ $d(new Date(), 'short') }}</p>

5. Number Formatting

const numberFormats = {
    'en-US': {
        currency: {
            style: 'currency', currency: 'USD', notation: 'standard'
        },
        decimal: {
            style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2
        },
        percent: {
            style: 'percent', useGrouping: false
        }
    },
}