国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue 項(xiàng)目的I18n國際化之路

2i18ns / 1577人閱讀

摘要：國內(nèi)主要主要三點(diǎn)，一個(gè)是港澳臺采用中文繁體英文，內(nèi)陸通俗中文簡體，新疆等地區(qū)采用文化標(biāo)準(zhǔn)。

I18n (internationalization ) ---未完善

產(chǎn)品國際化是產(chǎn)品后期維護(hù)及推廣中重要的一環(huán)，通過國際化操作使得產(chǎn)品能更好適應(yīng)不同語言和地區(qū)的需求

國際化重點(diǎn)：
1、 語言
語言本地化
2、 文化
顏色、習(xí)俗等
3、 書寫習(xí)慣
日期格式、時(shí)區(qū)、數(shù)字格式、書寫方向
備注：項(xiàng)目中會兵分兩路，一路是語言的國際化，另一路主要為文化國際化

產(chǎn)品設(shè)計(jì)之初引入國際化標(biāo)準(zhǔn)，符合項(xiàng)目的開發(fā)流程。
國內(nèi)主要主要三點(diǎn)，一個(gè)是港澳臺采用中文繁體+英文，內(nèi)陸通俗中文簡體，新疆等地區(qū)采用文化標(biāo)準(zhǔn)。

Vue-I18n
Vue-I18n安裝
CDN:

NPM:

npm install vue-i18n --save-dev

vue-I18n暴露$t對象進(jìn)行應(yīng)用
項(xiàng)目例子（面向中國內(nèi)陸及港澳臺）

Main.js

import VueI18n from "vue-i18n"
/* 平臺國際語言靜態(tài)字典 */
import LangEn from "./lang/en"
import LangZhCHS from "./lang/zhCHS"
import LangZhCHT from "./lang/zhCHT"
/* vue-i18n注冊 */
Vue.use(VueI18n)
// 設(shè)置語言項(xiàng)
const i18n = new VueI18n({
  locale: "zhCHS",
  messages: {
    "en": LangEn,
    "zhCHS": LangZhCHS,
    "zhCHT": LangZhCHT
  }
})
/* eslint-disable no-new */
new Vue({
  el: "#app",
  i18n,
  components: { App },
  template: ""
})

zhCHS.js
通過exports

module.exports = {
  buttom: {
    cancel: "取消",
    determine: "確定",
    login: "登陸",
    signOut: "退出登陸",
    registered: "注冊",
    search: "查詢",
    submit: "提交",
    save: "保存"
  }
}

Example.vue
通過$t進(jìn)行數(shù)據(jù)綁定
例子中初始化先檢查瀏覽器默認(rèn)語言，并保存到localstorage中
通過this.$i18n.locale可以隨意切換版本

{{$t("buttom.cancel")}}

  
    中文
    format_align_left
  
  
    English
    format_color_text
  



  watch: {
    icon (val) {
      this.$i18n.locale = val
      this.setLocalStorage("PLAY_LANG", val)
    }
  },
  created () {
    let lang = this.getLocalStorage("PLAY_LANG")
    if (lang) {
      this.icon = lang
    } else {
      let defaultLang = this.getNavigatorLang()  // 獲取瀏覽器設(shè)置語言
      this.setLocalStorage("PLAY_LANG", defaultLang)
      this.icon = defaultLang
    }
  }

效果圖：
中文

英文

完整項(xiàng)目github地址：https://github.com/hty7/vue-d...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/94052.html

相關(guān)文章

  • 如何讓一個(gè)vue項(xiàng)目支持多語言（vue-i18n）

    摘要：引入是一個(gè)插件，主要作用就是讓項(xiàng)目支持國際化多語言。所以新建一個(gè)文件夾，存放所有跟多語言相關(guān)的代碼。目前包含三個(gè)文件。全局搜索發(fā)現(xiàn)一共有多個(gè)。 這兩天手頭的一個(gè)任務(wù)是給一個(gè)五六年的老項(xiàng)目添加多語言。這個(gè)項(xiàng)目龐大且復(fù)雜，早期是用jQuery實(shí)現(xiàn)的，兩年前引入Vue并逐漸用組件替換了之前的Mustache風(fēng)格模板。要添加多語言，不可避免存在很多文本替換的工作，這么龐雜的一個(gè)項(xiàng)目，怎么才能使...

    wuyumin 評論0 收藏0

  • vue-i18n和elementUI實(shí)現(xiàn)國際化

    摘要：為了滿足很多公司都已經(jīng)向方向發(fā)展顧使用多語言的網(wǎng)站已經(jīng)太普遍了所以是使用和實(shí)現(xiàn)國際化接下來我會盡量寫的詳細(xì)一點(diǎn)的內(nèi)容個(gè)人覺得的應(yīng)該寫得清楚一些安裝所需要用到的東西安裝安裝創(chuàng)建目錄編寫所需要用到的語言我只寫了中文和英文歡迎來到我 為了滿足很多公司都已經(jīng)向international方向發(fā)展,顧使用多語言的網(wǎng)站已經(jīng)太普遍了, 所以是使用vue-i18n和elementUI實(shí)現(xiàn)國際化.接下來我...

    _ang 評論0 收藏0

  • vue中使用國際化基礎(chǔ)使用

    摘要：方式使用引入要在之后引入使用你好當(dāng)前語言重新設(shè)置中文英文其他當(dāng)前語言切換語言效果項(xiàng)目中使用安裝使用入口文件增加以下代碼可以創(chuàng)建文件夾，拆分國際化文件最后引入國際化保存對象你好引用模板當(dāng)前語言切換語言當(dāng)前語言重新設(shè)置中文英文其他效 cdn方式使用 1.引入 vue-i18n要在vue之后引入 2.使用 js const messages = { zh_CN: { ...

    Kosmos 評論0 收藏0

  • vue 國際化i18n 多語言切換

    摘要：如果對您有幫助請動動鼠標(biāo)右下方給我來個(gè)贊，您的支持是我最大的動力。安裝 npm install vue-i18n 新建一個(gè)文件夾 i18n ，內(nèi)新建 en.js zh.js index.js 三個(gè)文件 準(zhǔn)備翻譯信息 en.js export default { home: { helloworld: hello workd ！ } }; zh.js export d...

    tuomao 評論0 收藏0

  • vue-i18n結(jié)合Element-ui的配置

    摘要：官網(wǎng)已經(jīng)做了詳細(xì)介紹，這里依葫蘆畫瓢跟著實(shí)現(xiàn)一下為了實(shí)現(xiàn)插件的多語言切換按照如上把國際化文件都整合到一起，避免中大段引入相關(guān)代碼。 使用方法： 在配合 Element-UI 一起使用時(shí)，會有2個(gè)問題： ####（1）、頁面刷新后，通過按鈕切換的語言還原成了最初的語言，無法保存 ####（2）、框架內(nèi)部自帶的提示文字無法更改，比如像時(shí)間選擇框內(nèi)部中的提示文字 關(guān)于第一個(gè)問題，可以在初始化...

    孫淑建 評論0 收藏0

發(fā)表評論

0條評論

2i18ns

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<