当前位置: 首页 > 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;它通过文档树下每个祖先节点…...

告别阿里云!用ThingsCloud免费搭建个人智能家居控制中心(附ESP8266配置)

从零构建智能家居控制中心&#xff1a;ThingsCloud与ESP8266实战指南 在智能家居领域&#xff0c;许多技术爱好者常常面临一个两难选择&#xff1a;要么使用功能强大但配置复杂的商业平台&#xff0c;要么选择简单但功能有限的DIY方案。ThingsCloud的出现为这一问题提供了优雅的…...

揭秘低查重的AI教材生成之道,用AI教材写作工具开启高效创作!

AI教材写作助力高效教学创作 完成教材的初稿后&#xff0c;进行修改优化真是一场“折磨”&#xff01;逐字逐句地检查逻辑漏洞和知识点错误&#xff0c;耗时费力&#xff1b;随着章节结构的调整&#xff0c;后续的内容也不得不跟着变化&#xff0c;修改的工作量一下子就增加了…...

5步构建适合你的Yuzu版本管理系统:写给模拟器玩家的效率指南

5步构建适合你的Yuzu版本管理系统&#xff1a;写给模拟器玩家的效率指南 【免费下载链接】yuzu-downloads 项目地址: https://gitcode.com/GitHub_Trending/yu/yuzu-downloads 还在为Yuzu模拟器版本选择而困惑&#xff1f;为什么新游戏在最新版模拟器上反而卡顿&#x…...

eslint-plugin-compat自定义规则开发:扩展插件功能的完整教程

eslint-plugin-compat自定义规则开发&#xff1a;扩展插件功能的完整教程 【免费下载链接】eslint-plugin-compat Check the browser compatibility of your code 项目地址: https://gitcode.com/gh_mirrors/es/eslint-plugin-compat eslint-plugin-compat是一款强大的浏…...

SpinningMomo终极指南:如何用专业工具提升《无限暖暖》摄影体验

SpinningMomo终极指南&#xff1a;如何用专业工具提升《无限暖暖》摄影体验 【免费下载链接】SpinningMomo 一个为《无限暖暖》提升游戏摄影体验的窗口调整工具。 A window adjustment tool for Infinity Nikki that enhances in-game photography. 项目地址: https://gitcod…...

MySQL误删数据别慌!手把手教你用binlog2sql从ROW格式日志恢复(附常见报错解决方案)

MySQL数据恢复实战&#xff1a;从误删到完美还原的完整指南 凌晨三点&#xff0c;当大多数人都沉浸在梦乡时&#xff0c;数据库管理员小李却被一阵急促的电话铃声惊醒。生产环境的核心用户表被误操作清空&#xff0c;数百万条用户数据瞬间消失。这种场景对于任何DBA来说都是噩梦…...

PyTorch模型的TensorRT优化:原理与实践

PyTorch模型的TensorRT优化&#xff1a;原理与实践 1. 背景与意义 在深度学习模型部署过程中&#xff0c;推理速度是一个关键指标。TensorRT是NVIDIA开发的高性能深度学习推理优化库&#xff0c;它可以显著提高模型的推理速度&#xff0c;降低延迟。本文将深入探讨TensorRT的工…...

Nomic-Embed-Text-V2-MoE实战:构建智能文档检索系统与MySQL集成

Nomic-Embed-Text-V2-MoE实战&#xff1a;构建智能文档检索系统与MySQL集成 1. 引言 想象一下&#xff0c;你所在的公司有成千上万份产品手册、技术文档和合同文件&#xff0c;它们散落在各个文件夹里&#xff0c;格式五花八门。当你想找一份关于“如何解决产品X在低温环境下…...

GPEN对戴口罩人脸的修复能力实测:遮挡场景适应性

GPEN对戴口罩人脸的修复能力实测&#xff1a;遮挡场景适应性 1. 引言&#xff1a;当人脸识别遇上口罩 最近几年&#xff0c;口罩成了我们生活中的常客。无论是进出公共场所&#xff0c;还是在一些特殊的工作环境中&#xff0c;遮住半张脸的情况越来越普遍。这带来了一个有趣的…...

AI结对编程:利用快马平台智能助手深度理解和优化PyTorch代码

最近在折腾PyTorch项目时&#xff0c;发现很多细节问题光靠查文档效率太低。后来尝试用InsCode(快马)平台的AI辅助功能&#xff0c;发现它不仅能解释代码原理&#xff0c;还能直接给出优化方案&#xff0c;简直是深度学习开发的"外挂"。分享几个实用场景&#xff1a;…...