基本国际化处理

package-lock.json

@@ -8,9 +8,13 @@
       "name": "simple-element-plus-template",
       "version": "0.0.0",
       "dependencies": {
+        "@element-plus/icons-vue": "^2.1.0",
+        "dayjs": "^1.11.8",
         "element-plus": "^2.3.4",
+        "lodash": "^4.17.21",
         "pinia": "^2.0.32",
         "vue": "^3.2.47",
+        "vue-i18n": "^9.2.2",
         "vue-router": "^4.1.6"
       },
       "devDependencies": {
@@ -503,6 +507,63 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "node_modules/@intlify/core-base": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.2.2.tgz",
+      "integrity": "sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==",
+      "dependencies": {
+        "@intlify/devtools-if": "9.2.2",
+        "@intlify/message-compiler": "9.2.2",
+        "@intlify/shared": "9.2.2",
+        "@intlify/vue-devtools": "9.2.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/devtools-if": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.2.2.tgz",
+      "integrity": "sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==",
+      "dependencies": {
+        "@intlify/shared": "9.2.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.2.2.tgz",
+      "integrity": "sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==",
+      "dependencies": {
+        "@intlify/shared": "9.2.2",
+        "source-map": "0.6.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.2.2.tgz",
+      "integrity": "sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/vue-devtools": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz",
+      "integrity": "sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==",
+      "dependencies": {
+        "@intlify/core-base": "9.2.2",
+        "@intlify/shared": "9.2.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1076,9 +1137,9 @@
       "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
     },
     "node_modules/dayjs": {
-      "version": "1.11.7",
+      "version": "1.11.8",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.8.tgz",
-      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
+      "integrity": "sha512-LcgxzFoWMEPO7ggRv1Y2N31hUf2R0Vj7fuy/m+Bg1K8rr+KAs1AEy4y9jd5DXe8pbHgX+srkHNS7TH6Q6ZhYeQ=="
     },
     "node_modules/debug": {
       "version": "4.3.4",
@@ -3311,6 +3372,23 @@
         "eslint": ">=6.0.0"
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.2.2.tgz",
+      "integrity": "sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==",
+      "dependencies": {
+        "@intlify/core-base": "9.2.2",
+        "@intlify/shared": "9.2.2",
+        "@intlify/vue-devtools": "9.2.2",
+        "@vue/devtools-api": "^6.2.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.6.tgz",

package.json

@@ -9,9 +9,13 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.1.0",
+    "dayjs": "^1.11.8",
     "element-plus": "^2.3.4",
+    "lodash": "^4.17.21",
     "pinia": "^2.0.32",
     "vue": "^3.2.47",
+    "vue-i18n": "^9.2.2",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {

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">
+        <span>{{ $t('common.label.language') }}</span>
-          <Expand />
-        </el-icon>
-        <span>语言</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>