diff --git a/package-lock.json b/package-lock.json index c01c389..ad3594d 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz", - "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==" + "version": "1.11.8", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.8.tgz", + "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", diff --git a/package.json b/package.json index 6e4de59..e119a72 100644 --- a/package.json +++ b/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": { diff --git a/src/App.vue b/src/App.vue index 9b1015e..8535e7a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,8 +1,11 @@ diff --git a/src/components/TopNav.vue b/src/components/TopNav.vue index 7a4bce2..584eb3c 100644 --- a/src/components/TopNav.vue +++ b/src/components/TopNav.vue @@ -1,3 +1,21 @@ + - - diff --git a/src/languages/MessagesConfig.js b/src/languages/MessagesConfig.js new file mode 100644 index 0000000..a7f96c9 --- /dev/null +++ b/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 + } +} diff --git a/src/languages/messages_cn.js b/src/languages/messages_cn.js new file mode 100644 index 0000000..b15b42a --- /dev/null +++ b/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: '服务器错误' + } + } +} diff --git a/src/languages/messages_en.js b/src/languages/messages_en.js new file mode 100644 index 0000000..346a2d2 --- /dev/null +++ b/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' + } + } +} diff --git a/src/main.js b/src/main.js index 06a4db1..7bcaccf 100644 --- a/src/main.js +++ b/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) diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 7f7fc13..92bd97f 100644 --- a/src/views/HomeView.vue +++ b/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() +} +