前端國際化需求

目前比較流行的國際化插件是 i18n 。我現(xiàn)在記錄,自身的學(xué)歷過程

我所學(xué)習(xí)的是vue-i18n 的插件,基于Vue。

安裝命令是

npm install vue-i18n --save

我在demo 中簡單的使用了一下。大概整理一下思路/

//先看看代碼
/**
在.vue單文件中使用

*/
<template>
    <div class="login">
        <p>{{ $t("message.hello") }}</p>  
        <el-button @click="changelang">中英切換</el-button>
    </div>
</template>

<script>
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) 
//1. 引入需要的模塊 同時使用中間件(use)


const messages = {
    en: {
        message: {
            hello: 'world hello'
        }
    },
    zh: {
        message: {
            hello: '世界'
        }
    }
}
//2.這第二步就是定義map表

/**
第2 和第3 可以以模塊的方式呈現(xiàn)。
*/

const i18n = new VueI18n({
    locale:'zh',
    messages
})
//3.實(shí)例化

export default {
    name: 'login',
    data() {
        return {
        }
    },
    i18n, //4.這一步很重要,掛載 掛載在main.js
    methods: {
        changelang() {
            let self = this
            if (i18n.locale == 'zh') {
            console.log(i18n.messages.zh.message.hello) // 世界
                console.log(i18n.messages)
                i18n.locale = 'en'
                
            } else{
                i18n.locale = 'zh'
                //完成一個簡單切換
            }
        }
    }
}
</script>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 轉(zhuǎn)載 :OpenDiggawesome-github-vue 是由OpenDigg整理并維護(hù)的Vue相關(guān)開源項(xiàng)目庫...
    果汁密碼閱讀 23,170評論 8 124
  • 一 遇見 如果再回到那個傍晚,王振也許不會再游逛著走到那個街頭,那個路口,不會再慫恿自己去幫助那個倒地的老人...
    王艾柯閱讀 168評論 0 1
  • 姓名:黃太平 公司:寧波大發(fā)化纖有限公司 組別:301期反省組學(xué)員 【知~學(xué)習(xí)】 1、《六項(xiàng)精進(jìn)》讀 1遍 2、《...
    黃太平閱讀 150評論 0 0
  • 黃酒三 陳皮再 新桃一枚雄黃半 夜雨星點(diǎn)憑欄盡 須是式微極九天 妾即月 君可見
    夢見王先生閱讀 216評論 1 5