Vue3国际化适配(i18n)的简单使用(非常简单)

2023-11-14

Vue-i18n是Vue.js的国际化插件

Vue-i18n官网:Vue I18n | Vue I18n

下载Vue-i18n插件 :

# npm方式
npm install vue-i18n@9

# yarn方式
yarn add vue-i18n@9

在main.js引入Vue-i18n:

# main.js/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import { createI18n } from 'vue-i18n'

const messages = {
    en: {
        message: {
            hello: 'hello world'
        }
    },
    cn: {
        message: {
            hello: '你好,世界'
        }
    }
}

// 使用选项创建i18n实例
const i18n = createI18n({
    locale: 'cn', // 当前语言
    fallbackLocale: 'en', // 回退语言
    messages,
    legacy: false,
    // 如果需要指定其他选项,可以设置其他选项
    // ...
})

createApp(App).use(i18n).mount('#app')

在index.vue中使用:

# index.vue

<template>
  <div class="home">
    <!-- 显示的语言 -->
    <p>{{ $t("message.hello") }}</p>
    <!-- 切换语言的按钮 -->
    <button @click="change">中英语言切换</button>
  </div>
</template>

<script setup>
useI18n()
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
let change = () => {
  if (locale.value == 'cn') {
    locale.value = 'en'
  } else {
    locale.value = 'cn'
  }
}
</script>

效果:切换前\后

 

非常简单!欢迎学习和交流

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue3国际化适配(i18n)的简单使用(非常简单) 的相关文章

