# vue-i18n --- <hr> ## vue-i18n-loader <hr> --- - 檔案支援什麼類型? - 檔案如何儲存? --- ### 檔案支援什麼類型? - json - yaml --- ### 檔案如何儲存? ---- #### Inline (whole) ```= // a.vue <i18n> { "en-us": { "hello": "hello" }, "zh-cn": { "hello": "哈囉" } } </i18n> ``` ---- #### Inline (partial) ```= // b.vue <i18n locale="en-us"> { "hello": "hello" } </i18n> <i18n locale="zh-cn"> { "hello": "哈囉" } </i18n> ``` ---- #### Import ```= // a.vue <i18n src="src/locale/index.json"> </i18n> ``` ```= // index.json { "en-us": { "hello": "hello" }, "zh-cn": { "hello": "哈囉" } } ``` --- <hr> ## vue-i18n <hr> --- - 暴露的方法 - $t - 文字 - $t - 文字: 帶參數 - $tc - 文字: 區分方式 單數、複數 - $tc - 文字: 區分方式 沒有、一個、多個 - $n - 數字 - $d - 日期 - Linked messages - 不同 message 間的調用 - Modifiers - 用以更改調用的 message - $i18n - 用以更改要使用的地區等等 - 更改語言 - 難點 --- ## 暴露的方法 以下排版皆是: ```javascript= // component.vue ``` ```javascript= // message.js ``` --- ### $t - 文字 ```javascript= this.$t('fruits.apple') // => An apple ``` ```javascript= export default { fruits: { apple: "An apple." } } ``` ---- ### $t - 文字 帶參數 ```javascript= this.$t('fruits.apple', { adjective: "fresh" } ) // => A(n) fresh apple. ``` ```javascript= export default { fruits: { apple: "A(n) {adjective} apple." } } ``` ---- ### $tc - 文字 區分方式 單數、複數 ```javascript= this.$tc('fruits.apple', 1) // => 倖存的蘋果 ``` ```javascript= export default { fruits: { apple: "倖存的蘋果 | {n}個蘋果", apple: "倖存的蘋果 | {count}個蘋果 } } ``` ---- ### $tc - 文字 區分方式 沒有、一個、多個 ```javascript= this.$tc('fruits.apple', 0) // => 一個都不留 ``` ```javascript= export default { fruits: { apple: "一個都不留 | 倖存的蘋果 | {n}個蘋果", apple: "一個都不留 | 倖存的蘋果 | {count}個蘋果" } } ``` ---- ### $n - 數字 ```javascript= this.$n(123.456789, 'amount') // => 123.46 ``` ```javascript= export default { amount: { maximumFractionDigits: 2 } } ``` ---- ### $d - 日期 參考 $n - 數字 ---- ### Linked messages - 不同 message 間的調用 ```javascript= this.$t('fruits.apple') // => 多個蘋果 ``` ```javascript= export default { "fruits": { "apple": "一個都不留 | 倖存的蘋果 | @:count.many個蘋果", "apple": "一個都不留 | 倖存的蘋果 | @:(count.many)個蘋果" }, "count": { "many": "多個", } } ``` ---- ### Modifiers - 用以更改調用的 message ```javascript= this.$t('sentence') // => A HUGE apple. ``` ```javascript= export default { sentense: 'A @.upper:huge apple.', adjectives: { huge: 'huge' } } ``` ---- ### $i18n - 用以更改要使用的地區等等 ```javascript= this.$i18n.locale = 'en' ``` --- ## Methods - `this.$t(path, options)` - `this.$tc(path, count)` - `this.$te(path) -> boolean` - `this.$n(number, path)` - `this.$d(number | Date, path)` <hr> - `{n}` - `{count}` - `(zero | )single | plural` - `@:(path)` --- ## 缺點 - 無法使用 option 解析 path - 呼叫方式(nested)不一致、不直覺，學習成本高 --- ## 實例 https://codesandbox.io/s/vue-i18n-7l44f