So realisieren Sie die internationale Entwicklung von vue-i18n und element-ui im ​​Vue-Projekt

Dieses Mal zeige ich Ihnen, wie Sie die internationale Entwicklung von vue-i18n und element-ui im ​​Vue-Projekt umsetzen und welche Vorsichtsmaßnahmen es gibt, um die internationale Entwicklung von vue-i18n und element umzusetzen -ui im ​​Vue-Projekt, das Folgende ist ein praktischer Fall, schauen wir uns das an.

Standardmäßig haben Sie ein Vue-Projekt erstellt Installieren Sie vue-i18n und element-ui Plug-in

cnpm i vue-i18n --save-dev 
cnpm i element-ui --save-dev

in der Projektdatei, wie unten gezeigt , erstellen Sie den Sprachpaket-Ordner i18n-Ordner

führen Sie i18n.js in main.js ein und führen Sie das Element-UI-Plug-in

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/>' 
})

in i18n.js ein

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

Im Ordner langs

index.js

import en from './en'; 
import cn from './cn'; 
export default { 
 en: en, 
 cn: cn 
}

en.js

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

cn.js

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

Ich glaube ich Habe es gesehen Sie beherrschen die Methode im Fall dieses Artikels. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie den Filter in Vue

So verwenden Sie Vue, um die Klasse von Dom zu bestimmen

Das obige ist der detaillierte Inhalt vonSo realisieren Sie die internationale Entwicklung von vue-i18n und element-ui im ​​Vue-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!