Maison > interface Web > js tutoriel > Comment réaliser le développement international de vue-i18n et element-ui dans le projet vue

Comment réaliser le développement international de vue-i18n et element-ui dans le projet vue

php中世界最好的语言
Libérer: 2018-06-02 10:27:27
original
2637 Les gens l'ont consulté

Cette fois, je vais vous montrer comment implémenter le développement international de vue-i18n et element-ui dans le projet vue, et quelles sont les précautions pour implémenter le développement international de vue-i18n et element -ui dans le projet vue, ce qui suit est un cas pratique, jetons un coup d'oeil.

Par défaut, vous avez construit un projet vue. Dans le projet vue Installez les plug-ins vue-i18n et element-ui

cnpm i vue-i18n --save-dev 
cnpm i element-ui --save-dev
Copier après la connexion

dans le fichier projet. comme indiqué ci-dessous, créez le dossier du pack de langue i18n

et introduisez i18n.js dans main.js, et introduisez le plug-in element-ui

import Vue from 'vue' 
import App from './App' 
import router from './router' 
// element-ui 
import Element from 'element-ui' 
import 'element-ui/lib/theme-chalk/index.css' 
Vue.use(Element) 
// vuei18n 
import i18n from './i18n/i18n' 
Vue.config.productionTip = false 
/* eslint-disable no-new */ 
new Vue({ 
 el: '#app', 
 router, 
 i18n, 
 components: { 
 App 
 }, 
 template: '<App/>' 
})
Copier après la connexion

dans i18n.js dans

import Vue from 'vue' 
import locale from 'element-ui/lib/locale' 
import VueI18n from 'vue-i18n' 
import messages from './langs' 
Vue.use(VueI18n) 
const i18n = new VueI18n({ 
 locale: localStorage.lang || 'cn', 
 messages, 
}) 
locale.i18n((key, value) => i18n.t(key, value)) 
export default i18n
Copier après la connexion

dossier langues

index.js

import en from './en'; 
import cn from './cn'; 
export default { 
 en: en, 
 cn: cn 
}
Copier après la connexion

en.js

import enLocale from 'element-ui/lib/locale/lang/en' 
const en = { 
 message: { 
 'mes': 'hello', 
 }, 
 ...enLocale 
} 
export default en;
Copier après la connexion

cn.js

import enLocale from 'element-ui/lib/locale/lang/zh-CN' 
const cn = { 
 message: { 
 'mes': '你好', 
 }, 
 ...enLocale 
} 
export default cn;
Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser le filtre dans vue

Comment utiliser vue pour déterminer la classe de dom

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