当前位置: 首页 > news >正文

vue-i18n使用步骤详解(含完整操作步骤)

开篇

下面是从创建vue项目开始,完整使用i18n实现国际化功能的步骤,希望对您有所帮助。

完整步骤

创建项目

  • 创建项目,并在创建项目的时候选择vuex,router
    在这里插入图片描述
  • 选择3.x版本
    在这里插入图片描述
  • 后面随意选即可,下面是完整的代码结构
    在这里插入图片描述

安装vue-i18n,并封装相关方法

  • 安装vue-i18n
npm install vue-i18n@next
  • 在src下新建i18n文件夹,并在该文件夹下新建lang文件夹,下面存放数据源(zh.json,en.json)
//zh.json
{"msg": {"hello": "你好,世界"}
}// en.json
{"msg": {"hello": "Hello World"}
}
  • 在src下创建i18n/index.js
import { createI18n } from "vue-i18n";
import zh from './lang/zh.json'
import en from './lang/en.json'
import store from '@/store'const messages = {zh,en
}// 返回当前lang
function getCurrentLang() {return store.getters.lang // 获取当前语言
}const i18n = createI18n({//这里选择false是为了配合使用vue3的composition API风格的新式API,//如果是vue2,就要选择true了legacy: false, globalInjection: true, // 全局注入locale: getCurrentLang(),messages
})export default i18n
  • 在vuex下添加一个模块来管理当前语言(store/index.js)
