Heim > Web-Frontend > js-Tutorial > Hauptteil

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

php中世界最好的语言
Freigeben: 2018-06-02 10:27:27
Original
2612 Leute haben es durchsucht

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
Nach dem Login kopieren

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/>' 
})
Nach dem Login kopieren

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
Nach dem Login kopieren

Im Ordner langs

index.js

import en from './en'; 
import cn from './cn'; 
export default { 
 en: en, 
 cn: cn 
}
Nach dem Login kopieren

en.js

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

cn.js

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

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!