摘要:為了滿足很多公司都已經(jīng)向方向發(fā)展顧使用多語(yǔ)言的網(wǎng)站已經(jīng)太普遍了所以是使用和實(shí)現(xiàn)國(guó)際化接下來(lái)我會(huì)盡量寫的詳細(xì)一點(diǎn)的內(nèi)容個(gè)人覺(jué)得的應(yīng)該寫得清楚一些安裝所需要用到的東西安裝安裝創(chuàng)建目錄編寫所需要用到的語(yǔ)言我只寫了中文和英文歡迎來(lái)到我
為了滿足很多公司都已經(jīng)向international方向發(fā)展,顧使用多語(yǔ)言的網(wǎng)站已經(jīng)太普遍了, 所以是使用vue-i18n和elementUI實(shí)現(xiàn)國(guó)際化.接下來(lái)我會(huì)盡量寫的詳細(xì)一點(diǎn):
element-ui的i18n內(nèi)容 個(gè)人覺(jué)得的應(yīng)該寫得清楚一些 1.安裝所需要用到的東西npm i element-ui -S // 安裝element npm install --save vue-i18n //安裝i18n2. 創(chuàng)建目錄 3.編寫所需要用到的語(yǔ)言(我只寫了中文和英文) cn.js
const cn = { message: { i1: "歡迎來(lái)到我的項(xiàng)目", }, } export default cnen.js
const en = { message: { i1: "Welcome to my project", }, } export default en;
兩個(gè)js文件的json里的key命名必須是一樣的
i18n.jsimport 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)語(yǔ)言 messages }) locale.i18n((key, value) => i18n.t(key, value)) //為了實(shí)現(xiàn)element插件的多語(yǔ)言切換 export default i18nmain.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.使用 在頁(yè)面中使用" })
切換語(yǔ)言{{$t("message.i1")}}
this.$i18n.locale = "en"
項(xiàng)目地址 歡迎star
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/95642.html
摘要:直接上預(yù)覽鏈接國(guó)際化處理以及項(xiàng)目自動(dòng)切換中英文環(huán)境搭建命令進(jìn)入項(xiàng)目目錄,執(zhí)行以下命令安裝國(guó)際化插件項(xiàng)目增加國(guó)際化翻譯文件在項(xiàng)目的下添加文件夾增加中文翻譯文件以及英文翻譯文件,里面分別存儲(chǔ)項(xiàng)目中需要翻譯的信息。 0. 直接上 預(yù)覽鏈接 Vue國(guó)際化處理 vue-i18n 以及項(xiàng)目自動(dòng)切換中英文 1. 環(huán)境搭建 命令進(jìn)入項(xiàng)目目錄,執(zhí)行以下命令安裝vue 國(guó)際化插件vue-i18n...
摘要:官網(wǎng)已經(jīng)做了詳細(xì)介紹,這里依葫蘆畫瓢跟著實(shí)現(xiàn)一下為了實(shí)現(xiàn)插件的多語(yǔ)言切換按照如上把國(guó)際化文件都整合到一起,避免中大段引入相關(guān)代碼。 使用方法: 在配合 Element-UI 一起使用時(shí),會(huì)有2個(gè)問(wèn)題: ####(1)、頁(yè)面刷新后,通過(guò)按鈕切換的語(yǔ)言還原成了最初的語(yǔ)言,無(wú)法保存 ####(2)、框架內(nèi)部自帶的提示文字無(wú)法更改,比如像時(shí)間選擇框內(nèi)部中的提示文字 關(guān)于第一個(gè)問(wèn)題,可以在初始化...
摘要:前言上個(gè)月月底開源組開源了使用適配人人企業(yè)版專業(yè)版的前端工程具體詳情見人人企業(yè)版適配發(fā)布。當(dāng)然,也督促自己產(chǎn)出一篇相關(guān)的文章,來(lái)記錄這次有趣的學(xué)習(xí)之旅。 Created by huqi at 2019-5-5 13:01:14 Updated by huqi at 2019-5-20 15:57:37 前言 上個(gè)月月底@D2開源組 開源了使用 D2Admin 適配 人人企業(yè)版(專業(yè)版) 的...
摘要:在中引入調(diào)用第三方插件新建一個(gè)對(duì)象默認(rèn)語(yǔ)言配置語(yǔ)言選項(xiàng)是一個(gè)配置語(yǔ)言包文件和語(yǔ)言選項(xiàng)的文件,文件內(nèi)容大致如下語(yǔ)言包列表合并語(yǔ)言包是一個(gè)函數(shù),判斷當(dāng)前設(shè)置的語(yǔ)言類型,如果沒(méi)有設(shè)置語(yǔ)言,則根據(jù)判斷是中文還是非中文,非中文則顯示英語(yǔ)。 vue-i18n官網(wǎng) https://kazupon.github.io/vue... 項(xiàng)目用vue-cli構(gòu)建,用到vue全家桶及webpack、iview...
摘要:簡(jiǎn)介最近寫了一個(gè)基于權(quán)限管理系統(tǒng)的后臺(tái)模板,包含了正常項(xiàng)目開發(fā)所需的框架功能,開發(fā)者使用的時(shí)候只需要專注于項(xiàng)目的業(yè)務(wù)邏輯就好。同時(shí)接下來(lái)會(huì)讓你擁有一個(gè)自己完全掌控的框架。 簡(jiǎn)介 最近寫了一個(gè)基于vue2.0+element-ui權(quán)限管理系統(tǒng)的后臺(tái)模板,包含了正常項(xiàng)目開發(fā)所需的框架功能,開發(fā)者使用的時(shí)候只需要專注于項(xiàng)目的業(yè)務(wù)邏輯就好。同時(shí)接下來(lái)會(huì)讓你擁有一個(gè)自己完全掌控的框架。 源碼地址...
閱讀 1598·2021-11-04 16:11
閱讀 3309·2021-09-09 11:33
閱讀 1558·2019-08-30 15:54
閱讀 619·2019-08-30 15:44
閱讀 3174·2019-08-30 15:43
閱讀 2554·2019-08-30 13:06
閱讀 1698·2019-08-29 17:00
閱讀 895·2019-08-29 15:33