15 - 国际化应用开发

时长：10 分钟

视频信息

• 标题：国际化应用开发
• 系列：实战系列
• 难度：中级
• 前置知识：i18n 基础

章节目录

1. i18n 系统配置（2 分钟）
2. 多语言切换（2 分钟）
3. 时区与地区格式化（3 分钟）
4. 指令消息国际化（3 分钟）

详细脚本

开场（0:00-0:10）

今天学习如何使用 Directix 的国际化功能构建多语言应用。

第一章：i18n 系统配置（0:10-2:10）

画面：VS Code 演示

安装和配置：

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import Directix, { createI18n, setLocale } from 'directix'
import { zhCN, enUS, jaJP } from 'directix'

const i18n = createI18n({
  locale: 'zh-CN',
  fallbackLocale: 'en-US',
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS,
    'ja-JP': jaJP
  }
})

const app = createApp(App)
app.use(Directix)
app.mount('#app')

// 根据浏览器语言自动设置
const browserLocale = navigator.language
if (['zh-CN', 'zh', 'zh-Hans'].includes(browserLocale)) {
  setLocale('zh-CN')
} else if (browserLocale.startsWith('ja')) {
  setLocale('ja-JP')
} else {
  setLocale('en-US')
}

第二章：多语言切换（2:10-4:10）

画面：展示语言切换效果

语言切换组件：

<template>
  <div class="language-switcher">
    <select v-model="currentLocale" @change="changeLocale">
      <option value="zh-CN">中文</option>
      <option value="en-US">English</option>
      <option value="ja-JP">日本語</option>
    </select>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { setLocale, getLocale, t } from 'directix'

const currentLocale = ref(getLocale())

const changeLocale = () => {
  setLocale(currentLocale.value)
  // 更新 HTML lang 属性
  document.documentElement.lang = currentLocale.value
}

// 监听语言变化
watch(currentLocale, () => {
  console.log('切换语言:', currentLocale.value)
})
</script>

使用翻译：

<template>
  <div>
    <h1>{{ t('directives.debounce.description') }}</h1>
    <p>{{ t('errors.invalid_param') }}</p>
  </div>
</template>

<script setup>
import { t } from 'directix'
</script>

第三章：时区与地区格式化（4:10-7:10）

画面：展示格式化效果

获取时区信息：

<script setup>
import { getTimezoneInfo, detectLocaleInfo } from 'directix'

const tz = getTimezoneInfo()
// { id: 'Asia/Shanghai', offset: 8, offsetString: '+08:00', isDST: false, name: 'Shanghai' }

const locale = detectLocaleInfo()
// { locale: 'zh-CN', language: 'zh', region: 'CN', timezone: 'Asia/Shanghai' }
</script>

地区格式化日期：

<template>
  <div>
    <p>日期: {{ formattedDate }}</p>
    <p>数字: {{ formattedNumber }}</p>
    <p>价格: {{ formattedPrice }}</p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { formatDateLocale, formatNumberLocale, formatCurrencyLocale, getLocale } from 'directix'

const date = ref(new Date())
const number = ref(1234567.89)
const price = ref(99.99)

const formattedDate = computed(() => formatDateLocale(date.value))
const formattedNumber = computed(() => formatNumberLocale(number.value))
const formattedPrice = computed(() => formatCurrencyLocale(price.value))
</script>

支持的地区格式：

地区	日期格式	数字分隔符	货币符号
CN	YYYY-MM-DD	1,234.56	¥
US	MM/DD/YYYY	1,234.56	$
JP	YYYY/MM/DD	1,234.56	¥
DE	DD.MM.YYYY	1.234,56	€

第四章：指令消息国际化（7:10-10:00）

画面：展示错误消息

警告系统国际化：

import { setWarningI18n, directiveWarn } from 'directix'
import { t } from 'directix'

// 连接警告系统和 i18n
setWarningI18n(t)

// 现在警告使用翻译后的消息
directiveWarn('debounce', 'errors.invalid_wait', { wait: -100 })
// 输出: [Directix] v-debounce: wait 参数无效，必须为正数

自定义翻译：

import { createI18n, type I18nMessages } from 'directix'

const customZhCN: I18nMessages = {
  ...zhCN,
  directives: {
    ...zhCN.directives,
    myDirective: {
      description: '我的自定义指令',
      errors: {
        invalid_value: '值无效'
      }
    }
  }
}

总结

今天学习了：

• i18n 系统配置
• 多语言切换
• 时区与地区格式化
• 指令消息国际化

这标志着我们教程系列的结束。感谢观看！

练习题

1. 创建一个语言切换器，支持中文、英文、日文
2. 实现一个时间显示组件，根据用户时区显示本地时间
3. 为自定义指令添加多语言错误消息

相关资源

• 国际化文档
• 时区工具 API