vueプロジェクトの国際化-vue-i 18 nの実現

6185 ワード
Vue 先端
vue-i18n
一、据付
1、直接ダウンロード/CDN
https://unpkg.com/vue-i18n/dist/vue-i18n
unpkg.comはNPMベースのCDNリンクを提供している.上のリンクは、NPMでリリースされた最新バージョンを指しています.あなたもhttps://unpkg.com/[email protected]/dist/vue-i18n.jsのようなURLはバージョン番号またはtagを指定します.
Vueの後にvue-i 18 nを導入すると、自動的にインストールされます.

       2、NPM 
npm install vue-i18n

       3、Yarn 
yarn add vue-i18n

モジュールシステムで する は、Vue.use()でvue-i18nを にインストールする があります.
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

グローバルなscriptラベルを する は、そうする はありません( でインストール)
       4、Vue Cli 3.x 
vue add i18n

Vue cliが です.xは として、コマンドラインに のコマンドを してインストールできます.
npm install @vue/cli -g

5、
の を して したい は、GitHubから cloneし、 でvue-i18nを する があります.
git clone https://github.com/kazupon/vue-i18n.git node_modules/vue-i18n
cd node_modules/vue-i18n
npm install # or `yarn`
npm run build  # or `yarn run build`

、
メールでjsにvue-i 18 nを する:
import VueI18n from 'vue-i18n'
 
Vue.use(VueI18n) //          
 
const i18n = new VueI18n({
    locale: 'zh-CN',    //     
    //this.$i18n.locale //     locale         
    messages: {
      'zh-CN': require('./common/lang/zh'),   //      
      'en-US': require('./common/lang/en')    //      
    }
})
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  i18n,  //     
  store,
  router,
  template: '',
  components: { App }
})

のコードは、vue-i 18 nを にvueプロジェクトに し、i 18 nインスタンスオブジェクトを し、グローバルコールを にします. たちはthis.$i18n.localeを じて の り えを います.
たちは する のファイルが で、2つの( で する パッケージ)jsファイルだけが で、requireの でmainに します.js. 
:
en.js      ：
export const m = { 
    string_title=js language test
    string_lang1=title
    string_lang2=content，balabala
    string_lang3=nav1
    string_lang4=nav2
    string_lang5=nav3
    string_lang6=nav4
    string_lang7=screen1
    string_lang8=screen content
    string_lang9=change to Chinese
}
zh.js     ：
export const m = {
    string_title=js      
    string_lang1=  
    string_lang2=    ，balabala
    string_lang3=  1
    string_lang4=  2
    string_lang5=  3
    string_lang6=  4
    string_lang7=   
    string_lang8=     
    string_lang9=     
}

イベントをクリックして を り え
/**
 *      
 */ 
 changeLangEvent() {
   this.$confirm('       ?', '  ', {
       confirmButtonText: '  ',
       cancelButtonText: '  ',
       type: 'warning'
    }).then(() => {
       if ( this.lang === 'zh-CN' ) {
          this.lang = 'en-US';
          this.$i18n.locale = this.lang;//    
       }else {
          this.lang = 'zh-CN';
          this.$i18n.locale = this.lang;//    
       }
    }).catch(() => {
       this.$message({
           type: 'info',
       });          
    });
}

されたパラメータを して にアクセス
この は、 め された パラメータ{count}および/または{n}によって にアクセスすることができる. に じて、これらの されたネーミングパラメータを きできます.
        ：
const messages = {
  en: {
    apple: 'no apples | one apple | {count} apples',
    banana: 'no bananas | {n} banana | {n} bananas'
  }
}



    ：

{{ $tc('apple', 10, { count: 10 }) }}


{{ $tc('apple', 10) }}



{{ $tc('banana', 1, { n: 1 }) }}


{{ $tc('banana', 1) }}


{{ $tc('banana', 100, { n: 'too much' }) }}


    ：


10 apples


10 apples



1 banana


1 banana


too much bananas

:この はすべての に されません(たとえば、スラブ には なる があります).
のカスタム
/**
 * @param choice {number}   $tc        ：`$tc('path.to.rule', choiceIndex)`
 * @param choicesLength {number}       
 * @returns              
**/
VueI18n.prototype.getChoiceIndex = function (choice, choicesLength) {
  // this === VueI18n   ，              
  if (this.locale !== 'ru') {
    //         
  }

  if (choice === 0) {
    return 0;
  }

  const teen = choice > 10 && choice < 20;
  const endsWithOne = choice % 10 === 1;

  if (!teen && endsWithOne) {
    return 1;
  }

  if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {
    return 2;
  }

  return (choicesLength < 4) ? 2 : 3;
}

           ：

const messages = {
  ru: {
    car: '0 машин | 1 машина | {n} машины | {n} машин',
    banana: 'нет бананов | 1 банан | {n} банана | {n} бананов'
  }
}

    0 things | 1 thing | few things | multiple things.

           $tc()，    $t() ：


{{ $tc('car', 1) }}


{{ $tc('car', 2) }}


{{ $tc('car', 4) }}


{{ $tc('car', 12) }}


{{ $tc('car', 21) }}



{{ $tc('banana', 0) }}


{{ $tc('banana', 4) }}


{{ $tc('banana', 11) }}


{{ $tc('banana', 31) }}


    ：


1 машина


2 машины


4 машины


12 машин


21 машина



нет бананов


4 банана


11 бананов


31 банан

のローカライズ
  
        ：

const dateTimeFormats = {
  'en-US': {
    short: {
      year: 'numeric', month: 'short', day: 'numeric'
    },
    long: {
      year: 'numeric', month: 'short', day: 'numeric',
      weekday: 'short', hour: 'numeric', minute: 'numeric'
    }
  },
  'ja-JP': {
    short: {
      year: 'numeric', month: 'short', day: 'numeric'
    },
    long: {
      year: 'numeric', month: 'short', day: 'numeric',
      weekday: 'short', hour: 'numeric', minute: 'numeric', hour12: true
    }
  }
}

  ，         (  ：short、long  )       ，      ECMA-402 Intl.DateTimeFormat    。
            ，      VueI18n       dateTimeFormats   ：

const i18n = new VueI18n({
  dateTimeFormats
})

new Vue({
  i18n
}).$mount('#app')

    ：



  
{{ $d(new Date(), 'short') }}

  
{{ $d(new Date(), 'long', 'ja-JP') }}




    ：



  
Apr 19, 2017

  
2017 4 19 ( )   2:19

Vue I 8 nドキュメント
 
vue-ブレンド-mixin
vueで属性を計算するgetとsetの方法