How to use Vue and Element-UI to implement internationalization functions

How to use Vue and Element-UI to implement internationalization functions

In recent years, with the rapid development of the Internet and the progress of globalization, many websites and applications need to have internationalization functions to meet different needs. National or regional user needs. Vue.js and Element-UI are currently popular front-end development frameworks and UI component libraries. This article will introduce how to use them to achieve internationalization functions.

1. Install dependency packages

First, use npm or yarn to install the required dependency packages. Open a command line in the root directory of the project and enter the following command:

npm install vue-i18n --save

npm install element-ui --save

2. Configuring the internationalization plug-in

In the main file of the project (usually main. js), introduce Vue and Element-UI, and configure the internationalization plug-in vue-i18n. The sample code is as follows:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en' // 导入英文语言包
import VueI18n from 'vue-i18n'
import App from './App.vue'

Vue.use(ElementUI, { locale })
Vue.use(VueI18n)

// 创建并配置vue-i18n实例
const i18n = new VueI18n({
  locale: 'en',
  messages: {
    'en': require('./locales/en.json'),
    'zh': require('./locales/zh.json')
  }
})

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

In the above code, we first import the required language package from the element-ui/lib/locale/lang directory (here we imported the English language Bag). Then, we created and configured the vue-i18n instance. The locale option sets the default language, and the messages option specifies the translation file paths corresponding to various languages. These translation files can be defined according to actual needs.

3. Create translation files

Create a new locales directory in the root directory of the project and create two translation files in iten .json and zh.json. The sample code is as follows:

en.json：

{
  "hello": "Hello",
  "world": "World",
  "button": "Click Me"
}

zh.json：

{
  "hello": "你好",
  "world": "世界",
  "button": "点击我"
}

Here, we respectively English and Chinese are translated, and more languages ​​can be added as needed. The naming rule for translation files is based on the ISO 639-1 standard of the language.

4. Using translation in components

In Vue components, we can use translation in templates through the this.$t() method . The sample code is as follows:

<template>
  <div>
    <h1 id="t-hello">{{ $t('hello') }}</h1>
    <p>{{ $t('world') }}</p>
    <el-button type="primary">{{ $t('button') }}</el-button>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

In the above code, we use the $t() method to obtain the translated text and display it in the template. When the language changes, vue-i18n will automatically translate according to the current locale.

5. Switch language

Through the components provided by Element-UI, we can also add a language switching function. The sample code is as follows:

<template>
  <div>
    <h1 id="t-hello">{{ $t('hello') }}</h1>
    <p>{{ $t('world') }}</p>
    <el-button type="primary">{{ $t('button') }}</el-button>
    <el-select v-model="currentLang" @change="changeLanguage">
      <el-option value="en">English</el-option>
      <el-option value="zh">简体中文</el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      currentLang: this.$i18n.locale
    }
  },
  methods: {
    changeLanguage() {
      this.$i18n.locale = this.currentLang
    }
  }
}
</script>

In the above code, we use the el-select component to implement a drop-down menu. The user can switch the language displayed on the interface by selecting a different language. When switching languages, we only need to update the value of i18n.locale, and vue-i18n will re-translate the interface according to the new language environment.

Through the above steps, we can implement internationalization functions in Vue and Element-UI. According to actual needs, we can display different translated texts according to different language environments to provide users with a better multi-language experience. At the same time, Element-UI's component library provides us with a convenient language switching function, making the entire internationalization process simpler and faster.

The above are just simple examples. Actual projects may involve more language translation and interface layout adjustments, but by using the internationalization plug-ins and components provided by Vue and Element-UI, we can achieve internationalization more easily. demand, and improve user experience and product competitiveness.

The above is the detailed content of How to use Vue and Element-UI to implement internationalization functions. For more information, please follow other related articles on the PHP Chinese website!