Cara menggunakan Vue dan Element-UI untuk pemprosesan berbilang bahasa antarabangsa

Cara menggunakan Vue dan Element-UI untuk pemprosesan berbilang bahasa antarabangsa

Pengenalan:
Dalam era globalisasi yang semakin meningkat, untuk membolehkan tapak web dan aplikasi menyesuaikan diri kepada pengguna di negara dan wilayah yang berbeza, pemprosesan berbilang bahasa antarabangsa telah menjadi semakin penting. Vue ialah rangka kerja pembangunan bahagian hadapan yang popular, dan Element-UI ialah satu set perpustakaan UI berdasarkan Vue. Artikel ini akan memperkenalkan cara menggunakan Vue dan Element-UI untuk pemprosesan berbilang bahasa antarabangsa.

1. Pasang dan perkenalkan perpustakaan tanggungan yang diperlukan
Pertama, kami perlu memasang dan memperkenalkan beberapa perpustakaan tanggungan yang diperlukan. Dalam direktori akar projek Vue, buka terminal dan jalankan arahan berikut:

npm install vue-i18n
npm install vant

Kemudian, dalam fail entri projek (biasanya main.js), perkenalkan dan gunakan perpustakaan bergantung ini:

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import vant from 'vant'
import 'vant/lib/index.css'

Vue.use(VueI18n)
Vue.use(vant)

// 初始化i18n实例
const i18n = new VueI18n({
  locale: 'zh-CN',  // 默认语言
  fallbackLocale: 'en',  // 如果当前语言包中没有对应的翻译文本，就会使用fallbackLocale中定义的语言包
  messages: {
    'zh-CN': require('./lang/zh-CN.json'),  // 引入中文语言包
    'en': require('./lang/en.json')  // 引入英文语言包
  }
})

// 将i18n实例绑定到Vue实例上
new Vue({
  el: '#app',
  i18n,
  render: h => h(App)
})

2. Cipta fail pek bahasa
Buat folder lang dalam direktori akar projek dan buat fail pek berbilang bahasa dalam folder. Sebagai contoh, kami mencipta fail zh-CN.json dan fail en.json untuk meletakkan teks terjemahan bahasa Cina dan Inggeris masing-masing.

zh-CN.json contoh fail:

{
  "hello": "你好",
  "welcome": "欢迎使用",
  "button": {
    "submit": "提交",
    "cancel": "取消"
  },
  ...
}

en.json contoh fail:

{
  "hello": "Hello",
  "welcome": "Welcome",
  "button": {
    "submit": "Submit",
    "cancel": "Cancel"
  },
  ...
}

3 Gunakan teks antarabangsa dalam komponen Vue
Dalam komponen Vue yang memerlukan pengantarabangsaan, kami boleh menggunakan arahan terbina dalam Atau penapis untuk mendapatkan. teks terjemahan yang sepadan.

Contoh penggunaan arahan terbina dalam Vue:

<template>
  <div>
    <h2>{{ $t('hello') }}</h2>
    <p>{{ $t('welcome') }}</p>
    <button @click="submit">{{ $t('button.submit') }}</button>
    <button @click="cancel">{{ $t('button.cancel') }}</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  methods: {
    submit() {
      // 提交操作
    },
    cancel() {
      // 取消操作
    }
  }
}
</script>

Contoh penggunaan penapis Vue:

<template>
  <div>
    <h2>{{ 'hello' | t }}</h2>
    <p>{{ 'welcome' | t }}</p>
    <button @click="submit">{{ 'button.submit' | t }}</button>
    <button @click="cancel">{{ 'button.cancel' | t }}</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  filters: {
    t(key) {
      return this.$t(key)
    }
  },
  methods: {
    submit() {
      // 提交操作
    },
    cancel() {
      // 取消操作
    }
  }
}
</script>

Empat Menukar bahasa
Langkah terakhir ialah melaksanakan fungsi menukar bahasa. Ini boleh dicapai dengan menambahkan butang atau menu lungsur untuk menukar bahasa.

Contoh:

<template>
  <div>
    <button @click="changeLocale('zh-CN')">中文</button>
    <button @click="changeLocale('en')">English</button>
  </div>
</template>

<script>
export default {
  name: 'LanguageSwitcher',
  methods: {
    changeLocale(locale) {
      this.$i18n.locale = locale
    }
  }
}
</script>

Ringkasan:
Artikel ini memperkenalkan cara menggunakan Vue dan Element-UI untuk pemprosesan berbilang bahasa antarabangsa. Dengan memasang dan memperkenalkan perpustakaan bergantung yang berkaitan, mencipta fail pek bahasa dan menggunakan teks antarabangsa dalam komponen Vue, kami boleh mencapai penyesuaian berbilang bahasa bagi tapak web dan aplikasi. Saya harap artikel ini akan membantu anda dalam pemprosesan pelbagai bahasa antarabangsa.

Atas ialah kandungan terperinci Cara menggunakan Vue dan Element-UI untuk pemprosesan berbilang bahasa antarabangsa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!