前端项目可以跑起来了

2022-10-21 15:48:56 +08:00
parent e1f570ed9f
commit 7997691f77
8 changed files with 539 additions and 10 deletions
--- a/README.md
+++ b/README.md
@@ -97,10 +97,10 @@

 ```bash
 cd ./frontend
-npm install
+npm install --legacy-peer-deps
 ```

-之后运行即可
+之后在 `frontend` 目录下运行即可

 ```bash
 npm run serve
--- a/Solutions.md
+++ b/Solutions.md
@@ -2,7 +2,79 @@

 ### 2022.10

-#### 2022.10.21 项目创建后启动失败，提示：Failed to configure a DataSource: ‘url’ attribute is not specified and no embedded datasource could be configured.
+#### 2022.10.21 前端 npm run serve 时报错，提示：Module not found: Error: Can't resolve 'element-plus/lib/locale'
+
+```bash
+ ERROR  Failed to compile with 1 error
+
+ error  in ./src/plugins/element.js
+
+Module not found: Error: Can't resolve 'element-plus/lib/locale' in 'xxxxxxxx\src\plugins'
+
+ERROR in ./src/plugins/element.js 3:0-45
+Module not found: Error: Can't resolve 'element-plus/lib/locale' in 'xxxxxxxx\src\plugins'
+ @ ./src/main.js 4:0-51 6:0-18
+
+webpack compiled with 1 error
+```
+
+解决方案：
+
+安装`unplugin-vue-components` 和 `unplugin-auto-import`这两款插件
+
+```bash
+npm install -D unplugin-vue-components unplugin-auto-import
+```
+
+注意：安装时可能还会遇到下面一个错误，可以添加 `--legacy-peer-deps` 参数解决
+
+参考：https://element-plus.gitee.io/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5
+
+
+
+#### 2022.10.21 前端 npm install 时报错，提示：Conflicting peer dependency: eslint-plugin-vue@7.20.0
+
+```bash
+npm ERR! code ERESOLVE
+npm ERR! ERESOLVE could not resolve
+npm ERR!
+npm ERR! While resolving: @vue/eslint-config-standard@6.1.0
+npm ERR! Found: eslint-plugin-vue@8.7.1
+npm ERR! node_modules/eslint-plugin-vue
+npm ERR!   dev eslint-plugin-vue@"^8.0.3" from the root project
+npm ERR!
+npm ERR! Could not resolve dependency:
+npm ERR! peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0    
+npm ERR! node_modules/@vue/eslint-config-standard
+npm ERR!   dev @vue/eslint-config-standard@"^6.1.0" from the root project
+npm ERR!
+npm ERR! Conflicting peer dependency: eslint-plugin-vue@7.20.0
+npm ERR! node_modules/eslint-plugin-vue
+npm ERR!   peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0  
+npm ERR!   node_modules/@vue/eslint-config-standard
+npm ERR!     dev @vue/eslint-config-standard@"^6.1.0" from the root project        
+npm ERR!
+npm ERR! Fix the upstream dependency conflict, or retry
+npm ERR! this command with --force, or --legacy-peer-deps
+npm ERR! to accept an incorrect (and potentially broken) dependency resolution.    
+npm ERR!
+npm ERR! See C:\Users\Coz\AppData\Local\npm-cache\eresolve-report.txt for a full report.
+
+npm ERR! A complete log of this run can be found in:
+npm ERR!     C:\Users\Coz\AppData\Local\npm-cache\_logs\2022-10-21T07_12_41_027Z-debug-0.log
+```
+
+解决方案：
+
+在安装命令后加 `--legacy-peer-deps`
+
+例如：`npm i --legacy-peer-deps`
+
+参考：https://blog.csdn.net/lanmy_dl/article/details/126346812
+
+
+
+#### 2022.10.21 后端 项目创建后启动失败，提示：Failed to configure a DataSource: ‘url’ attribute is not specified and no embedded datasource could be configured.

 ```bash
 ***************************
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -28,6 +28,8 @@
        "eslint-plugin-node": "^11.1.0",
        "eslint-plugin-promise": "^5.1.0",
        "eslint-plugin-vue": "^8.0.3",
+        "unplugin-auto-import": "^0.11.2",
+        "unplugin-vue-components": "^0.22.8",
        "vue-cli-plugin-element-plus": "^0.0.13"
      }
    },
@@ -58,6 +60,12 @@
        "node": ">=6.0.0"
      }
    },
