vue3-TS-使用i18n國際化

2022-01-01 影之曉毅
vue3-TS-使用i18n國際化

main.ts

import VueI18n from "@/plugins/i18n";
app.use(VueI18n)
i18n.ts
import {createI18n} from "vue-i18n";
import LangViVN from '../libs/lang/vi-VN.js'
import LangZHCN from '../libs/lang/zh-CN.js'

const i18n =createI18n({
    locale:process.env.VUE_APP_LANGUAGE,
    messages:{
        'vi-vn':LangViVN,
        'zh-cn':LangZHCN,
    }
})
export default i18n
使用方法1:template標籤中直接使用$t
   <acCell :name="$t('GroupAnnouncement')"  color=''  :val="$t('AnnouncementContent')"  />
使用方法2:ts與js混合，js文件中
import VueI18n from "@/plugins/i18n";
Toast(VueI18n.global.t('upload4Files'))
setup 函數中
import { useI18n } from "vue-i18n";
 country: useI18n().t('China'),
ts文件中使用
import {i18n} from "@/utils/js/method";
 Toast( i18n.requestTimeout)

相關焦點

  • 【Vuejs】802- 如何區別 Vue2 和 Vue3 ?
    Vue 3 的 Template 支持多個根標籤，Vue 2 不支持Vue 3 有 createApp()，而 Vue 2 的是 new Vue()createApp(組件)，new Vue({template, render})v-model代替以前的v-model和.sync
  • 可能是史上最全面的學習資源 — VUE 開源庫篇(一)
    61、vue-charts ★101 - 輕鬆渲染一個圖表https://github.com/hchstera/vue-charts62、vue-swiper ★95 - 易於使用的滑塊組件https://github.com/weilao/vue-swiper63、vue-images ★93 - 顯示一組圖片的lightbox
  • 2021, 九款值得推薦的VUE3 UI框架
    Element+官方網站：https://element-plus.org/#/zh-CNElement+ 已經在 Vue2 中聲名鵲起，Element+ 為 Vue3 帶來了大量不引人注目的組件，創建一個非常複雜的應用程式所需的大部分內容都已經製作完成並可供使用。
  • 如何使用vue3搭建項目框架並運行
    打開Git命令窗口2、使用npm命令安裝vue/cli，這裡需要使用--force；由於之前安裝了vue2下的vue cli，需要覆蓋之前的npm install -g @vue/cli --force3、使用npm init初始化項目，命令為：npm init vite-app
  • 尤雨溪介紹 Vue 3:語法不變、TS 支持很好、2.0 系列還會發一個版本
    首先，beta 階段意味著：已合併所有計劃內的 RFC已實現所有被合併的 RFCVue CLI 現在通過 vue-cli-plugin-vue-next 提供了實驗性支持此外還提供了一個用於 Vue 3 的最小化 webpack 配置，支持單文件組件其中有一個主要的 RFC 是關於新引入的
  • Vue全家桶之Vue2.X和Vue3.X腳手架創建項目的不同方式
    Vue 的基礎語法 ，常用特性 ，組件化開發以及路由的使用前面的文章已經全部介紹了，同時也介紹了如何使用webpack的一些依賴loaders和插件來一步步創建項目的。今天來介紹一些如何使用vue腳手架來創建項目通過腳手架Vue cli 腳手架來創建項目有三種方式：1.基於 交互式命令行 的方式，創建 Vue項目 使用命令 vue create my-project （基於Vue cli 3.X以上版本 npm install
  • 使用腳手架3創建的vue項目配置成多頁面的簡單案例
    前言：使用腳手架創建的vue項目工程默認是屬於單頁面單入口的，有時根據開發需要，經常要求將傳統的單入口頁面改成多入口多頁面的項目，其實腳手架3創建的vue項目，官方提供了一個叫pages的對象，我們可以自行創建一個vue.config.js文件，在裡邊進行一些配置，如，
  • Vue 3 的最新進展
    可以認為 Vue 3 core 已到達穩定狀態，並為 RC 版本做好了準備。Vue Router目前存在部分與 vue-router@3.x 相關的路由鉤子(router hook)行為一致性問題，這也是 Vue Router 沒有被標記為 Beta 的原因。
  • Vue 3.0 Beta
    進入 Beta 階段即意味著： 已合併所有計劃內的 RFC 已實現所有被合併的 RFC Vue CLI 現在通過 vue-cli-plugin-vue-next提供了實驗性支持 此外還提供了一個用於 Vue 3 的最小化 webpack 配置，支持單文件組件目前的版本需要在 runtime 環境中使用原生的 ES2015+，並且尚未支持 IE11，計劃進入 RC 階段後再進行兼容 IE11 的構建。
  • vue-devtools調試工具安裝與使用的簡單教程
    使用vue開發項目時，如果習慣vue當前項目一些操作後相關數據的變化的log，可以安裝一個vue-devtools調試工具，如何安裝呢？請看下邊：一：下載與安裝：1.下載好vue-devtools壓縮包(crx類型的壓縮包)，直接解壓到你自己選擇的本地目錄中：2.打開谷歌瀏覽器，打開設置，並找到擴展程序：3.
  • 如何在vue項目中使用sass並設置元素樣式
    elementJavaScriptsassCSS3 在創建vue框架項目時，可以使用CSS3定義元素樣式；還可以使用sass動態變量定義元素樣式如果直接使用sass，啟動項目會出現報錯。那麼，如何在vue項目中使用sass？
  • [vue3]如何在vue3中優雅地使用v-model?
    在同時使用v-bind和v-model中，v-model建立的雙向綁定對輸入型元素input, textarea, select等具有優先權，會強制實行雙向綁定。很多時候v-model使用在表單的<input>中實現雙向綁定。
  • Vue 3.0 語法快速入門
    作為前端開發者，這幾天想必大家都看到了Vue3.0的beta版新聞了，是的，尤大大在4.17號微博曬出了Vue3.0的beta連結，不少FEer開始興奮，不過也有不少其它聲音：『我學不動了』、『這不就是React』、『啥時候出正式版』；Vue3.0-beta連結：https://github.com/vuejs/
  • 「React TS3 專題」從創建第一個 React TypeScript3 項目開始
    但是今時不同往日，React和vue都在積極的跟進選用和 TypeScript 進行整合，這是未來前端框架的趨勢不可逆轉，這可不是學不學的問題，不學 TypeScript，未來有可能就用不上最新的版本。
  • Vue2和Vue3使用層面上的區別總結
    Vue 3 的 Template 支持多個根標籤，Vue 2 不支持Vue 3 有 createApp()，而 Vue 2 的是 new Vue()createApp(組件)，new Vue({template, render})v-model代替以前的v-model和.sync
  • Unity I18N 小探
    如果需要相關信息， W3C i18n 小組下的內容對此會十分有幫助[2]。和翻譯人員對接部分，目前來看，業界主要以通過翻譯外包的形式將本地化任務託管給其他公司。這些公司往往要求提供 key-value 形式的多語言數據文件（如 xml/csv/xls）給他們。如果你在第一步的時候就已經決定用這樣的方式來組織你的多語言文本，正好可以一勞永逸。
  • Vue 3 首個 RC 版本發布
    現在，大部分的官方框架組件已支持 Vue 3，點此查看最新狀態。新的文檔Vue 文檔團隊已對 v3 版本的文檔進行更新，現在可以在 v3.vuejs.org 查看。其界面具有使用 Tailwind CSS 實現的新外觀。當前的功能比較單一，僅支持對組件進行檢查，不過官方表示很快會推出更多功能。現在可以在 Chrome Web Store 上使用 Vue Devtools Beta 版（要求 Vue 3.0.0-rc.1）。
  • vue中mixins的使用方法和注意點(詳)
    mixins基礎概況vue中的解釋是這樣的，如果覺得語言枯燥的可以自行跳過嘿~
  • 使用vue封裝一個九宮格抽獎模塊插件
    實現這個功能要注意幾點我們知道一組list數據每一項的下標是按照0,1,2,3...排列的,想要讓獎品信息可以按照順時針排列
  • 使用electron+vue開發一個跨平臺todolist(便籤)桌面應用
    # 1最近一直在使用electron開發桌面應用，對於一個web開發者來說，html+javascript+css的開發體驗讓我非常舒服。之前我一直簡單的以為electron只是張網頁加個殼，和那些號稱跨平臺的運行在手機上的webapp是一個套路。