package.json
{
"name": "vue3-eplus",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"element-plus": "^2.7.2",
"vue": "^3.4.21",
"vue-i18n": "^10.0.0-alpha.3",
"vue-router": "^4.3.0",
"vuex": "^4.1.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.4",
"@vitejs/plugin-vue-jsx": "^3.1.0",
"vite": "^5.2.8"
}
}
main.js
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import i18n from "@/i18n/index";
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import store from './store'
const app = createApp(App)
app.use(ElementPlus)
app.use(i18n)
app.use(store)
app.use(router)
app.mount('#app')
app.vue
<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import En from "element-plus/es/locale/lang/en";
import ZhCn from "element-plus/es/locale/lang/zh-cn";
const store = useStore();
const i18 = useI18n()
const setLen = () => {
const lang = Math.random() > .5 ? 'zh' : 'en'
i18.locale.value = lang;
store.commit("setLanguage", lang)
}
</script>
<template>
<header>
<el-config-provider :locale="store.state.lan === 'zh' ? ZhCn : En">
<div class="wrapper">
<HelloWorld msg="You did it!" />
8888---------{{ $t('name') }}--999
<el-date-picker
v-model="value1"
type="monthrange"
range-separator="To"
start-placeholder="Start month"
end-placeholder="End month"
/>
<el-button type="primary" @click="setLen">Primary</el-button>
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
</div>
</el-config-provider>
</header>
<RouterView />
</template>
store.js
import { createStore } from "vuex";
export default createStore({
state: {
lan: 'zh'
},
mutations: {
setLanguage(state, val) {
state.lan = val
}
},
getters: {
getLanguage(state) {
return state.lan
}
}
})
i18n/index.js
import { createI18n } from "vue-i18n";
//这是我自己创建的语言包
import mZhLocale from "./lang/zh";
import mEnLocale from "./lang/en";
//这里使用了vuex来进行全局的数据共享
import { useStore } from "vuex";
const store = useStore();
//创建messages对象,里面注册相应的语言包,这里面我注册了自己定义的语言包
const messages = {
en: {
...mEnLocale,
},
zh: {
...mZhLocale,
},
};
const i18n = createI18n({
legacy: false, // 使用composition API
locale: store?.state.lan || 'zh'
globalInjection: true, // 表明使用全局t函数
messages,
});
export default i18n