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

vue3 vue-i18n 多语言

1. 安装 

npm install vue-i18n -s

2. 引入main.js

import { createI18n } from 'vue-i18n'
import messages from './i18n/index'
const i18n = createI18n({legacy: false,locale: Cookies.get('language') || 'en_us', // set localefallbackLocale: 'en_us', // set fallback localemessages: messages
})
app.use(i18n)

3. 新建文件index.js

import en_us from "@/i18n/en_us.js";
import zh_cn from "@/i18n/zh_cn.js";export default {en_us,zh_cn
}

4. 新建文件en_us.js

export default {login: {username: 'username'}
}

5. 新建文件zh_cn.js

export default {login: {username: '用户名'}
}

6. 使用

<script>
import {useI18n} from "vue-i18n";const {t} = useI18n()const data = ref({rules: {label: [{required: true, message: t('login.username'), trigger: "blur"}],value: [{required: true, message: t('login.username'), trigger: "blur"}]}
});</script><template><div>{{ t('login.username') }}</div>
</template>

7. 语言切换

<script>
import {useI18n} from 'vue-i18n'
import Cookies from "js-cookie";const {t, locale} = useI18n()const handleSetLanguage = (language) => {Cookies.set('language', language)locale.value = language;
}</script><template><div><el-dropdown @command="handleSetLanguage">// 这里去 阿里巴巴矢量图标库 找个图贴一下就行<template #dropdown><el-dropdown-menu><el-dropdown-item :command="'en_us'">English</el-dropdown-item><el-dropdown-item :command="'zh_cn'">简体中文</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></template>

8. 样式

iconfont-阿里巴巴矢量图标库

相关文章:

vue3 vue-i18n 多语言

