基本国际化处理

src/App.vue

@@ -1,8 +1,11 @@
 <script setup>
+
 </script>
 
 <template>
-  <router-view />
+  <el-config-provider :locale="$currentLocale.localeData">
+    <router-view />
+  </el-config-provider>
 </template>
 
 <style scoped>

src/assets/main.css

@@ -0,0 +1,3 @@
+#app .el-header{
+    padding-left: 0;
+}

src/components/LeftMenu.vue

@@ -1,3 +1,11 @@
+<script setup>
+defineProps({
+  collapseLeft: {
+    type: Boolean
+  }
+})
+</script>
+
 <template>
   <el-scrollbar>
     <el-menu
@@ -13,57 +21,46 @@
       <el-sub-menu index="1">
         <template #title>
           <el-icon><setting /></el-icon>
-          <span>系统管理</span>
+          <span>{{ $t('menu.label.systemManagement') }}</span>
         </template>
         <el-menu-item index="1-1">
           <el-icon><user /></el-icon>
-          <span>用户管理</span>
+          <span>{{ $t('menu.label.userManagement') }}</span>
         </el-menu-item>
         <el-menu-item index="1-2">
           <el-icon><Menu /></el-icon>
-          <span>角色管理</span>
+          <span>{{ $t('menu.label.roleManagement') }}</span>
         </el-menu-item>
         <el-menu-item index="1-3">
           <el-icon><lock /></el-icon>
-          <span>权限管理</span>
+          <span>{{ $t('menu.label.authorityManagement') }}</span>
         </el-menu-item>
         <el-menu-item index="1-4">
           <el-icon><Menu /></el-icon>
-          <span>菜单管理</span>
+          <span>{{ $t('menu.label.menuManagement') }}</span>
         </el-menu-item>
       </el-sub-menu>
       <el-sub-menu index="2">
         <template #title>
           <el-icon><WarningFilled /></el-icon>
-          <span>错误页面</span>
+          <span>{{ $t('menu.label.errorPage') }}</span>
         </template>
-        <el-menu-item index="1-1">
+        <el-menu-item index="2-1">
           <el-icon><Warning /></el-icon>
-          <span>客户端错误</span>
+          <span>{{ $t('menu.label.errorPage404') }}</span>
         </el-menu-item>
-        <el-menu-item index="1-2">
+        <el-menu-item index="2-2">
           <el-icon><Warning /></el-icon>
-          <span>没有权限页面</span>
+          <span>{{ $t('menu.label.errorPage403') }}</span>
         </el-menu-item>
-        <el-menu-item index="1-3">
+        <el-menu-item index="2-3">
           <el-icon><Warning /></el-icon>
-          <span>服务器错误</span>
+          <span>{{ $t('menu.label.errorPage500') }}</span>
         </el-menu-item>
       </el-sub-menu>
     </el-menu>
   </el-scrollbar>
 </template>
 
-<script>
-export default {
-  name: 'LeftMenu',
-  props: {
-    collapseLeft: {
-      type: Boolean
-    }
-  }
-}
-</script>
-
 <style scoped>
 </style>

src/components/TopNav.vue

@@ -1,3 +1,21 @@
+<script setup>
+
+import { ref } from 'vue'
+
+const isCollapseLeft = ref(false)
+
+const emit = defineEmits(['update:collapseLeft'])
+const updateCollapseLeft = () => {
+  isCollapseLeft.value = !isCollapseLeft.value
+  emit('update:collapseLeft', isCollapseLeft.value)
+}
+
+defineProps({
+  collapseLeft: {
+    type: Boolean
+  }
+})
+</script>
 <template>
   <el-menu
     mode="horizontal"
@@ -17,74 +35,52 @@
     <div class="flex-grow" />
     <el-sub-menu index="1">
       <template #title>
-        <el-icon v-if="isCollapseLeft">
-          <Expand />
-        </el-icon>
-        <span>语言</span>
+        <span>{{ $t('common.label.language') }}</span>
       </template>
-      <el-menu-item index="2-1">
-        中文
+      <el-menu-item
+        index="1-1"
+        @click="$changeLocale('zh-CN')"
+      >
+        {{ $t('common.label.langCn') }}
       </el-menu-item>
-      <el-menu-item index="2-2">
-        英文
+      <el-menu-item
+        index="1-2"
+        @click="$changeLocale('en-US')"
+      >
+        {{ $t('common.label.langEn') }}
       </el-menu-item>
     </el-sub-menu>
     <el-sub-menu index="2">
       <template #title>
-        主题
+        {{ $t('common.label.theme') }}
       </template>
       <el-menu-item index="2-1">
-        默认
+        {{ $t('common.label.themeDefault') }}
       </el-menu-item>
       <el-menu-item index="2-2">
-        黑色
+        {{ $t('common.label.themeDark') }}
       </el-menu-item>
       <el-menu-item index="2-3">
-        紫色
+        {{ $t('common.label.themePurple') }}
       </el-menu-item>
     </el-sub-menu>
     <el-sub-menu index="3">
       <template #title>
-        个人中心
+        {{ $t('common.label.personalCenter') }}
       </template>
-      <el-menu-item index="2-4-1">
-        个人资料
+      <el-menu-item index="3-1">
+        {{ $t('common.label.personalInfo') }}
       </el-menu-item>
-      <el-menu-item index="2-4-2">
-        关于
+      <el-menu-item index="3-2">
+        {{ $t('common.label.about') }}
       </el-menu-item>
