(壹)笔记：五种不同场景下国际化(Vue I18n)的设置

已于 2022-11-21 22:11:22 修改
阅读量345 收藏
点赞数 2
分类专栏： Vue(Vue2+Vue3)面试必备专栏 文章标签： vue.js javascript 前端 国际化 经验分享
于 2022-10-12 23:24:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43405300/article/details/127141650
版权
本文详细介绍了在Vue项目中进行国际化(i18n)配置的五个不同场景，包括在组件或模板中的使用，静态与动态绑定的实现，以及特定情况下的应用。通过具体的代码展示，帮助读者理解如何在各种情况下灵活运用Vue I18n进行国际化设置。
摘要由CSDN通过智能技术生成

1、在 html 或 el-button 中国际化的使用(场景一)：

其一、在 html 中使用国际化的代码展示：

<div>
  {
   {
   $t('spmp.add')}}
</div>

了解本专栏 订阅专栏 解锁全文 超级会员免费看
狮子座的男孩
关注
专栏目录
订阅专栏
vue学习笔记
m0_61989957的博客
03-14 156
父组件定义修饰符//父组件 < MyComponent v - model . capitalize = "bookTitle" / >子组件声明属性和触发事件、自定义功能触发函数//子组件 const props = defineProps({//父组件 < MyComponent v - model : title . capitalize = "bookTitle" / >//子组件 const props = defineProps({当构建前端应用时，我们常常需要复用公共任务的逻辑。
i18n在4种常见环境下使用的方式
Polly
06-10 1544
1、html html使用方式是最常见的，直接写成 {{$t(‘xxx.xxxx’)}},渲染是会自动去翻译脚本里面进行匹配 如果我翻译脚本是 xxx:{ xxxx:‘hello’ } {{$t(‘xxx.xxxx’)}}渲染出来就是：hello 2、js js中应该加上指针this，即this.$t(‘xxx.xxxx’) 3、element-ui 如果是element-ui 的，在要翻译的前面...
vue国际化（多语言）
ZhouHuiCSDN
06-08 9141
vue国际化（多语言）
vxe-table 国际化的使用、支持多语言 internationalization
大猩猩X
09-29 2829
vxe-table 国际化的使用、支持多语言 internationalization 先安装 vue-i18n 国际化插件 npm install vue-i18n import Vue from 'vue' import VueI18n from 'vxe-i18n' import VXETable from 'vxe-table' import zhCN from 'vxe-table/lib/locale/lang/zh-CN' import enUS from 'vxe-table/lib/
Element的按钮el-button，回到顶部
公z号：职场爱学习
06-23 787
<el-button class=“linkWayBtn” @click=“toTop”> 回到顶部 .linkWayBtn { width: 64px; height: 64px; font-size: 12px; font-family: 微软雅黑; color: #FFFFFF; background-color: #2674bc; padding: 10px 5px; text-align: center; border-radius: 5px; border: none; }
Vue+Element 国际化(i18n)
qq_41842461的博客
08-17 1453
Vue+Element 国际化(i18n)，form表单规则验证国际化($t)
个人笔记(vue2,3个人笔记)
11-03
9. **Vue I18n**：国际化的插件，使得应用能够轻松支持多语言环境。 在Vue 2到Vue 3的迁移过程中，开发者需要注意的主要变化有： - **Composition API**：Vue 3默认使用Composition API，而不是Options API。这...
Vue.js:Vue一站式学习笔记加原始码：基础+进阶+完整的演示+生态圈+项目-项目
03-24
4. **插件与生态系统**：Vue拥有丰富的第三方插件，如axios（HTTP客户端）、element-ui（UI组件库）、vue-i18n（国际化支持）等，它们极大地扩展了Vue的功能。 5. **服务端渲染（SSR）**：Vue Server Renderer允许...
千锋2020vue资料
01-04
6. **Vue生态与插件**：Vue拥有丰富的生态系统，如Vuex Persistence用于持久化Vuex状态，Vue-i18n进行国际化，axios用于异步请求等。了解和掌握这些插件的使用，能够极大地丰富和提升Vue应用的功能。 7. **实战项目...
循序渐进VUE+Element 前端应用开发(9）--- 界面语言国际化的处理(1)
最新发布
2401_84092360的博客
04-10 949
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可领取你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难。
vue2+element-ui 实现国际化
qq_45780736的博客
02-02 2491
vue2+element-ui实现项目语言国际化
Vite2+Vue3学习笔记（四）：引入Vue-i18n并实现按钮切换页面语言
YGいくこさん的博客
11-27 4143
新手小白Vue3学习笔记第四篇，在项目中使用Vue-i18n，实现按钮实时切换页面及组件内部语言。
前端学习（2347）：创建新页面和配置
歌谣的博客
10-04 785
pages.json { "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path" : "pages/message/message", "style" : { "navigationBarTitleText": "信息页", "navigationBarBackgroundColor": "#7FFF00", "h5":{ ..
vue3使用i18n集成 vue3+vite+i18n+pinia的使用 国际化 setup语法糖
qq_43813351的博客
03-03 1594
【代码】vue3使用i18n集成 vue3+vite+i18n+pinia的使用 国际化 setup语法糖。
vue项目中实现国际化
alice9999999的博客
11-10 2020
vue国际化
element国际化
ct5211314的博客
03-23 893
新建lang文件夹，在文件夹内创建zh.js、en.js、index.js文件 zh.js文件说明：用于配置需要中英文转换的中文部分 en.js文件说明：用于配置需要中英文转换的英文部分 index.js文件说明：用于设置国际化 在main.js文件中引入并挂载到Vue实例上去 三、切换中英文展示
vxe-table国际化
qq_1872583947的博客
04-22 1437
在使用vxe-table时需要用到国际化 vxe-table组件国际化 自定义部分 那么怎么配置呢？ 1、安装vue-i18n npm i -S vue-i18n 2、新建lang文件夹 目录结构 index.js i18n基本配置 import Vue from 'vue' import VueI18n from 'vue-i18n' // 引入vxe-table的组件国际化 import zhCN from 'vxe-table/lib/locale/lang/zh-CN.js' impo
手把手教程 vue-i18n element实现国际化语言切换
qq_43555948的博客
11-04 1659
vue-i18n 国际化语言切换 在项目开发时，会有各国国家语言切换的需求，这里我使用了i18n来实现项目国际化。 i18n安装 在项目更目录下运行（我个人使用的是cnpm）: npm install vue-i18n 创建语言包 根据自己实际情况在src下创建语言包目录 整理语言包json如下（此处举例中文包）： 整理完中文包，就把整个json发给翻译小姐姐，这样我们就有了英文语言包。 main.js中引入 //引入国际化语言包 import VueI18n from 'vue-i18n' Vue.
Vue.js应用的国际化实现：vue-i18n配置与使用教程
为了实现应用程序的多语言支持，Vue 社区开发了 vue-i18n 这个插件，使得 Vue 应用能够轻松地进行国际化（i18n）设置。 1. 安装 vue-i18n 对于 Vue 2.x 版本，你应该安装 `vue-i18n` 的小于 9 的版本。可以使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

狮子座的男孩

如果可以，请我喝杯咖啡吧！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值