+    "node_modules/@antfu/utils": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmmirror.com/@antfu/utils/-/utils-0.5.2.tgz",
+      "integrity": "sha512-CQkeV+oJxUazwjlHD0/3ZD08QWKuGQkhnrKo3e6ly5pd48VUpXbb77q0xMU4+vc2CkJnDS02Eq/M9ugyX20XZA==",
+      "dev": true
+    },
    "node_modules/@babel/code-frame": {
      "version": "7.18.6",
      "resolved": "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.18.6.tgz",
@@ -1985,6 +1993,19 @@
      "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
    },
+    "node_modules/@rollup/pluginutils": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
+      "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==",
+      "dev": true,
+      "dependencies": {
+        "estree-walker": "^2.0.1",
+        "picomatch": "^2.2.2"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      }
+    },
    "node_modules/@sideway/address": {
      "version": "4.1.4",
      "resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.4.tgz",
@@ -7393,6 +7414,12 @@
        "node": ">=6"
      }
    },
+    "node_modules/jsonc-parser": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
+      "dev": true
+    },
    "node_modules/jsonfile": {
      "version": "6.1.0",
      "resolved": "https://registry.npmmirror.com/jsonfile/-/jsonfile-6.1.0.tgz",
@@ -7505,6 +7532,15 @@
        "json5": "lib/cli.js"
      }
    },
+    "node_modules/local-pkg": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.4.2.tgz",
+      "integrity": "sha512-mlERgSPrbxU3BP4qBqAvvwlgW4MTg78iwJdGGnv7kibKjWcJksrG3t6LB5lXI93wXRDvG4NpUgJFmTG4T6rdrg==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
    "node_modules/locate-path": {
      "version": "5.0.0",
      "resolved": "https://registry.npmmirror.com/locate-path/-/locate-path-5.0.0.tgz",
@@ -8057,6 +8093,18 @@
        "mkdirp": "bin/cmd.js"
      }
    },
+    "node_modules/mlly": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmmirror.com/mlly/-/mlly-0.5.16.tgz",
+      "integrity": "sha512-LaJ8yuh4v0zEmge/g3c7jjFlhoCPfQn6RCjXgm9A0Qiuochq4BcuOxVfWmdnCoLTlg2MV+hqhOek+W2OhG0Lwg==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.8.0",
+        "pathe": "^0.3.8",
+        "pkg-types": "^0.3.5",
+        "ufo": "^0.8.5"
+      }
+    },
    "node_modules/module-alias": {
      "version": "2.2.2",
      "resolved": "https://registry.npmmirror.com/module-alias/-/module-alias-2.2.2.tgz",
@@ -8664,6 +8712,12 @@
        "node": ">=8"
      }
    },
+    "node_modules/pathe": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmmirror.com/pathe/-/pathe-0.3.9.tgz",
+      "integrity": "sha512-6Y6s0vT112P3jD8dGfuS6r+lpa0qqNrLyHPOwvXMnyNTQaYiwgau2DP3aNDsR13xqtGj7rrPo+jFUATpU6/s+g==",
+      "dev": true
+    },
    "node_modules/picocolors": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
@@ -8690,6 +8744,17 @@
        "node": ">=8"
      }
    },
+    "node_modules/pkg-types": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-0.3.5.tgz",
+      "integrity": "sha512-VkxCBFVgQhNHYk9subx+HOhZ4jzynH11ah63LZsprTKwPCWG9pfWBlkElWFbvkP9BVR0dP1jS9xPdhaHQNK74Q==",
+      "dev": true,
+      "dependencies": {
+        "jsonc-parser": "^3.2.0",
+        "mlly": "^0.5.14",
+        "pathe": "^0.3.7"
+      }
+    },
    "node_modules/portfinder": {
      "version": "1.0.32",
      "resolved": "https://registry.npmmirror.com/portfinder/-/portfinder-1.0.32.tgz",
@@ -9741,6 +9806,12 @@
        "node": ">= 8.9.0"
      }
    },
+    "node_modules/scule": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmmirror.com/scule/-/scule-0.3.2.tgz",
+      "integrity": "sha512-zIvPdjOH8fv8CgrPT5eqtxHQXmPNnV/vHJYffZhE43KZkvULvpCTvOt1HPlFaCZx287INL9qaqrZg34e8NgI4g==",
+      "dev": true
+    },
    "node_modules/select-hose": {
      "version": "2.0.0",
      "resolved": "https://registry.npmmirror.com/select-hose/-/select-hose-2.0.0.tgz",
@@ -10290,6 +10361,15 @@
        "node": ">=8"
      }
    },
