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 :
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
L'exemple de code est le suivant :
// langs.js export default { en: { welcome: 'Welcome', greeting: 'Hello, {name}!' }, zh: { welcome: '欢迎', greeting: '你好,{name}!' } };
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;
4. Utilisez le multilingue
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');
L'exemple de code est le suivant :
<!-- MyComponent.vue --> <template> <div> <h1>{{ $t('welcome') }}</h1> <p>{{ $t('greeting', { name: 'John' }) }}</p> </div> </template>
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.
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');
L'exemple de code est le suivant :
<!-- MyComponent.vue --> <template> <el-button>{{ $t('welcome') }}</el-button> </template>
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>
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!