Comment utiliser Vue et Element-UI pour le traitement multilingue international

Comment utiliser Vue et Element-UI pour le traitement multilingue international

Introduction :
À l'ère de la mondialisation croissante, afin de permettre aux sites Web et aux applications de s'adapter aux utilisateurs de différents pays et régions, le traitement multilingue international a deviennent de plus en plus importants. Vue est un framework de développement frontal populaire et Element-UI est un ensemble de bibliothèques d'interface utilisateur basées sur Vue. Cet article expliquera comment utiliser Vue et Element-UI pour le traitement multilingue international.

1. Installer et introduire les bibliothèques de dépendances nécessaires
Tout d'abord, nous devons installer et introduire certaines bibliothèques de dépendances nécessaires. Dans le répertoire racine du projet Vue, ouvrez un terminal et exécutez la commande suivante :

npm install vue-i18n
npm install vant

Puis, dans le fichier d'entrée du projet (généralement main.js), introduisez et utilisez ces bibliothèques dépendantes :

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. Créez un fichier de pack de langue
Créez un dossier lang dans le répertoire racine du projet et créez plusieurs fichiers de pack de langue dans le dossier. Par exemple, nous créons un fichier zh-CN.json et un fichier en.json pour placer respectivement les textes traduits en chinois et en anglais.

Exemple de fichier zh-CN.json :

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

Exemple de fichier en.json :

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

3. Utiliser du texte internationalisé dans les composants Vue
Dans les composants Vue qui nécessitent une internationalisation, nous pouvons utiliser les instructions intégrées de Vue ou filtrer pour obtenir le texte traduit correspondant.

Exemple d'utilisation des instructions intégrées de 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>

Exemple d'utilisation du filtre 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>

Changement de langue
La dernière étape consiste à implémenter la fonction de changement de langue. Ceci peut être réalisé en ajoutant un bouton ou un menu déroulant pour changer de langue.

Exemple :

<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>

Résumé :
Cet article présente comment utiliser Vue et Element-UI pour le traitement multilingue international. En installant et en introduisant des bibliothèques dépendantes pertinentes, en créant des fichiers de packs de langue et en utilisant du texte internationalisé dans les composants Vue, nous pouvons réaliser une adaptation multilingue des sites Web et des applications. J'espère que cet article vous sera utile dans le traitement multilingue international.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!