Maison > interface Web > Voir.js > le corps du texte

Comment utiliser Vue et Element-UI pour la prise en charge multilingue

王林
Libérer: 2023-07-22 09:53:21
original
1966 Les gens l'ont consulté

Comment utiliser Vue et Element-UI pour la prise en charge multilingue

Introduction :
Avec le processus de mondialisation, de plus en plus d'applications doivent prendre en charge plusieurs langues. Vue, en tant que framework JavaScript populaire, offre un moyen pratique d'obtenir une prise en charge multilingue. Element-UI, en tant qu'ensemble de bibliothèques de composants d'interface utilisateur basées sur Vue, fournit également une prise en charge multilingue. Cet article expliquera comment utiliser Vue et Element-UI pour obtenir une prise en charge multilingue et fournira des exemples de code pertinents.

1. Préparation
Avant de commencer, nous devons nous assurer que les conditions suivantes sont remplies :

  1. Installez Node.js et npm (si vous ne l'avez pas encore installé).
  2. Créez un nouveau projet Vue, vous pouvez utiliser Vue CLI ou d'autres méthodes.

2. Installer les dépendances
Tout d'abord, nous devons installer les deux dépendances Element-UI et vue-i18n.

Exécutez la commande suivante dans le répertoire racine du projet :
npm install element-ui vue-i18n

3 Configurez le multilingue

  1. Créez un dossier pour stocker la configuration de la langue et créez un dossier lang dans le répertoire src, et ajoutez-y un fichier langs.js. Ce fichier est utilisé pour définir le texte de traduction dans différentes langues.

L'exemple de code est le suivant :

// langs.js
export default {
  en: {
    welcome: 'Welcome',
    greeting: 'Hello, {name}!'
  },
  zh: {
    welcome: '欢迎',
    greeting: '你好,{name}!'
  }
};
Copier après la connexion
  1. Créez un dossier plugins dans le répertoire src et ajoutez-y un fichier i18n.js. Ce fichier est utilisé pour créer et configurer une instance Vue-i18n.

L'exemple de code est le suivant :

// i18n.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import langs from '../lang/langs';

Vue.use(VueI18n);

const messages = {
  en: langs.en,
  zh: langs.zh
};

const i18n = new VueI18n({
  locale: 'en',
  messages
});

export default i18n;
Copier après la connexion

4. Utilisez le multilingue

  1. Importez l'instance Vue-i18n dans le fichier main.js et montez-la sur l'instance Vue.

L'exemple de code est le suivant :

// main.js
import Vue from 'vue';
import App from './App.vue';
import i18n from './plugins/i18n';

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app');
Copier après la connexion
  1. Dans les composants nécessitant une prise en charge multilingue, utilisez la méthode $t de Vue-i18n pour accéder au texte traduit.

L'exemple de code est le suivant :

<!-- MyComponent.vue -->
<template>
  <div>
    <h1>{{ $t('welcome') }}</h1>
    <p>{{ $t('greeting', { name: 'John' }) }}</p>
  </div>
</template>
Copier après la connexion

5. Prise en charge multilingue à l'aide d'Element-UI
Element-UI a intégré la prise en charge de plusieurs langues, il suffit de le configurer légèrement.

  1. Importez le style et la configuration multilingue d'Element-UI dans le fichier main.js.

L'exemple de code est le suivant :

// main.js
import Vue from 'vue';
import App from './App.vue';
import i18n from './plugins/i18n';
import 'element-ui/lib/theme-chalk/index.css';
import locale from 'element-ui/lib/locale/lang/en'; // 根据需要选择语言

Vue.use(ElementUI, { locale });

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app');
Copier après la connexion
  1. Dans les composants Element-UI qui nécessitent une prise en charge multilingue, vous pouvez l'utiliser directement.

L'exemple de code est le suivant :

<!-- MyComponent.vue -->
<template>
  <el-button>{{ $t('welcome') }}</el-button>
</template>
Copier après la connexion

6. Changer de langue
Enfin, nous pouvons ajouter une fonction de changement de langue pour permettre aux utilisateurs de changer de langue de manière flexible.

L'exemple de code est le suivant :

<!-- LanguageSwitcher.vue -->
<template>
  <div>
    <select v-model="language" @change="changeLanguage">
      <option value="en">English</option>
      <option value="zh">中文</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      language: 'en'
    };
  },
  methods: {
    changeLanguage() {
      this.$i18n.locale = this.language;
    }
  }
};
</script>
Copier après la connexion

Enfin, introduisez le composant LanguageSwitcher où vous devez changer de langue.

Résumé :
Grâce aux étapes ci-dessus, nous pouvons obtenir une prise en charge multilingue pour Vue et Element-UI. Tout d’abord, nous devons installer les dépendances et configurer le texte multilingue. Nous pouvons ensuite utiliser Vue-i18n dans le composant pour accéder au texte traduit. Enfin, Element-UI a intégré un support multilingue et il suffit d'effectuer une configuration simple.

J'espère que cet article vous sera utile et je vous souhaite une bonne programmation avec un support multilingue à l'aide de Vue et Element-UI !

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal