国際化 - Vant 4
🌍 国際化
🎯 紹介
Vant は「言語の魔法使い」🧙♂️ のようなものです！デフォルトでは中国語を使用していますが、強力な多言語切り替え機能を備えており、アプリケーションが言語の壁を簡単に越えて、世界中のあらゆる場所に広がることができます。ユーザーがどの国から来ていても、母国語のような親しみやすい体験を提供することができます！
🛠️ 使用方法
🔄 多言語切り替え
Vant は Locale コンポーネントを通じて多言語サポートを実現しています。まるでアプリケーションに「万能翻訳機」🔄 を搭載したかのようです！Locale.use メソッドを使用すると、現在使用中の言語を瞬時に切り替えることができ、インターフェースのテキストが華麗に変身します。
import { Locale } from'vant'; // 英文言語パックをインポートimport enUS from'vant/es/locale/lang/en-US'; Locale.use('en-US', enUS);✏️ 言語パックの上書き
Locale.add メソッドを使用して、テキストの変更と拡張を実現することができます。まるで言語パックに「化粧」💄 を施し、アプリケーションのスタイルにより合わせることができます！例は以下の通りです：
import { Locale } from'vant'; const messages = { 'zh-CN': { vanPicker: { confirm: '关闭', // '確認'を'关闭'に変更 }, }, }; Locale.add(messages);📦 言語パック
現在サポートされている言語は「国連の大家族」🏛️ のようで、世界中の様々な地域をカバーしています：
| 言語 | ファイル名 | バージョン |
|---|---|---|
| アラビア語 | ar-SA | v3.5.0 |
| ブルガリア語 | bg-BG | v3.5.0 |
| ベンガル語（バングラデシュ） | bn-BD | v3.4.5 |
| デンマーク語 | da-DK | v3.4.8 |
| ドイツ語 | de-DE | - |
| ドイツ語（公式） | de-DE-formal | - |
| ギリシャ語 | el-GR | v3.5.0 |
| 英語 | en-US | - |
| エスペラント | eo-EO | v4.0.9 |
| スペイン語 | es-ES | - |
| ペルシャ語 | fa-IR | v3.5.0 |
| フランス語 | fr-FR | - |
| ヘブライ語 | he-IL | v3.5.0 |
| ヒンディー語 | hi-IN | v3.4.3 |
| インドネシア語 | id-ID | v3.4.5 |
| アイスランド語 | is-IS | v3.4.7 |
| イタリア語 | it-IT | v3.4.5 |
| 日本語 | ja-JP | - |
| カザフ語 | kk-KZ | - |
| クメール語 | km-KH | v4.1.2 |
| 韓国語/朝鮮語 | ko-KR | v3.4.3 |
| ラオス語 | la-LA | v3.4.7 |
| モンゴル語 | mm-MN | v4.0.5 |
| ノルウェー語 | nb-NO | - |
| オランダ語 | nl-NL | v4.0.5 |
| ポーランド語 | pl-PL | v4.9.17 |
| ポルトガル語（ブラジル） | pt-BR | v3.3.3 |
| ルーマニア語 | ro-RO | - |
| ロシア語 | ru-RU | v3.1.5 |
| セルビア語 | sr-RS | v4.6.4 |
| スウェーデン語 | sv-SE | v3.4.7 |
| タイ語 | th-TH | - |
| トルコ語 | tr-TR | - |
| ウクライナ語 | uk-UA | v3.4.5 |
| ベトナム語 | vi-VN | v3.4.5 |
| 簡体字中国語 | zh-CN | - |
| 繁体字中国語（香港） | zh-HK | - |
| 繁体字中国語（台湾） | zh-TW | - |
こちら ですべての言語パックのソースファイルを確認できます。
🔍 現在の言語を取得
useCurrentLang メソッドを使用して、現在使用中の言語を取得することができます。まるで「言語の身分証明書」🆔 を確認するように簡単です！
- 型：
functionuseCurrentLang(): Ref<string>;- 例：
import { useCurrentLang } from'vant'; const currentLang = useCurrentLang(); console.log(currentLang.value); // --> 'zh-CN'🤔 よくある質問
必要な言語パックが見つかりませんか？
上のリストに必要な言語がない場合は、新しい言語パックを追加するために Pull Request を送ってください！「国連の大家族」に新しいメンバーを追加するようなものです。変更内容はドイツ語言語パックの追加 の PR を参考にすることができます。
ビジネスコードで国際化を実現するにはどうすればよいですか？
vue-i18n を使用して実現することができます。これは Vue エコシステムの「国際化の専門家」🌐 です！
CDN 形式で導入する場合、言語パックをどのように使用すればよいですか？
現在、CDN 形式の言語パックは提供されていません。言語パックの内容を手動でコピーして使用することができます。まるで「手作りのカスタマイズ」のように正確です！
言語パックに Sku コンポーネントが含まれていませんか？
言語パックにはデフォルトで Sku ビジネスコンポーネントの言語設定は含まれていません。したがって、Sku コンポーネントの国際化が必要な場合は、国際化テキストを手動で設定する必要があります。これにより、Sku コンポーネントも「流暢な外国語」を話すことができるようになります！
📚 関連ドキュメント
🎨 グローバル設定
- ConfigProvider グローバル設定 - グローバル設定コンポーネント。アプリケーション設定を統一的に管理
- Theme テーマカスタマイズ - テーマカスタマイズガイド。専属の視覚スタイルを作成
- Style 組み込みスタイル - 組み込みスタイルシステム。美しいインターフェースを迅速に構築
🛠️ 開発ガイド
- Advanced Usage 高度な使い方 - 高度な使い方ガイド。コンポーネント機能を深くカスタマイズ
- Best Practices ベストプラクティス - ベストプラクティスガイド。開発プロセスを標準化
🌐 国際化関連
- Vue I18n - Vue 公式の国際化ソリューション
- Intl API - ブラウザのネイティブ国際化 API
- Unicode CLDR - Unicode 共通言語データリポジトリ
🔧 ツールコンポーネント
- Toast 軽い通知 - 軽い通知コンポーネント。多言語メッセージの表示
- Dialog ダイアログ - ダイアログコンポーネント。多言語ダイアログ
- Notify 通知 - 通知コンポーネント。多言語通知のリマインダー