+    "node_modules/strip-literal": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmmirror.com/strip-literal/-/strip-literal-0.4.2.tgz",
+      "integrity": "sha512-pv48ybn4iE1O9RLgCAN0iU4Xv7RlBTiit6DKmMiErbs9x1wH6vXBs45tWc0H5wUIF6TLTrKweqkmYF/iraQKNw==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.8.0"
+      }
+    },
    "node_modules/stylehacks": {
      "version": "5.1.0",
      "resolved": "https://registry.npmmirror.com/stylehacks/-/stylehacks-5.1.0.tgz",
@@ -10663,6 +10743,12 @@
        "node": ">= 0.6"
      }
    },
+    "node_modules/ufo": {
+      "version": "0.8.6",
+      "resolved": "https://registry.npmmirror.com/ufo/-/ufo-0.8.6.tgz",
+      "integrity": "sha512-fk6CmUgwKCfX79EzcDQQpSCMxrHstvbLswFChHS0Vump+kFkw7nJBfTZoC1j0bOGoY9I7R3n2DGek5ajbcYnOw==",
+      "dev": true
+    },
    "node_modules/unbox-primitive": {
      "version": "1.0.2",
      "resolved": "https://registry.npmmirror.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -10715,6 +10801,45 @@
        "node": ">=4"
      }
    },
+    "node_modules/unimport": {
+      "version": "0.6.8",
+      "resolved": "https://registry.npmmirror.com/unimport/-/unimport-0.6.8.tgz",
+      "integrity": "sha512-MWkaPYvN0j+6jfEuiVFhfmy+aOtgAP11CozSbu/I3Cx+8ybjXIueB7GVlKofHabtjzSlPeAvWKJSFjHWsG2JaA==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^4.2.1",
+        "escape-string-regexp": "^5.0.0",
+        "fast-glob": "^3.2.12",
+        "local-pkg": "^0.4.2",
+        "magic-string": "^0.26.4",
+        "mlly": "^0.5.16",
+        "pathe": "^0.3.8",
+        "scule": "^0.3.2",
+        "strip-literal": "^0.4.2",
+        "unplugin": "^0.9.6"
+      }
+    },
+    "node_modules/unimport/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/unimport/node_modules/magic-string": {
+      "version": "0.26.7",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.26.7.tgz",
+      "integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==",
+      "dev": true,
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/universalify": {
      "version": "2.0.0",
      "resolved": "https://registry.npmmirror.com/universalify/-/universalify-2.0.0.tgz",
@@ -10733,6 +10858,118 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/unplugin": {
+      "version": "0.9.6",
+      "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-0.9.6.tgz",
+      "integrity": "sha512-YYLtfoNiie/lxswy1GOsKXgnLJTE27la/PeCGznSItk+8METYZErO+zzV9KQ/hXhPwzIJsfJ4s0m1Rl7ZCWZ4Q==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.8.0",
+        "chokidar": "^3.5.3",
+        "webpack-sources": "^3.2.3",
+        "webpack-virtual-modules": "^0.4.5"
+      }
+    },
+    "node_modules/unplugin-auto-import": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmmirror.com/unplugin-auto-import/-/unplugin-auto-import-0.11.2.tgz",
+      "integrity": "sha512-1+VwBfn9dtiYv9SQLKP1AvZolUbK9xTVeAT+iOcEk4EHSFUlmIqBVLEKI76cifSQTLOJ3rZyPrEgptf3SZNLlQ==",
+      "dev": true,
+      "dependencies": {
+        "@antfu/utils": "^0.5.2",
+        "@rollup/pluginutils": "^4.2.1",
+        "local-pkg": "^0.4.2",
+        "magic-string": "^0.26.2",
+        "unimport": "^0.6.7",
+        "unplugin": "^0.9.3"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@vueuse/core": "*"
+      },
+      "peerDependenciesMeta": {
+        "@vueuse/core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-auto-import/node_modules/magic-string": {
+      "version": "0.26.7",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.26.7.tgz",
+      "integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==",
+      "dev": true,
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/unplugin-vue-components": {
+      "version": "0.22.8",
+      "resolved": "https://registry.npmmirror.com/unplugin-vue-components/-/unplugin-vue-components-0.22.8.tgz",
+      "integrity": "sha512-Musnwdtr6uj9Zopo4oeh4lp9+fJ2ArXVDzSiZxF4YC9v+pLnasKVKEEAjdXuQQ3u3KtntVw6PCscyAt52eS75g==",
+      "dev": true,
+      "dependencies": {
+        "@antfu/utils": "^0.5.2",
+        "@rollup/pluginutils": "^4.2.1",
+        "chokidar": "^3.5.3",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.2.12",
+        "local-pkg": "^0.4.2",
+        "magic-string": "^0.26.5",
+        "minimatch": "^5.1.0",
+        "resolve": "^1.22.1",
+        "unplugin": "^0.9.6"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@babel/parser": "^7.15.8",
+        "vue": "2 || 3"
+      },
+      "peerDependenciesMeta": {
+        "@babel/parser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-vue-components/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/unplugin-vue-components/node_modules/magic-string": {
+      "version": "0.26.7",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.26.7.tgz",
+      "integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==",
+      "dev": true,
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/unplugin-vue-components/node_modules/minimatch": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-5.1.0.tgz",
+      "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/update-browserslist-db": {
      "version": "1.0.10",
      "resolved": "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz",
@@ -11787,6 +12024,12 @@
        "@jridgewell/trace-mapping": "^0.3.9"
      }
    },
+    "@antfu/utils": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmmirror.com/@antfu/utils/-/utils-0.5.2.tgz",
+      "integrity": "sha512-CQkeV+oJxUazwjlHD0/3ZD08QWKuGQkhnrKo3e6ly5pd48VUpXbb77q0xMU4+vc2CkJnDS02Eq/M9ugyX20XZA==",
+      "dev": true
+    },
    "@babel/code-frame": {
      "version": "7.18.6",
      "resolved": "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.18.6.tgz",
@@ -13160,6 +13403,16 @@
      "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
    },
+    "@rollup/pluginutils": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
+      "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==",
+      "dev": true,
+      "requires": {
+        "estree-walker": "^2.0.1",
+        "picomatch": "^2.2.2"
+      }
+    },
    "@sideway/address": {
      "version": "4.1.4",
      "resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.4.tgz",
@@ -17552,6 +17805,12 @@
      "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
      "dev": true
    },
+    "jsonc-parser": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
+      "dev": true
+    },
    "jsonfile": {
      "version": "6.1.0",
      "resolved": "https://registry.npmmirror.com/jsonfile/-/jsonfile-6.1.0.tgz",
@@ -17643,6 +17902,12 @@
        }
      }
    },
+    "local-pkg": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.4.2.tgz",
+      "integrity": "sha512-mlERgSPrbxU3BP4qBqAvvwlgW4MTg78iwJdGGnv7kibKjWcJksrG3t6LB5lXI93wXRDvG4NpUgJFmTG4T6rdrg==",
+      "dev": true
+    },
    "locate-path": {
      "version": "5.0.0",
      "resolved": "https://registry.npmmirror.com/locate-path/-/locate-path-5.0.0.tgz",
@@ -18088,6 +18353,18 @@
        "minimist": "^1.2.6"
      }
    },
+    "mlly": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmmirror.com/mlly/-/mlly-0.5.16.tgz",
+      "integrity": "sha512-LaJ8yuh4v0zEmge/g3c7jjFlhoCPfQn6RCjXgm9A0Qiuochq4BcuOxVfWmdnCoLTlg2MV+hqhOek+W2OhG0Lwg==",
+      "dev": true,
+      "requires": {
+        "acorn": "^8.8.0",
+        "pathe": "^0.3.8",
+        "pkg-types": "^0.3.5",
+        "ufo": "^0.8.5"
+      }
+    },
    "module-alias": {
      "version": "2.2.2",
      "resolved": "https://registry.npmmirror.com/module-alias/-/module-alias-2.2.2.tgz",
@@ -18573,6 +18850,12 @@
      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
      "dev": true
    },
+    "pathe": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmmirror.com/pathe/-/pathe-0.3.9.tgz",
+      "integrity": "sha512-6Y6s0vT112P3jD8dGfuS6r+lpa0qqNrLyHPOwvXMnyNTQaYiwgau2DP3aNDsR13xqtGj7rrPo+jFUATpU6/s+g==",
+      "dev": true
+    },
    "picocolors": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
@@ -18593,6 +18876,17 @@
        "find-up": "^4.0.0"
      }
    },
