成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

_ang / 2681人閱讀

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

為了滿足很多公司都已經(jīng)向international方向發(fā)展,顧使用多語言的網(wǎng)站已經(jīng)太普遍了, 所以是使用vue-i18n和elementUI實現(xiàn)國際化.接下來我會盡量寫的詳細(xì)一點:

element-ui的i18n內(nèi)容 個人覺得的應(yīng)該寫得清楚一些 1.安裝所需要用到的東西 
npm i element-ui -S  // 安裝element

npm install --save vue-i18n //安裝i18n
2. 創(chuàng)建目錄

3.編寫所需要用到的語言(我只寫了中文和英文) cn.js 
const cn = {
  message: {
      i1: "歡迎來到我的項目",
  },
}


export default cn
en.js 
const en = {
  message: {
      i1: "Welcome to my project",
  },
}


export default en;

兩個js文件的json里的key命名必須是一樣的

i18n.js 
import Vue from "vue"
import locale from "element-ui/lib/locale";
import VueI18n from "vue-i18n"
import en from "./langs/en"
import cn from "./langs/cn"
Vue.use(VueI18n)

const messages = {
  en: en,
  cn: cn
}

const i18n = new VueI18n({
  locale: "cn", // 設(shè)置默認(rèn)語言
  messages
})
locale.i18n((key, value) => i18n.t(key, value)) //為了實現(xiàn)element插件的多語言切換

export default i18n
main.js 

import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css";
import i18n from "./assets/i18n/i18n"
Vue.use(ElementUI);

new Vue({
  el: "#app",
  router,
  i18n,
  components: { App },
  template: ""
})
4.使用 在頁面中使用 
    
{{$t("message.i1")}}
切換語言 
        this.$i18n.locale = "en"

項目地址 歡迎star

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95642.html

相關(guān)文章

  • Vue國際化處理 vue-i18n 以及項目自動切換中英文

    摘要：直接上預(yù)覽鏈接國際化處理以及項目自動切換中英文環(huán)境搭建命令進(jìn)入項目目錄，執(zhí)行以下命令安裝國際化插件項目增加國際化翻譯文件在項目的下添加文件夾增加中文翻譯文件以及英文翻譯文件，里面分別存儲項目中需要翻譯的信息。 0. 直接上 預(yù)覽鏈接 Vue國際化處理 vue-i18n 以及項目自動切換中英文 1. 環(huán)境搭建 命令進(jìn)入項目目錄，執(zhí)行以下命令安裝vue 國際化插件vue-i18n...

    wangtdgoodluck 評論0 收藏0

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

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

    孫淑建 評論0 收藏0

  • 記一次開源學(xué)習(xí)--D2Admin 人人企業(yè)版

    摘要：前言上個月月底開源組開源了使用適配人人企業(yè)版專業(yè)版的前端工程具體詳情見人人企業(yè)版適配發(fā)布。當(dāng)然，也督促自己產(chǎn)出一篇相關(guān)的文章，來記錄這次有趣的學(xué)習(xí)之旅。 Created by huqi at 2019-5-5 13:01:14 Updated by huqi at 2019-5-20 15:57:37 前言 上個月月底@D2開源組 開源了使用 D2Admin 適配 人人企業(yè)版(專業(yè)版) 的...

    notebin 評論0 收藏0

  • 基于Vue、vue-i18n實現(xiàn)國際化（多語言）

    摘要：在中引入調(diào)用第三方插件新建一個對象默認(rèn)語言配置語言選項是一個配置語言包文件和語言選項的文件，文件內(nèi)容大致如下語言包列表合并語言包是一個函數(shù)，判斷當(dāng)前設(shè)置的語言類型，如果沒有設(shè)置語言，則根據(jù)判斷是中文還是非中文，非中文則顯示英語。 vue-i18n官網(wǎng) https://kazupon.github.io/vue... 項目用vue-cli構(gòu)建，用到vue全家桶及webpack、iview...

    smallStone 評論0 收藏0

  • Vue2.0 + ElementUI 手寫權(quán)限管理系統(tǒng)后臺模板（一）——簡述

    摘要：簡介最近寫了一個基于權(quán)限管理系統(tǒng)的后臺模板，包含了正常項目開發(fā)所需的框架功能，開發(fā)者使用的時候只需要專注于項目的業(yè)務(wù)邏輯就好。同時接下來會讓你擁有一個自己完全掌控的框架。 簡介 最近寫了一個基于vue2.0+element-ui權(quán)限管理系統(tǒng)的后臺模板，包含了正常項目開發(fā)所需的框架功能，開發(fā)者使用的時候只需要專注于項目的業(yè)務(wù)邏輯就好。同時接下來會讓你擁有一個自己完全掌控的框架。 源碼地址...

    _ivan 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<