1. 安装 npm install vue-i18n -s 2. 引入main.js import { createI18n } from vue-i18n import messages from ./i18n/index const i18n createI18n({legacy: false,locale: Cookies.get(language) || en_us, // set localefallbackLocale: en_us, // set fallback local…...

二级水平导航菜单栏的实现

1. 这个是本人设计的一带一路的二级水平导航栏HTML代码&#xff1b; 这里最后实现的效果是鼠标悬停在导航栏上面&#xff0c;就会显示下面的4个部分页面&#xff0c;这里只是以评论热 点作为例子&#xff0c;其他的类似&#xff1b; 2.首先要设计DIV&#xff0c;然后利用无…...

在GitLab Python库中,mr.changes()和mr.diffs()的区别

在GitLab Python库中&#xff0c;mr.changes()和mr.diffs()都用于获取合并请求&#xff08;Merge Request&#xff09;中的文件更改信息&#xff0c;但它们之间有一些区别&#xff1a; mr.changes()&#xff1a; mr.changes() 方法返回合并请求中所有文件的更改信息。返回的结果…...

JavaScript | 【讨论】微软早在2022年已经停用ie的今天,js开发还需要考虑ie9以下的情况嘛?

CSDN的C知道机器回复&#xff1a; 在进行JavaScript开发时&#xff0c;通常需要考虑IE9以下的况。尽管IE9以下的浏览器在市场份额上逐渐减少&#xff0c;但仍然有一部分用户在使用这些旧版本的浏览器。为了确保网站或应用在这些浏览器上能够正常运行&#xff0c;以下是一些需要…...

网康科技 NS-ASG 应用安全网关 SQL注入漏洞复现(CVE-2024-2022)

0x01 产品简介 网康科技的NS-ASG应用安全网关是一款软硬件一体化的产品,集成了SSL和IPSec,旨在保障业务访问的安全性,适配所有移动终端,提供多种链路均衡和选择技术,支持多种认证方式灵活组合,以及内置短信认证、LDAP令牌、USB KEY等多达13种认证方式。 0x02 漏洞概述 …...

英福康INFICON软件真空Tware32中文操作手册

英福康INFICON软件真空Tware32中文操作手册...

UnityAPI的学习——Quaternion类

Quaternion又称为四元数&#xff0c;由x、y、z和w这4个分量组成&#xff0c;属于struct类型。 在Unity中&#xff0c;用Quaternion来存储和表示对象的旋转角度。 Quaternion类实例属性 在Quaternion类中&#xff0c;涉及的实例属性主要有eulerAngles eulerAngles属性&#x…...

chromedriverUnable to obtain driver for chrome using ,selenium找不到chromedriver

1、下载chromedriver chromedriver下载网址&#xff1a;CNPM Binaries Mirror 老版本在&#xff1a;chromedriver/ 较新版本在&#xff1a;chrome-for-testing/ 2、设置了环境变量还是找不到chromedriverUnable to obtain driver for chrome using NoSuchDriverException:…...

剑指offer面试算法题目,自己总结的

JZ31 栈的压入、弹出序列-C++-CSDN博客 剑指 Offer(C++版本)系列:从尾到头打印单链表(C++)-CSDN博客 剑指offer》15--二进制中1的个数[C++]-CSDN博客 《剑指offer》14--剪绳子(整数拆分)[C++]-CSDN博客 剑指 Offer 12. 矩阵中的路径-CSDN博客 C++--机器人的运动范围…...

原生IP是什么?如何测试代理是不是原生IP?

一、什么是原生IP 原生IP地址是互联网服务提供商&#xff08;ISP&#xff09;直接分配给用户的真实IP地址&#xff0c;无需代理或转发。这类IP的注册国家与IP所在服务器的注册地相符。这种IP地址直接与用户的设备或网络关联&#xff0c;不会被任何中间服务器或代理转发或隐藏。…...

1、MQ_介绍、优缺点、类型等

MQ介绍 1. MQ概述 MQ&#xff08;Message Queue&#xff09;&#xff1a;消息队列&#xff0c;是基础数据结构中FIFO&#xff08;first in first out&#xff09;的一种数据结构。一般用来解决流量削峰、应用解耦、异步处理等问题&#xff0c;实现高性能&#xff0c;高可用&a…...

Go-gin-example 第三部分 编写一个简单的文件日志系统

文章目录 本文目标新建logging包file.go编写log文件当前目录结构 接入自定义的log功能验证功能 本文目标 在上一节中&#xff0c;我们解决了 API’s 可以任意访问的问题&#xff0c;那么我们现在还有一个问题&#xff0c;就是我们的日志&#xff0c;都是输出到控制台上的&…...

SQL中如何添加数据

SQL中如何添加数据 一、SQL中如何添加数据&#xff08;方法汇总&#xff09;二、SQL中如何添加数据&#xff08;方法详细解说&#xff09;1. 使用SQL脚本&#xff08;推荐&#xff09;1.1 在表中插入1.1.1 **第一种形式**1.1.2 **第二种形式**SQL INSERT INTO 语法示例SQL INSE…...

如何更好的理解设计模式之桥接模式

桥接模式 点奶茶的时候, 我们一般选择原味奶茶/牛奶奶茶/咸味奶茶 现在假设我们也有这些已经实现好的奶茶类, 且这个奶茶类仅仅就是一个类, 什么也没有, 不可改动 类似 class 奶茶{ }class 原味奶茶 extends 奶茶{ }但是奶茶也分大杯奶茶, 中杯奶茶, 小杯奶茶, 如果我们要实现…...

归并排序

参考链接 排序算法&#xff1a;归并排序【图解代码】_哔哩哔哩_bilibili #include <stdio.h> #include <stdlib.h>// 合并 void merge(int arr[], int tempArr[], int left, int mid, int right) {// 标记左半区第一个未排序的元素int l_pos left;// 标记右半区…...

ELF 1技术贴|在NXP源码基础上适配开发板的按键功能

本次源代码适配是在NXP i.MX6ULL EVK评估板的Linux内核源代码&#xff08;特定版本号为Linux-imx_4.1.15&#xff09;的基础中展开的。 首要任务集中在对功能接口引脚配置的精细调整&#xff0c;确保其能无缝匹配至ELF 1开发板。接下来&#xff0c;我们将详细阐述适配过程中关…...

Linux:kubernetes(k8s)pod的基础操作(6)

Linux&#xff1a;kubernetes&#xff08;k8s&#xff09;允许在任意节点使用kubectl命令&#xff08;5&#xff09;-CSDN博客https://blog.csdn.net/w14768855/article/details/136460090?spm1001.2014.3001.5501 我在前两张进行了基础环境的一系列搭建&#xff0c;现在就正…...

【Docker】掌握 Docker 镜像操作:从基础到进阶

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Linux ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 结语 我的其他博客 前言 在现代软件开发和部署中&#xff0c;容器化技术已经成为不可或缺的一部分。而 Docker 作为最流行的容器化…...

flink重温笔记(十一):Flink 高级 API 开发——flink 四大基石之 Checkpoint(详解存储后端)

Flink学习笔记 前言&#xff1a;今天是学习 flink 的第 11 天啦&#xff01;学习了 flink 四大基石之 Checkpoint &#xff08;检查点&#xff09;&#xff0c;主要是解决大数据领域持久化中间结果数据&#xff0c;以及取消任务&#xff0c;下次启动人可以恢复累加数据问题&…...

React富文本编辑器开发(九)位置

位置是指在使用Slate编辑器中进行插入、删除或执行其它操作时引用文档中特定位置的方式。有几种不同类型的位置接口&#xff0c;每种接口都用于不同的用例。 Path路径 路径是引用位置的最低级别的方法。每个路径都是一个简单的数字数组&#xff0c;它通过文档树下每个祖先节点…...

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

leetcodeSQL解题:3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

招商蛇口 | 执笔CID,启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

虚拟电厂发展三大趋势:市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案

在大数据时代&#xff0c;海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构&#xff0c;在处理大规模数据抓取任务时展现出强大的能力。然而&#xff0c;随着业务规模的不断扩大和数据抓取需求的日益复杂&#xff0c;传统…...

【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验

Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...