vue3国际化，主题切换

国际化

安装依赖

pnpm install i18n

pnpm install vue-i18n

main.js

import { createApp } from 'vue'

import App from './App.vue'

import { i18n } from '@/i18n/index';

const app = createApp(App)

app.use(i18n);

app.mount('#app')

根目录创建i18n文件夹，创建3个文件，分别是 index.js   en.js    zh.js 页面使用

//index.jsimport { createI18n } from "vue-i18n";import zh from "./zh.js"import en from "./en.js";const i18n = createI18n({locale: localStorage.getItem("lang") || "zh",legacy: false,globalInjection: true,messages: {zh: {...zh,},en: {...en,},}});export { i18n };//en.jsexport default {"English": "English",}//zh.jsexport default {"English": "简体中文",}

页面使用

<template><div class="demo">{{ $t("English") }}<button @click="changeLanguage('en')">English</button><button @click="changeLanguage('zh')">中文</button></div>
</template><script setup>
import { useI18n } from "vue-i18n";
const { locale } = useI18n();const changeLanguage = (lang) => {locale.value = lang; // 使用 reactive 的方式切换语言localStorage.setItem("lang", lang); // 保存语言设置到 localStorage
};
</script>

主题切换

安装依赖

pnpm install @vueuse/shared @vueuse/core

页面使用

<template><div class="demo"><div>这是一个深色模式的切换demo</div><el-switch inline-prompt v-model="theme" @click="toggle()"> </el-switch></div>
</template><script setup>
import { ref } from "vue";
import { useToggle } from "@vueuse/shared";
import { useDark } from "@vueuse/core";
const theme = ref(false);const isDark = useDark({// 存储到localStorage/sessionStorage中的Key 根据自己的需求更改storageKey: "useDarkKEY",// 暗黑class名字valueDark: "dark",// 高亮class名字valueLight: "light",
});const toggle = useToggle(isDark);
//初始化获取
const init = () => {theme.value = !isDark.value;
};
init();
</script><style>
.demo {height: 100%;width: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;background-color: #fff;
}
//这个就是深色模式
html.dark .demo {background-color: #000;color: #fff;
}
</style>