+    "pkg-types": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-0.3.5.tgz",
+      "integrity": "sha512-VkxCBFVgQhNHYk9subx+HOhZ4jzynH11ah63LZsprTKwPCWG9pfWBlkElWFbvkP9BVR0dP1jS9xPdhaHQNK74Q==",
+      "dev": true,
+      "requires": {
+        "jsonc-parser": "^3.2.0",
+        "mlly": "^0.5.14",
+        "pathe": "^0.3.7"
+      }
+    },
    "portfinder": {
      "version": "1.0.32",
      "resolved": "https://registry.npmmirror.com/portfinder/-/portfinder-1.0.32.tgz",
@@ -19348,6 +19642,12 @@
        "ajv-keywords": "^3.5.2"
      }
    },
+    "scule": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmmirror.com/scule/-/scule-0.3.2.tgz",
+      "integrity": "sha512-zIvPdjOH8fv8CgrPT5eqtxHQXmPNnV/vHJYffZhE43KZkvULvpCTvOt1HPlFaCZx287INL9qaqrZg34e8NgI4g==",
+      "dev": true
+    },
    "select-hose": {
      "version": "2.0.0",
      "resolved": "https://registry.npmmirror.com/select-hose/-/select-hose-2.0.0.tgz",
@@ -19820,6 +20120,15 @@
      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
      "dev": true
    },
+    "strip-literal": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmmirror.com/strip-literal/-/strip-literal-0.4.2.tgz",
+      "integrity": "sha512-pv48ybn4iE1O9RLgCAN0iU4Xv7RlBTiit6DKmMiErbs9x1wH6vXBs45tWc0H5wUIF6TLTrKweqkmYF/iraQKNw==",
+      "dev": true,
+      "requires": {
+        "acorn": "^8.8.0"
+      }
+    },
    "stylehacks": {
      "version": "5.1.0",
      "resolved": "https://registry.npmmirror.com/stylehacks/-/stylehacks-5.1.0.tgz",
@@ -20113,6 +20422,12 @@
        "mime-types": "~2.1.24"
      }
    },
+    "ufo": {
+      "version": "0.8.6",
+      "resolved": "https://registry.npmmirror.com/ufo/-/ufo-0.8.6.tgz",
+      "integrity": "sha512-fk6CmUgwKCfX79EzcDQQpSCMxrHstvbLswFChHS0Vump+kFkw7nJBfTZoC1j0bOGoY9I7R3n2DGek5ajbcYnOw==",
+      "dev": true
+    },
    "unbox-primitive": {
      "version": "1.0.2",
      "resolved": "https://registry.npmmirror.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -20153,6 +20468,41 @@
      "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
      "dev": true
    },
+    "unimport": {
+      "version": "0.6.8",
+      "resolved": "https://registry.npmmirror.com/unimport/-/unimport-0.6.8.tgz",
+      "integrity": "sha512-MWkaPYvN0j+6jfEuiVFhfmy+aOtgAP11CozSbu/I3Cx+8ybjXIueB7GVlKofHabtjzSlPeAvWKJSFjHWsG2JaA==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^4.2.1",
+        "escape-string-regexp": "^5.0.0",
+        "fast-glob": "^3.2.12",
+        "local-pkg": "^0.4.2",
+        "magic-string": "^0.26.4",
+        "mlly": "^0.5.16",
+        "pathe": "^0.3.8",
+        "scule": "^0.3.2",
+        "strip-literal": "^0.4.2",
+        "unplugin": "^0.9.6"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+          "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+          "dev": true
+        },
+        "magic-string": {
+          "version": "0.26.7",
+          "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.26.7.tgz",
+          "integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==",
+          "dev": true,
+          "requires": {
+            "sourcemap-codec": "^1.4.8"
+          }
+        }
+      }
+    },
    "universalify": {
      "version": "2.0.0",
      "resolved": "https://registry.npmmirror.com/universalify/-/universalify-2.0.0.tgz",
@@ -20165,6 +20515,90 @@
      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
      "dev": true
    },