随机推荐

  • 关于副业怎么发快手引流,教你如何把快手变成自己的副业

    快手上面的赚钱玩法也分很多种 这里蜘蛛火讲几种暴利的玩法 分别是自己拍短视频 免费送 自己直播 和打板引流 自己拍短视频 如果确定是自己拍 首先要定位一个想切入的领域 比如水果电商 很多的农民平时在家乡种的果子都很不错 但是苦于没有办法宣传
  • 数字图像处理之浮雕效果——基于傅里叶变换的频域操作

    问题简述 这是信号与系统课程的一个课后作业 要求运用傅里叶变换的理论知识 在matlab中对数字图像进行浮雕效果的处理 浮雕效果和图像边缘的检测差不多 学习过深度学习的同学可能会想到使用核对图像进行卷积操作 吴恩达老师在DeepLearni
  • Python之字典一个key对应多个value

    python的字典是一个key对应一个value 如果想要一个key对应多个value 那么可以用以下几种方法来实现 方法一 创建key对应列表 name list Mary Jack age list 10 12 stu dict nam
  • C++中 语句 #ifndef …详解

    C 中 语句 ifndef define endif 其作用是防止头文件的重复包含和编译 如果被定义则返回假 如果没有被定义则返回真 需要注意的是 ifndef起到的效果是防止一个源文件两次包含同一个头文件 而不是防止两个源文件包含同一个头
  • spark streaming job监控

    定时检查spark streaming job 运行状态保存到mysql中 1 python3保存数据到mysql vi rlt log job dinc py import pymysql import logging import pa
  • ansys选择一个面上所有节点_利用APDL命令选择椭球面上的节点

    微信公众号 CAE技术分享 问题的背景 笔者在利用Workbench的二次开发功能实现某模型的参数化建模 分网 加载时 由于workbench开发接口的限制 需要结合DM模块 MAPDL模块 Mesh模块 FEM模块以及Mechnical模
  • ELK日志分析系统原理与部署

    文章目录 一 ELK日志分析系统简介 1 1ELK日志分析系统组成 1 2日志处理步骤 二 三款软件各自概念 2 1Elasticsearch介绍 2 2Logstash介绍 2 3Kibana介绍 三 ELK日志分析系统部署 3 1实验环
  • Leetcode刷题之回文链表和交换链表中的结点

    竭力履行你的义务 你应该就会知道 你到底有多大的价值 列夫 托尔斯泰 目录 一 回文链表 1 快慢指针 2 把值存入数组中 然后使用双指针 二 交换链表中的结点 1 快慢指针 一 回文链表 给你一个单链表的头节点 head 请你判断该链表是
  • Spring 框架中都用到了哪些设计模式

    1 工厂模式 BeanFactory就是简单工厂模式的体现 用来创建对象的实例 2 单例模式 Bean默认为单例模式 3 代理模式 Spring的AOP功能用到了JDK的动态代理和CGLIB字节码生成技术 4 模板方法 用来解决代码重复的问
  • Python:Docx文档模板创建使用

    博文作者 wangzirui32 喜欢的可以 点赞 收藏 关注哦 本文首发于CSDN 未经许可禁止转载 Hello 大家好 我是wangzirui32 今天我们来学习Docx文档模板创建与使用 开始学习吧 1 Docxtpl Docxtpl
  • 服务器加cpu显示broadwell,英特尔新的Broadwell Xeon服务器CPU每个插槽可提供多达22个内核...

    英特尔的主流消费类处理器主要是双核和四核处理器 但是服务器CPU的性能要高得多 恰当的例子 基于Broadwell的新型Xeon E5 2600 v4系列中最昂贵的成员具有高达22个内核 运行频率为2 2GHz 而所有这些内核都只能装在一个
  • java中html网页转化成pdf(itext)

    Java 实现 HTML 页面转 PDF 解决方案 一 添加 maven 依赖
  • Centos for arm64 aarch64 下载地址列表以及鲲鹏服务器安装教程

    鲲鹏服务器安装Centos 7 6教程 镜像下载地址 一 BIOS 配置 二 通过BMC界面的虚拟光驱安装 1 虚拟光驱挂载系统ISO镜像 2 设置启动项为光驱启动 3 重启服务器 三 下载驱动软件包和驱动配套表 1 驱动下载 2 驱动安装
  • LeetCode 523. Continuous Subarray Sum 解题报告

    LeetCode 523 Continuous Subarray Sum 解题报告 题目描述 Given a list of non negative numbers and a target integer k write a funct
  • Oracle重命名sys或system操作记录

    oracle等保中有条要求 应重命名或删除默认账户 修改默认账户的默认口令 给的建议是修改sys system默认账户名称 避免使用常见用户名称 以下记录了两种方法来实现上面的要求 Oracle重命名sys操作记录 方法一 通过用户的信息是
  • android 手机获取是否开启了底部导航栏兼容小米、华为

    TargetApi Build VERSION CODES JELLY BEAN MR1 public static boolean isNavigationBarShow WindowManager windowManager Displ
  • Qt5.9调用Windows的匿名管道总结

    匿名管道一般用于两个父子进程之间的通信 通常是在MFC上调用 在Windows上 匿名管道的调用函数为CreatePipe 具体的原理讲解和调用实例 可以参考博主的这篇博客 https blog csdn net naibozhuan374
  • Python爬虫学了几个月却不敢接单?过来人的经验总结收好!

    前几天有刷到一个提问 爬虫学了几个月了却还是不敢上手去接单 爬虫接单靠不靠谱 有些新手心里会犯嘀咕 怕不小心就踩了红线 作为过来人也接过不少单 来浅聊一下我的经验 这篇所说的经验总结可能更适合爬虫新手 爬虫大佬可以忽略 此篇小结 Pytho
  • git拉取项目、提交代码简单教程

    最近要用HBuilderX做一个uniapp项目 再写一篇git拉项目代码 交代码的文章 虽然和上一篇差不多啦 不过就是上一篇的交代码没有用指令 这一篇就用一下 首先是要装好git和node 可以自行查找教程 应该没什么坑 第一步 新建一个
  • Vue3国际化适配(i18n)的简单使用(非常简单)

    Vue i18n是Vue js的国际化插件 Vue i18n官网 Vue I18n Vue I18n 下载Vue i18n插件 npm方式 npm install vue i18n 9 yarn方式 yarn add vue i18n 9