How to develop Vue project internationally

This time I will show you how to develop the Vue project internationally, and what are the precautions for the international development of the Vue project. The following is a practical case, let's take a look.

In projects built by vue, we often use the element-ui plug-in. I have described it in front of my blog. Specifically, how to use the vue-i18n plug-in for international development, but in the previous blog, if you use it in the project With the element-ui plug-in, language and text replacement in the plug-in can be performed in conjunction with the element-ui plug-in. The element-ui plug-in itself also provides language packs. The specific configuration and usage methods are as follows:

By default, you have built a vue project. Install vue-i18n and element-ui plug-ins in the vue project.

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

is as follows in the project file Figure, create the language pack folder i18n folder

Introduce i18n.js in main.js, and introduce the 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 In .js

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

In folder 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;

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to optimize Vue

How to set the carousel image in the WeChat applet to an adaptive height

The above is the detailed content of How to develop Vue project internationally. For more information, please follow other related articles on the PHP Chinese website!