升级vue以及element-plus到最新版本 (#523)

Co-authored-by: liulihan <961880295@qq.com>

Author: NightMingGit

babel.config.js

@@ -1,13 +1,7 @@
 module.exports = {
   presets: [['@vue/cli-plugin-babel/preset']],
   plugins: [
-    [
-      'component',
-      {
-        libraryName: 'element-plus',
-        styleLibraryName: 'theme-chalk',
-      },
-    ],
+    //去除element babel 新版直接手动导入即可
     '@babel/plugin-proposal-optional-chaining',
     '@babel/plugin-proposal-nullish-coalescing-operator',
   ],

package.json

@@ -19,7 +19,7 @@
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "dayjs": "^1.10.4",
-    "element-plus": "^1.0.2-beta.70",
+    "element-plus": "^1.2.0-beta.5",
     "event-source-polyfill": "^1.0.7",
     "fastscan": "^1.0.4",
     "good-storage": "^1.1.0",
@@ -30,7 +30,7 @@
     "photoswipe": "^4.1.2",
     "screenfull": "^4.2.0",
     "swiper": "^6.4.5",
-    "vue": "^3.1.4",
+    "vue": "^3.2.24",
     "vue-picture-cropper": "^0.1.9",
     "vue-router": "^4.0.10",
     "vuex": "^4.0.2",

src/assets/style/elementFont.css

@@ -19,11 +19,12 @@ $--background-color-base: #F6F7FA !default;
 $--link-default-active-color: $--color-primary !default;
 $--link-default-font-color: $--color-text-regular !default;
 $--link-disabled-font-color: $--color-text-placeholder !default;
-
 /* 改变 icon 字体路径变量，必需 */
-$--font-path: "~element-plus/lib/theme-chalk/fonts";
-
-@import "~element-plus/packages/theme-chalk/src/index";
+//$--font-path: "~element-plus/lib/theme-chalk/fonts";
+//兼容字体 新版本element-plus 已经移除font-icon
+@import "../elementFont.css";
+@import "~element-plus/theme-chalk/src/index";
+@import "~element-plus/theme-chalk/src/mixins/mixins";
 
 // button
 .el-button {

src/assets/style/fonts/element-icons.ttf

@@ -1,12 +1,13 @@
 <template>
-  <el-submenu v-if="item.children?.length > 0" :index="item.path" popper-append-to-body>
+  <!--el-submenu改名为el-sub-menu-->
+  <el-sub-menu v-if="item.children?.length > 0" :index="item.path" popper-append-to-body>
     <template #title>
       <i v-if="!filterIcon(item.icon)" :class="item.icon"></i>
       <img v-else :src="item.icon" class="img-icon" />
       <span>{{ item.title }}</span>
     </template>
     <menu-tree v-for="child in item.children" :key="child.path" :item="child" />
-  </el-submenu>
+  </el-sub-menu>
 
   <el-menu-item v-else :index="item.path" @click="navigateTo(item.path)">
     <i v-if="!filterIcon(item.icon)" :class="item.icon"></i>
@@ -47,12 +48,14 @@ export default {
   display: inline-block;
   transform: translateY(21px);
 }
+
 .iconfont {
   margin-right: 10px;
   margin-left: 5px;
   color: $sub-menu-title;
   height: $menu-item-height;
 }
+
 .title {
   display: inline-block;
   width: 110px;

src/assets/style/fonts/element-icons.woff

@@ -18,7 +18,7 @@ import StickyTop from '@/component/base/sticky-top/sticky-top'
 import SourceCode from '@/component/base/source-code/source-code'
 
 import '@/assets/style/index.scss'
-import 'element-plus/lib/theme-chalk/index.css'
+import 'element-plus/dist/index.css'
 import '@/assets/style/realize/element-variable.scss'
 
 const app = createApp(App)

src/assets/style/realize/element-variable.scss

@@ -5,7 +5,7 @@ function resolve(dir) {
 }
 
 module.exports = {
-  lintOnSave: true,
+  lintOnSave: false,
   productionSourceMap: false,
   // assetsDir: 'static',
   chainWebpack: config => {
@@ -27,6 +27,15 @@ module.exports = {
     resolve: {
       extensions: ['.js', '.json', '.vue', '.scss', '.html'],
     },
+    module: {
+      rules: [
+        {
+          test: /\.mjs$/,
+          include: /node_modules/,
+          type: 'javascript/auto',
+        },
+      ],
+    },
   },
   css: {
     loaderOptions: {