Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
1、前言
在 Vue 3 项目中结合 vue-i18n 和 Element Plus 实现中英文切换是一个常见的需求。下面是一个详细的步骤指南,帮助你完成这个任务。
安装引入
1. 安装依赖
首先,你需要安装 vue-i18n 和 Element Plus。
npm install vue-i18n@next element-plus --save
第二步骤:安装vue-i18n
// npm
npm install vue-i18n@9// yarn
yarn add vue-i18n@9
2. 创建国际化文件
在项目中创建一个文件夹 locales,然后在里面创建两个文件:en.js 和 zh.js,分别用于存储英文和中文的翻译。
locales/en.js

第三步: 在index.js里,引入vue-i18n,并进行相关配置后导出
export default {message: {hello: 'Hello, world!'},button: {submit: 'Submit'},// 其他翻译
};
locales/zh.js
export default {message: {hello: '你好,世界!'},button: {submit: '提交'},// 其他翻译
};
3. 配置 vue-i18n
在 main.js 或 main.ts 文件中配置 vue-i18n。
main.js 或 main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { createI18n } from 'vue-i18n';
import en from './locales/en';
import zh from './locales/zh';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';const messages = {en: en,zh: zh
};const i18n = createI18n({locale: 'zh', // 默认语言messages,
});const app = createApp(App);app.use(i18n);
app.use(ElementPlus);app.mount('#app');
4. 使用 vue-i18n 进行翻译
在你的 Vue 组件中使用 $t 方法进行翻译。
App.vue
<template><div><h1>{{ $t('message.hello') }}</h1><el-button>{{ $t('button.submit') }}</el-button><el-select v-model="currentLocale" @change="changeLocale"><el-option label="English" value="en"></el-option><el-option label="中文" value="zh"></el-option></el-select></div>
</template><script>
export default {data() {return {currentLocale: this.$i18n.locale,};},methods: {changeLocale() {this.$i18n.locale = this.currentLocale;}}
};
</script>
5. 配置 Element Plus 国际化
为了让 Element Plus 的组件也支持国际化,你需要在 main.js 或 main.ts 中配置 Element Plus 的国际化
import { createApp } from 'vue';
import App from './App.vue';
import { createI18n } from 'vue-i18n';
import en from './locales/en';
import zh from './locales/zh';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
import enUs from 'element-plus/lib/locale/lang/en';const messages = {en: {...en,...enUs},zh: {...zh,...zhCn}
};const i18n = createI18n({locale: 'zh', // 默认语言messages,
});const app = createApp(App);app.use(i18n);
app.use(ElementPlus, {locale: i18n.global.locale === 'zh' ? zhCn : enUs,
});app.mount('#app');
6. 运行项目
完成上述配置后,你可以运行项目并测试中英文切换功能。
npm run serve
总结
通过以上步骤,你已经成功地在 Vue 3 项目中结合 vue-i18n 和 Element Plus 实现了中英文切换功能。你可以根据项目需求进一步扩展和优化这个功能。
相关文章:
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
1、前言 在 Vue 3 项目中结合 vue-i18n 和 Element Plus 实现中英文切换是一个常见的需求。下面是一个详细的步骤指南,帮助你完成这个任务。 安装引入 1. 安装依赖 首先,你需要安装 vue-i18n 和 Element Plus。 npm install vue-i18nnext element-p…...
python实现猜数字游戏( 可视化easygui窗口版本 )
1.先上源代码 import random import easygui as egdef guess_ordinary():answer random.randint(0, 11)user_answer int(eg.enterbox(msg "请在0-10中选择一个整数: ", title "猜数字"))if user_answer answer:eg.msgbox(msg "恭喜你ÿ…...
自由学习记录(23)
Lua的学习 table.concat(tb,";") 如果表里带表,则不能拼接,表里带nil也不能,都会报错 true和false也不可以,数字和字符串可以 if要和一个end配对,所以 if a>b then return true end end 两个end …...
Java语言程序设计 选填题知识点总结
第一章 javac.exe是JDK提供的编译器public static void main (String args[])是Java应用程序主类中正确的main方法Java源文件是由若干个书写形式互相独立的类组成的Java语言的名字是印度尼西亚一个盛产咖啡的岛名Java源文件中可以有一个或多个类Java源文件的扩展名是.java如果…...
鸿蒙生态:开发者的新蓝海与挑战
🧑 博主简介:CSDN博客专家,历代文学网(PC端可以访问:https://literature.sinhy.com/#/literature?__c1000,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,…...
4.3 MySQL 存储函数
存储函数是一种数据库对象,允许用户将常用的 SQL 逻辑封装为可复用的函数,通过调用函数完成特定的计算或业务逻辑。 1. 简介 1.1 什么是存储函数 存储函数(Stored Function)是用户定义的一段 SQL 逻辑,返回一个值&am…...
【Python刷题】动态规划相关问题
动态规划(Dynamic Programming,简称 DP)是一种用于解决多阶段决策最优化问题的算法策略。它通过把原问题分解为相对简单的子问题,记录子问题的解(通常使用表格等数据结构存储),避免重复计算&…...
2024年9月中国电子学会青少年软件编程(Python)等级考试试卷(六级)答案 + 解析
一、单选题 1、下面代码运行后出现的图像是?( ) import matplotlib.pyplot as plt import numpy as np x np.array([A, B, C, D]) y np.array([30, 25, 15, 35]) plt.bar(x, y) plt.show() A. B. C. D. 正确答案:A 答案…...
论文阅读:SIMBA: single-cell embedding along with features
Chen, H., Ryu, J., Vinyard, M.E. et al. SIMBA: single-cell embedding along with features. Nat Methods 21, 1003–1013 (2024). 论文地址:https://doi.org/10.1038/s41592-023-01899-8 代码地址:https://github.com/pinellolab/simba. 摘要 大多…...
d3-quadtree 的属性、方法、示例
D3.js 的 d3-quadtree 模块提供了用于构建二维空间索引的数据结构,即四叉树(Quadtree)。四叉树可以高效地存储和查询大量点数据。下面列出了 d3-quadtree 的主要属性和方法,并提供了一个简单的 Vue 组件示例,展示如何使…...
初次体验加猜测信息安全管理与评估国赛阶段训练习
[第一部分] 网络安全事件响应 window操作系统服务器应急响应流程_windows 服务器应急响应靶场_云无迹的博客-CSDN博客 0、请提交攻击者攻击成功的第一时间,格式:YY:MM:DD hh:mm:ss1、请提交攻击者的浏览器版本2、请提交攻击者目录扫描所使用的工具名称…...
在WSUS中删除更新
WSUS中更新的管理逻辑 如果你探索过WSUS控制台界面,就会发现WSUS只给你提供了批准(Approve)和拒绝(Decline)更新的选项,并无办法删除更新。 如果你去WSUS服务器清理导向(WSUS Server Cleanup …...
5分钟轻松搭建Immich图片管理软件并实现公网远程传输照片
文章目录 前言1.关于Immich2.安装Docker3.本地部署Immich4.Immich体验5.安装cpolar内网穿透6.创建远程链接公网地址7.使用固定公网地址远程访问 前言 本篇文章介绍如何在本地搭建lmmich图片管理软件,并结合cpolar内网穿透实现公网远程访问到局域网内的lmmich&#…...
数据集-目标检测系列- 昙花(昙花一现) 检测数据集 epiphyllum >> DataBall
数据集-目标检测系列- 昙花(昙花一现) 检测数据集 epiphyllum >> DataBall DataBall 助力快速掌握数据集的信息和使用方式,会员享有 百种数据集,持续增加中。 贵在坚持! 数据样例项目地址: * 相关…...
开源POC库推荐
声明 学习视频来自 B 站UP主泷羽sec,如涉及侵权马上删除文章。 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负。 ✍🏻作者简介:致…...
vue3项目部署在阿里云轻量应用服务器上
文章目录 概要整体部署流程技术细节小结 概要 vue3前端项目部署在阿里云轻量服务器 整体部署流程 首先有一个Vue3前端项目和阿里云应用服务器 确保环境准备 如果是新的服务器,在服务器内运行以下命令更新软件包 sudo apt update && sudo apt upgrade -y …...
javascrip页面交互
元素的三大系列 offset系列 offset初相识 offset系列属性 作用 element.offsetParent 返回作为该元素带有定位的父级元素,如果父级没有定位,则返回body element.offsetTop 返回元素相对于有定位父元素上方的偏移量 element.offsetLeft 返回元素…...
【U盘车载音乐】某宝198的3068首车载专用音乐合集【高音质】24G
「【U盘车载音乐】某宝198的3068首车载专用音乐合集【高音质】24G」 复制下方口令,打开最新版「夸克APP」即可获取保存(防止和谐!!!) 口令: 动作懿范鉴真渡多好备用口令: /~19dc35…...
【论文阅读】WGSR
0. 摘要 0.1. 问题提出 1.超分辨率(SR)是一个不适定逆问题,可行解众多。 2.超分辨率(SR)算法在可行解中寻找一个在保真度和感知质量之间取得平衡的“良好”解。 3.现有的方法重建高频细节时会产生伪影和幻觉,模型区分图像细节与伪影仍是难题。 0.2. …...
打造智能化在线教育平台详解:教培网校APP的架构设计与实现
本篇文章,小编将以教培网校APP的架构设计与实现为核心,深入探讨如何打造一套智能化的在线教育平台,为企业和教育机构提供落地参考。 一、在线教育平台的核心功能需求 构建一个高效的教培网校APP,首先需要明确其核心功能需求。一…...
C++_核心编程_多态案例二-制作饮品
#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为:煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例,提供抽象制作饮品基类,提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...
盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来
一、破局:PCB行业的时代之问 在数字经济蓬勃发展的浪潮中,PCB(印制电路板)作为 “电子产品之母”,其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透,PCB行业面临着前所未有的挑战与机遇。产品迭代…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装
以下是基于 vant-ui(适配 Vue2 版本 )实现截图中照片上传预览、删除功能,并封装成可复用组件的完整代码,包含样式和逻辑实现,可直接在 Vue2 项目中使用: 1. 封装的图片上传组件 ImageUploader.vue <te…...
UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中,UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...
Java线上CPU飙高问题排查全指南
一、引言 在Java应用的线上运行环境中,CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时,通常会导致应用响应缓慢,甚至服务不可用,严重影响用户体验和业务运行。因此,掌握一套科学有效的CPU飙高问题排查方法&…...
重启Eureka集群中的节点,对已经注册的服务有什么影响
先看答案,如果正确地操作,重启Eureka集群中的节点,对已经注册的服务影响非常小,甚至可以做到无感知。 但如果操作不当,可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...
排序算法总结(C++)
目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指:同样大小的样本 **(同样大小的数据)**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...
