Heim > Artikel > Web-Frontend > 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!