+    "unplugin": {
+      "version": "0.9.6",
+      "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-0.9.6.tgz",
+      "integrity": "sha512-YYLtfoNiie/lxswy1GOsKXgnLJTE27la/PeCGznSItk+8METYZErO+zzV9KQ/hXhPwzIJsfJ4s0m1Rl7ZCWZ4Q==",
+      "dev": true,
+      "requires": {
+        "acorn": "^8.8.0",
+        "chokidar": "^3.5.3",
+        "webpack-sources": "^3.2.3",
+        "webpack-virtual-modules": "^0.4.5"
+      }
+    },
+    "unplugin-auto-import": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmmirror.com/unplugin-auto-import/-/unplugin-auto-import-0.11.2.tgz",
+      "integrity": "sha512-1+VwBfn9dtiYv9SQLKP1AvZolUbK9xTVeAT+iOcEk4EHSFUlmIqBVLEKI76cifSQTLOJ3rZyPrEgptf3SZNLlQ==",
+      "dev": true,
+      "requires": {
+        "@antfu/utils": "^0.5.2",
+        "@rollup/pluginutils": "^4.2.1",
+        "local-pkg": "^0.4.2",
+        "magic-string": "^0.26.2",
+        "unimport": "^0.6.7",
+        "unplugin": "^0.9.3"
+      },
+      "dependencies": {
+        "magic-string": {
+          "version": "0.26.7",
+          "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.26.7.tgz",
+          "integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==",
+          "dev": true,
+          "requires": {
+            "sourcemap-codec": "^1.4.8"
+          }
+        }
+      }
+    },
+    "unplugin-vue-components": {
+      "version": "0.22.8",
+      "resolved": "https://registry.npmmirror.com/unplugin-vue-components/-/unplugin-vue-components-0.22.8.tgz",
+      "integrity": "sha512-Musnwdtr6uj9Zopo4oeh4lp9+fJ2ArXVDzSiZxF4YC9v+pLnasKVKEEAjdXuQQ3u3KtntVw6PCscyAt52eS75g==",
+      "dev": true,
+      "requires": {
+        "@antfu/utils": "^0.5.2",
+        "@rollup/pluginutils": "^4.2.1",
+        "chokidar": "^3.5.3",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.2.12",
+        "local-pkg": "^0.4.2",
+        "magic-string": "^0.26.5",
+        "minimatch": "^5.1.0",
+        "resolve": "^1.22.1",
+        "unplugin": "^0.9.6"
+      },
+      "dependencies": {
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "dev": true,
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "magic-string": {
+          "version": "0.26.7",
+          "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.26.7.tgz",
+          "integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==",
+          "dev": true,
+          "requires": {
+            "sourcemap-codec": "^1.4.8"
+          }
+        },
+        "minimatch": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-5.1.0.tgz",
+          "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        }
+      }
+    },
    "update-browserslist-db": {
      "version": "1.0.10",
      "resolved": "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -28,6 +28,8 @@
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-vue": "^8.0.3",
+    "unplugin-auto-import": "^0.11.2",
+    "unplugin-vue-components": "^0.22.8",
    "vue-cli-plugin-element-plus": "^0.0.13"
  }
 }
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -7,18 +7,27 @@
      below
    </p>
    <el-button type="primary">el-button</el-button>
+    <el-badge value="99" type="primary"></el-badge>
  </div>
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <HelloWorld msg="Welcome to Your Vue.js App" />
 </template>

 <script>
 import HelloWorld from './components/HelloWorld.vue'
+// import { ElConfigProvider } from 'element-plus'
+// import { zhCn } from 'element-plus/es/locale';

 export default {
  name: 'App',
  components: {
    HelloWorld
+    // ElConfigProvider,
  }
+  // setup() {
+  //   return {
+  //     locale: zhCn,
+  //   }
+  // }
 }
 </script>

--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,8 +1,8 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-import installElementPlus from './plugins/element'
+// import installElementPlus from './plugins/element'

 const app = createApp(App)
-installElementPlus(app)
+// installElementPlus(app)
 app.use(router).mount('#app')
--- a/frontend/src/plugins/element.js
+++ b/frontend/src/plugins/element.js
@@ -1,8 +1,6 @@
 import { ElButton } from 'element-plus'
 import lang from 'element-plus/lib/locale/lang/zh-cn'
-import locale from 'element-plus/lib/locale'

 export default (app) => {
-  locale.use(lang)
-  app.use(ElButton)
+  app.use(ElButton, { lang })
 }
--- a/frontend/vue.config.js
+++ b/frontend/vue.config.js
@@ -1,4 +1,18 @@
 const { defineConfig } = require('@vue/cli-service')
+const AutoImport = require('unplugin-auto-import/webpack')
+const Components = require('unplugin-vue-components/webpack')
+const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
+
 module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
+  configureWebpack: {
+    plugins: [
+      AutoImport({
+        resolvers: [ElementPlusResolver()],
+      }),
+      Components({
+        resolvers: [ElementPlusResolver()],
+      }),
+    ],
+  },
 })