vue-kilang

说明

vue-kilang是一款以中文为第一语言的国际化插件，基于vue-i18n二次开发。对比vue-i18n，翻译操作更简洁，只需要导入挂载插件，并按下方教程编写，即可翻译。

---

支持框架

• vue2.0
• vue3.0

---

安装

1. 先安装vue-i18n依赖

# npm方式安装
vue2: npm install vue-i18n@6 -s （vue-i18n该版本支持vue2,否则引入会报错）
vue3: npm install vue-i18n -s

1. 安装vue-kilang

# npm方式安装
vue2: npm i vue-kilang
vue3: npm i vue3-kilang

快速上手

vue2:

main.js`引入vue-kilang库

// main.js
import Vue from 'vue'
import App from './App.vue'

import {kilang, i18n} from 'vue-kilang'; //引入vue-kilang
let data = {
  厉害: ['lihai', '厉害繁体'],
  游戏: ['youxi', '游戏繁体'],
  编程: ['biancheng', '编程繁体'],
  新闻: ['xin', '新闻繁体']
}
let lang = ['EN', 'ZNT']

Vue.use(kilang,{data,config:lang})

new Vue({
  i18n,   // 注入，不能缺少
  render: h => h(App),
}).$mount('#app')

vue3:

main.js`引入vue3-kilang库

// main.js
import { createApp } from 'vue'
import App from './App.vue'

import kilang from 'vue3-kilang'; //引入vue3-kilang
const  app= createApp(App)

let data = {
    厉害: ['lihai', '厉害繁体'],
    游戏: ['youxi', '游戏繁体'],
    编程: ['biancheng', '编程繁体'],
    新闻: ['xin', '新闻繁体']
}
// 无需配置中文，默认返回中文(标识ZN)  (需要与翻译的数据的value值语言对应的翻译index一致) 
let lang = ['EN', 'ZNT']

//data数据中的属性值必须是Array。data属性值数组的index = lang自定义语言配置项的数组index 

app.use(kilang,{data:data,config:lang})

vue使用use挂载插件时，需传入一个对象配置。 参数如上main实例： data是要传入的中文翻译及数据结构、config是传入需要配置的自定义 语言标识。

---

内置：插件已内置中文语言标识 => ZN

---

组件使用方法

vue2:

<template>
 <div id="app">
 <ul>
   <li>{{ $t("电影") }}</li>
   <li>{{ $t('新闻')}}</li>
   <li>{{ $t('热点')}}</li>
 </ul>
   <button @click="setLang('ZN')">切换中文</button>
   <button @click="setLang('EN')">切换英文</button>
 </div>
</template>

<script>

export default {
 methods:{
   setLang(type){
     this.$i18n.locale = type; //切换语言
   },
 },
}
</script>

vue3:

<script setup lang="ts">

import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();

//setLang设置语言（调用后会重新刷新渲染网页）
//getLang查看当前语言
const zhLang = (type:string)=>{
  proxy.$setLang(type) 
  proxy.$getLang()
}

</script>

<template>
  <ul>
    <li>{{ $t("电影") }}</li>
    <li>{{ $t('新闻')}}</li>
    <li>{{ $t('热点')}}</li>
  </ul>
  <div>
    <button @click="setLang('ZN')">切换英文</button>
    <button @click="setLang('EN')">切换中文</button>
  </div>
</template>

联系

·有其他问题或建议，作者邮箱：[e-mail]