import { createStore } from 'vuex'export default createStore({state: {locale: 'en', // 默认语言},getters: {lang: state => state.locale},mutations: {SET_LOCALE(state, locale) {state.locale = locale}},actions: {setLocale({commit}, locale) {commit('SET_LOCALE', locale)}},modules: {}
})
  • 在main.js中注册i18n实例
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 注册i18n
import i18n from './i18n'createApp(App).use(store).use(router).use(i18n).mount('#app')

封装LangSelect组件,实现一键切换语言

  • 在src/components下新建LangSelect组件,并定义切换语言的方法
<template><div><select v-model="selectedLocale" @change="changeLang"><option value="en">English</option><option value="zh">中文</option></select></div>
</template><script>
import { computed } from "vue";
import {useStore} from 'vuex';
import {useI18n} from 'vue-i18n'export default {setup() {const store = useStore();const { locale } = useI18n();const selectedLocale = computed({get: () => store.state.locale,set: (value) => {store.dispatch('setLocale', value)locale.value = value; // 更改i18n语言}})const changeLang = () => {locale.value = selectedLocale.value}return {selectedLocale,changeLang}}
}
</script>
  • 在App.vue中引入并使用LangSelect.vue组件,实现一键切换语言
<template><div id="app"><LangSelect/><p>{{ $t('msg.hello') }}</p></div>
</template><script>
import LangSelect from './components/LangSelect.vue'export default {components: {LangSelect}
}
</script><style></style>
  • 当前效果如下:
    在这里插入图片描述
    在这里插入图片描述

以上便是vue-i18n的详细使用步骤,希望对您有所帮助。实际项目中,可能使用方式比上面复杂很多,比如说封装方法需要在store或者pinia中建立单独的模块,LangSelect组件样式要更复杂,但万变不离其宗,总体的步骤依然是上面这些。

相关文章:

vue-i18n使用步骤详解(含完整操作步骤)

开篇 下面是从创建vue项目开始&#xff0c;完整使用i18n实现国际化功能的步骤&#xff0c;希望对您有所帮助。 完整步骤 创建项目 创建项目&#xff0c;并在创建项目的时候选择vuex,router 选择3.x版本 后面随意选即可&#xff0c;下面是完整的代码结构 安装vue-i18n,并封装…...

XXE漏洞修补:保护您的系统免受XML外部实体攻击

引言 XML外部实体&#xff08;XXE&#xff09;漏洞是一种常见的网络安全问题&#xff0c;它允许攻击者通过XML文档中的实体引用读取服务器上的文件或发起远程服务器请求。这种漏洞可能被用于数据泄露、拒绝服务攻击&#xff08;DoS&#xff09;甚至远程代码执行。本文将探讨XX…...

去除upload的抖动效果

title: 去除upload的抖动效果 date: 2024-06-15 20:16:51 tags: vue3 在使用vue3element-plus框架的时候&#xff0c;常常会使用到el-upload方法。其中如果做了翻页效果可以发现图片过度方式是集中到左上角进行的翻页&#xff0c;这种效果不是很好&#xff0c;我们还是想让这中…...

什么是 Linux ?(Linux)

系列文章目录 第一章 什么是Linux&#xff1f; 文章目录 系列文章目录一、什么是 Linux &#xff1f;二、Linux 的发行版本总结 一、什么是 Linux &#xff1f; Linux&#xff08;Linux Is Not UniX&#xff09;&#xff0c;是一种免费使用和自由传播的类UNIX操作系统&#x…...

uni-app 怎么在tabbar使用阿里图标库

提示&#xff1a;微信小图标不支持使用字体图标的方式&#xff0c;只能下载png 方法一&#xff1a;直接下载png图片 我们首选打开阿里矢量图标库 链接在下方 &#x1f447; iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库&#xff0c;提供矢…...

勒索病毒剖析

2016年不自己勒索了 卖病毒 让别人勒索 傻瓜式勒索 黑客用的是非对称加密 全世界只有黑客有那把私钥 反向解密不了 传统爆破容易被检测&#xff0c;黑客慢速爆破&#xff0c;利用超级多的僵尸进行试错&#xff0c;慢慢试出来账号密码 因为一般运维设备在防火墙的白名单里&…...

【C++11】第一部分(一万六千多字)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 C11简介 统一的列表初始化 &#xff5b;&#xff5d;初始化 std::initializer_list 声明 auto decltype 右值引用和移动语义 左值引用和右值引用 左值引…...

FPGA专项课程即将开课,颁发AMD官方证书

社区成立以来&#xff0c;一直致力于为广大工程师提供优质的技术培训和资源&#xff0c;得到了众多用户的喜爱与支持。为了满足用户需求&#xff0c;我们特别推出了“基于Vitis HLS的高层次综合及图像处理开发”课程。 本次课程旨在帮助企业工程师掌握前沿的FPGA技术&#xff…...

C++ shared_ptr

shared_ptr共享它指向的对象&#xff0c;多个shared_ptr可以指向&#xff08;关联&#xff09;相同的对象&#xff0c;在内部采用计数机制来实现。 当新的shared_ptr与对象关联时&#xff0c;引用计数增加1。 当shared_ptr超出作用域时&#xff0c;引用计数减1。当引用计数变为…...

2024.6.15

2024.6.15 【夜幽幽&#xff0c;月优优&#xff0c;曲悠悠&#xff0c;吾忧忧。】 Saturday 五月初十 <theme oi-“DP”> 看几道DP基础题&#xff0c; 巩固一下DP思路和基础 Coin Combinations I //2024.6.15 //by white_ice //Coin Combinations I CSES - 1635 #i…...

堆栈溢出的攻击 -fno-stack-protector stack smash 检测

在程序返回的一条语句堆栈项目处&#xff0c;用新函数的起始地址覆盖&#xff0c;将会跳转到执行新函数。 现在系统对这个行为做了判断&#xff0c;已经无法实施这类攻击或技巧。 1&#xff0c;测试代码 #include <stdio.h> void cc() {printf("I am cc( )\n"…...

掌握特劳特定位理论核心,明晰企业战略定位之重

在当今瞬息万变的市场环境中&#xff0c;企业战略定位的重要性日益凸显。它不仅是企业在激烈竞争中保持优势的关键&#xff0c;更是企业实现长期可持续发展的基石。 哈佛大学战略学教授迈克尔波特&#xff08;Michael Porter&#xff09;指出战略就是形成一套独具的运营活动&a…...

RAGFlow 学习笔记

RAGFlow 学习笔记 0. 引言1. RAGFlow 支持的文档格式2. 嵌入模型选择后不再允许改变3. 干预文件解析​4. RAGFlow 与其他 RAG 产品有何不同&#xff1f; ​5. RAGFlow 支持哪些语言&#xff1f; ​6. 哪些嵌入模型可以本地部署&#xff1f; ​7. 为什么RAGFlow解析文档的时间比…...

使用Docker-Java监听Docker容器的信息

使用Docker-Java监听Docker容器的信息 Docker作为一种轻量级的容器化平台&#xff0c;极大地方便了应用的部署与管理。然而&#xff0c;在实际使用过程中&#xff0c;我们常常需要对运行中的容器进行监控&#xff0c;以确保其健康状态&#xff0c;并能及时响应各种异常情况。本…...

Spring Boot + Mybatis Plus实现登录注册

Spring Boot 实现登录注册 1. 注册 业务逻辑 客户端输入注册时需要的用户参数&#xff0c;比如&#xff1a;账户名、密码、确认密码、其他服务端接收到客户端的请求参数进行校验&#xff0c;然后判断是否有误&#xff0c;有误的地方就将错误信息抛出将密码进行加密之后存储到…...

IDEA创建web项目

IDEA创建web项目 第一步&#xff1a;创建一个空项目 第二步&#xff1a;在刚刚创建的项目下创建一个子模块 第三步&#xff1a;在子模块中引入web 创建结果如下&#xff1a; 这里我们需要把这个目录移到main目录下&#xff0c;并改名为webapp&#xff0c;结果如下 将pom文件…...

二手物品交易系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;商家管理&#xff0c;用户管理&#xff0c;商品管理&#xff0c;用户咨询管理 商家账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;商品管理&#xff0c;用…...

探索大数据在信用评估中的独特价值

随着我国的信用体系越来越完善&#xff0c;信用将影响越来越多的人。现在新兴的大数据信用和传统信用&#xff0c;形成了互补的优势&#xff0c;大数据信用变得越来越重要&#xff0c;那大数据信用风险检测的重要性主要体现在什么地方呢?本文将详细为大家介绍一下&#xff0c;…...

MFC基础学习应用

MFC基础学习应用 1.基于对话框的使用 左上角为菜单键&#xff08;其下的关于MFC主要功能由IDD_ABOUTBOX决定) 附图 右下角为按钮&#xff08;基本功能由IDD_DIALOG决定,添加按钮使用由左上角的工具箱完成) 附图 2.自行添加功能与按钮//功能代码 void CMFCApplication4Dlg:…...

Gradle实现类似Maven的profiles功能

版本说明 GraalVM JDK 21.0.3Gradle 8.7Spring Boot 3.2.5 目录结构 指定环境打包 application.yml/yaml/properties 执行 bootJar 打包命令前要先执行 clean【其它和 processResources 相关的命令也要先执行 clean】&#xff0c;否则 active 值不会变&#xff01; spring…...

【SOC】Fastboot /DFU 烧录镜像

uboot下 使用fastboot 进行 UFS/EMMC/nand 设备烧录的大致流程&#xff1a; board 进入 uboot&#xff08;支持 fastboot&#xff09;&#xff1b; 同时host机器安装上 fastboot 客户端 ; 2者&#xff08;board与host&#xff09;之间通过usb线连接,通过fastboot 协议进行交互…...

开源电池管理系统:SmartBMS的技术创新与实践应用

开源电池管理系统&#xff1a;SmartBMS的技术创新与实践应用 【免费下载链接】SmartBMS Open source Smart Battery Management System 项目地址: https://gitcode.com/gh_mirrors/smar/SmartBMS SmartBMS是一套开源智能电池管理系统&#xff0c;专为锂离子电池组&#…...

Anaconda+AKShare保姆级教程:5分钟搞定Python量化环境(附常见报错解决方案)

AnacondaAKShare极速配置指南&#xff1a;零基础搭建Python量化环境全攻略 刚接触量化投资的新手们&#xff0c;往往在第一步——环境搭建上就卡壳了。明明跟着教程一步步操作&#xff0c;却总是遇到各种报错提示&#xff0c;让人望而生畏。本文将手把手带你用Anaconda和AKSha…...

实战构建开放数据可视化平台,从采集到展示的全流程开发指南

今天想和大家分享一个完整的开放数据可视化项目实战经验。这个项目从数据采集到最终展示&#xff0c;涵盖了全流程开发的关键环节&#xff0c;特别适合想积累真实项目经验的朋友参考。 项目背景与目标 开放数据正在成为数字化转型的重要资源&#xff0c;但很多开发者面对海量…...

提升钱包开发效率:用快马AI一键生成imToken风格的高复用UI组件

提升钱包开发效率&#xff1a;用快马AI一键生成imToken风格的高复用UI组件 开发钱包类应用时&#xff0c;最让人头疼的就是那些重复性的UI组件和交互逻辑。每次新项目都要从零开始写资产卡片、交易记录列表、二维码弹窗这些基础组件&#xff0c;不仅耗时耗力&#xff0c;还容易…...

Untrunc:10倍速视频修复工具,让损坏的MP4/MOV文件起死回生

Untrunc&#xff1a;10倍速视频修复工具&#xff0c;让损坏的MP4/MOV文件起死回生 【免费下载链接】untrunc Restore a truncated mp4/mov. Improved version of ponchio/untrunc 项目地址: https://gitcode.com/gh_mirrors/un/untrunc 你是否曾经因为视频文件损坏而失去…...

车辆信号震动信号的滤波、幅值与能量分析——基于测试台采集文件ssjlbpp.m等的研究

车辆信号的震动信号的滤波、幅值以及能量分析&#xff0c;信号是利用测试台采集回来的 文件列表&#xff1a; ssjlbpp.m cxssjlbpp.m ssj.m fuzhissj.m翻了翻硬盘里压箱底的车辆测试台数据&#xff0c;哦对&#xff0c;还有那堆当时随手起的.mat之外的.m文件&#xff1a;ssjlbp…...

二极管限幅与钳位电路设计原理与应用

基于二极管的限幅与钳位电路设计精解1. 二极管基础特性与工程应用1.1 单向导电特性分析二极管作为半导体器件的基础元件&#xff0c;其核心特性是单向导电性。当正向偏置电压超过导通阈值&#xff08;硅管约0.7V&#xff09;时呈现低阻态&#xff0c;反向偏置时则保持高阻态。这…...

LangChainJS审计日志:AI操作可追溯性的完整指南

LangChainJS审计日志&#xff1a;AI操作可追溯性的完整指南 【免费下载链接】langchainjs 项目地址: https://gitcode.com/GitHub_Trending/la/langchainjs 在当今AI应用开发中&#xff0c;确保AI操作的可追溯性和透明性至关重要。LangChainJS提供了强大的审计日志系统…...

图表数据提取的智能转换革命:从像素到数据点的精准跨越

图表数据提取的智能转换革命&#xff1a;从像素到数据点的精准跨越 【免费下载链接】WebPlotDigitizer WebPlotDigitizer: 一个基于 Web 的工具&#xff0c;用于从图形图像中提取数值数据&#xff0c;支持 XY、极地、三角图和地图。 项目地址: https://gitcode.com/gh_mirror…...