-      <el-menu-item index="2-4-3">
-        退出
+      <el-menu-item index="3-3">
+        {{ $t('common.label.logout') }}
       </el-menu-item>
     </el-sub-menu>
   </el-menu>
 </template>
 
-<script>
-export default {
-  name: 'TopNav',
-  props: {
-    collapseLeft: {
-      type: Boolean
-    }
-  },
-  data () {
-    const isCollapseLeft = this.$props.collapseLeft
-    return {
-      isCollapseLeft
-    }
-  },
-  methods: {
-    updateCollapseLeft () {
-      this.isCollapseLeft = !this.isCollapseLeft
-      this.$emit('update:collapseLeft', this.isCollapseLeft)
-    }
-  }
-}
-</script>
-
 <style scoped>
-.flex-grow {
-  flex-grow: 1;
-}
+
 </style>

src/languages/MessagesConfig.js

@@ -0,0 +1,41 @@
+import { createI18n } from 'vue-i18n'
+import { reactive } from 'vue'
+import messagesCn from './messages_cn'
+import messagesEn from './messages_en'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import en from 'element-plus/dist/locale/en.mjs'
+import 'dayjs/locale/zh-cn'
+import dayjs from 'dayjs'
+dayjs.locale('zh-CN') // dayjs的语言配置
+
+const i18n = createI18n({
+  locale: 'zh-CN', // set locale
+  legacy: false, // you must set `false`, to use Composition API
+  fallbackLocale: 'zh-CN', // set fallback locale
+  messages: {
+    'zh-CN': messagesCn,
+    'en-US': messagesEn
+  } // set locale messages
+})
+
+const $currentLocale = reactive({ // 用于element-plus
+  locale: 'zh-CN',
+  localeData: zhCn
+})
+
+const $changeLocale = function (locale) {
+  this.$i18n.locale = locale
+  Object.assign(this.$currentLocale, {
+    locale,
+    localeData: locale === 'zh-CN' ? zhCn : en
+  })
+  dayjs.locale(locale === 'zh-CN' ? 'zh-cn' : 'en')
+}
+
+export default {
+  install (app) {
+    app.use(i18n)
+    app.config.globalProperties.$currentLocale = $currentLocale
+    app.config.globalProperties.$changeLocale = $changeLocale
+  }
+}

src/languages/messages_cn.js

@@ -0,0 +1,32 @@
+export default {
+  common: { // 通用资源
+    label: {
+      login: '登录',
+      index: '首页',
+      langCn: '中文',
+      langEn: 'English',
+      language: '语言',
+      theme: '主题',
+      themeDefault: '默认',
+      themeDark: '黑色',
+      themePurple: '紫色',
+      personalCenter: '个人中心',
+      personalInfo: '个人资料',
+      about: '关于',
+      logout: '退出'
+    }
+  },
+  menu: {
+    label: {
+      systemManagement: '系统管理',
+      userManagement: '用户管理',
+      roleManagement: '角色管理',
+      authorityManagement: '权限管理',
+      menuManagement: '菜单管理',
+      errorPage: '错误页面',
+      errorPage404: '找不到页面',
+      errorPage403: '没有权限',
+      errorPage500: '服务器错误'
+    }
+  }
+}

src/languages/messages_en.js

@@ -0,0 +1,32 @@
+export default {
+  common: {
+    label: {
+      login: 'Login',
+      index: 'Home',
+      langCn: '中文',
+      langEn: 'English',
+      language: 'Language',
+      theme: 'Themes',
+      themeDefault: 'default',
+      themeDark: 'dark',
+      themePurple: 'purple',
+      personalCenter: 'Personal Center',
+      personalInfo: 'Personal Info',
+      about: 'About',
+      logout: 'Logout'
+    }
+  },
+  menu: {
+    label: {
+      systemManagement: 'System Management',
+      userManagement: 'User Management',
+      roleManagement: 'Role Management',
+      authorityManagement: 'Authority Management',
+      menuManagement: 'Menu Management',
+      errorPage: 'Error Page',
+      errorPage404: 'Not Found',
+      errorPage403: 'Access Denied',
+      errorPage500: 'Server Error'
+    }
+  }
+}

src/main.js

@@ -4,6 +4,8 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
+import messagesConfig from '@/languages/MessagesConfig'
+
 import App from './App.vue'
 import router from './router'
 
@@ -14,6 +16,7 @@ const app = createApp(App)
 app.use(createPinia())
 app.use(router)
 app.use(ElementPlus)
+app.use(messagesConfig)
 
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)

src/views/HomeView.vue

@@ -2,9 +2,17 @@
 import LeftMenu from '@/components/LeftMenu.vue'
 import TopNav from '@/components/TopNav.vue'
 import { ref } from 'vue'
+import dayjs from 'dayjs'
 
 const collapseLeft = ref(false)
 
+const value1 = ref(new Date())
+const color = ref('rgba(19, 206, 102, 0.8)')
+
+const testDay = function () {
+  return dayjs.weekdays()
+}
+
 </script>
 
 <template>
@@ -17,7 +25,17 @@ const collapseLeft = ref(false)
         <top-nav v-model:collapse-left="collapseLeft" />
       </el-header>
       <el-main>
-        <router-view />
+        <el-date-picker
+          v-model="value1"
+          type="date"
+          placeholder="Pick a day"
+        />
+        <el-color-picker
+          v-model="color"
+          show-alpha
+        />
+        {{ testDay() }}
+        {{ $i18n.locale }}
       </el-main>
     </el-container>
   </el-container>