update element-plus@1.1.0-beta.6

package.json

@@ -21,15 +21,15 @@
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@logicflow/core": "^0.4.6",
     "@logicflow/extension": "^0.4.6",
-    "@vueuse/core": "^5.0.3",
+    "@vueuse/core": "^6.0.0",
     "animate.css": "^4.1.1",
     "await-to-js": "^3.0.0",
     "axios": "^0.21.1",
     "cropperjs": "^1.5.11",
     "dayjs": "^1.10.6",
     "dotenv": "^8.2.0",
-    "echarts": "^5.1.1",
+    "echarts": "^5.1.2",
-    "element-plus": "^1.0.2-beta.71",
+    "element-plus": "^1.1.0-beta.6",
     "font-awesome": "^4.7.0",
     "lodash-es": "^4.17.21",
     "mitt": "^2.1.0",
@@ -37,21 +37,21 @@
     "nprogress": "^0.2.0",
     "path": "^0.12.7",
     "path-to-regexp": "^6.2.0",
-    "pinia": "^2.0.0-beta.2",
+    "pinia": "^2.0.0-rc.6",
     "resize-observer-polyfill": "^1.5.1",
     "responsive-storage": "^1.0.4",
     "v-contextmenu": "^3.0.0",
-    "vue": "^3.1.2",
+    "vue": "^3.2.6",
-    "vue-i18n": "^9.1.6",
+    "vue-i18n": "^9.2.0-beta.3",
     "vue-json-pretty": "^2.0.2",
-    "vue-router": "^4.0.9",
+    "vue-router": "^4.0.11",
-    "vue-types": "^3.0.2",
+    "vue-types": "^4.0.3",
-    "vuedraggable": "^4.0.3",
+    "vuedraggable": "^4.1.0",
-    "vxe-table": "^4.0.21",
+    "vxe-table": "^4.0.27",
-    "wangeditor": "^4.0.3",
+    "wangeditor": "^4.7.7",
     "xe-ajax": "^4.0.5",
-    "xe-utils": "^3.2.1",
+    "xe-utils": "^3.3.1",
-    "xgplayer": "^2.22.1"
+    "xgplayer": "^2.28.0"
   },
   "devDependencies": {
     "@types/mockjs": "^1.0.3",
@@ -59,9 +59,9 @@
     "@types/nprogress": "^0.2.0",
     "@typescript-eslint/eslint-plugin": "^4.28.1",
     "@typescript-eslint/parser": "^4.28.1",
-    "@vitejs/plugin-vue": "^1.2.4",
+    "@vitejs/plugin-vue": "^1.6.0",
-    "@vitejs/plugin-vue-jsx": "^1.1.6",
+    "@vitejs/plugin-vue-jsx": "^1.1.7",
-    "@vue/compiler-sfc": "^3.1.2",
+    "@vue/compiler-sfc": "^3.2.6",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
     "autoprefixer": "^10.2.4",
@@ -79,9 +79,10 @@
     "sass": "^1.38.0",
     "sass-loader": "^12.1.0",
     "typescript": "^4.2.4",
-    "vite": "^2.5.0",
+    "vite": "^2.5.1",
-    "vite-plugin-mock": "^2.8.0",
+    "vite-plugin-element-plus": "^0.0.9",
-    "vite-plugin-style-import": "^1.1.1",
+    "vite-plugin-mock": "^2.9.6",
+    "vite-plugin-style-import": "^1.2.1",
     "vue-eslint-parser": "^7.7.2"
   },
   "lint-staged": {

src/layout/components/sidebar/SidebarItem.vue

@@ -20,7 +20,7 @@
       </app-link>
     </template>
 
-    <el-submenu
+    <el-sub-menu
       v-else
       ref="subMenu"
       :index="resolvePath(item.path)"
@@ -38,7 +38,7 @@
         :base-path="resolvePath(child.path)"
         class="nest-menu"
       />
-    </el-submenu>
+    </el-sub-menu>
   </div>
 </template>
 

src/main.ts

@@ -6,7 +6,7 @@ import { setupStore } from "/@/store";
 import { useElementPlus } from "../src/plugins/element-plus";
 import { useTable } from "../src/plugins/vxe-table";
 import { usI18n } from "../src/plugins/i18n";
-
+import "element-plus/dist/index.css";
 // 导入公共样式
 import "./style/index.scss";
 // 导入字体图标

src/plugins/element-plus/index.ts

@@ -5,7 +5,7 @@ import {
   ElBreadcrumb,
   ElBreadcrumbItem,
   ElScrollbar,
-  ElSubmenu,
+  ElSubMenu,
   ElButton,
   ElCol,
   ElRow,
@@ -32,7 +32,6 @@ import {
   ElRadioButton,
   ElRadioGroup
 } from "element-plus";
-import "element-plus/packages/theme-chalk/src/base.scss";
 
 const components = [
   ElAffix,
@@ -40,7 +39,7 @@ const components = [
   ElBreadcrumb,
   ElBreadcrumbItem,
   ElScrollbar,
-  ElSubmenu,
+  ElSubMenu,
   ElButton,
   ElCol,
   ElRow,

src/style/sidebar.scss

@@ -77,7 +77,7 @@
     }
 
     .el-menu-item,
-    .el-submenu__title {
+    .el-sub-menu__title {
       color: $menuText;
     }
 
@@ -87,14 +87,14 @@
 
     // menu hover
     .submenu-title-noDropdown,
-    .el-submenu__title {
+    .el-sub-menu__title {
       &:hover {
         background-color: $menuHover !important;
       }
       background: $menuBg;
     }
 
-    .is-active > .el-submenu__title,
+    .is-active > .el-sub-menu__title,
     .is-active.submenu-title-noDropdown {
       color: $subMenuActiveText !important;
       i {
@@ -107,8 +107,8 @@
       color: $subMenuActiveText !important;
     }
 
-    & .nest-menu .el-submenu > .el-submenu__title,
+    & .nest-menu .el-sub-menu > .el-sub-menu__title,
-    & .el-submenu .el-menu-item {
+    & .el-sub-menu .el-menu-item {
       font-size: 12px;
       min-width: $sideBarWidth !important;
       background-color: $subMenuBg !important;
@@ -137,10 +137,10 @@
       }
     }
 
-    .el-submenu {
+    .el-sub-menu {
       overflow: hidden;
-      & > .el-submenu__title {
+      & > .el-sub-menu__title {
-        .el-submenu__icon-arrow {
+        .el-sub-menu__icon-arrow {
           display: none;
         }
       }
@@ -148,8 +148,8 @@
 
     .el-menu--collapse {
       margin-left: -5px; //需优化的地方
-      .el-submenu {
+      .el-sub-menu {
-        & > .el-submenu__title {
+        & > .el-sub-menu__title {
           & > span {
             height: 0;
             width: 0;
@@ -173,7 +173,7 @@
           background-color: $subMenuHover;
         }
       }
-      .el-submenu__title {
+      .el-sub-menu__title {
         color: $menuText;
       }
     }
@@ -183,7 +183,7 @@
       }
     }
 
-    .is-active > .el-submenu__title,
+    .is-active > .el-sub-menu__title,
     .is-active.submenu-title-noDropdown {
       color: $subMenuActiveText !important;
       i {
@@ -196,7 +196,7 @@
       color: $subMenuActiveText !important;
     }
 
-    .nest-menu .el-submenu > .el-submenu__title,
+    .nest-menu .el-sub-menu > .el-sub-menu__title,
     .el-menu-item {
       &:hover {
         // you can use $subMenuHover
@@ -210,7 +210,7 @@
     height: 100%;
   }
 
-  .el-menu--collapse .el-menu .el-submenu {
+  .el-menu--collapse .el-menu .el-sub-menu {
     min-width: $sideBarWidth !important;
   }
 

vite.config.ts

@@ -6,6 +6,7 @@ import { loadEnv } from "./build/utils";
 import { createProxy } from "./build/proxy";
 import { viteMockServe } from "vite-plugin-mock";
 import styleImport from "vite-plugin-style-import";
+import VitePluginElementPlus from "vite-plugin-element-plus";
 
 const pathResolve = (dir: string): any => {
   return resolve(__dirname, ".", dir);
@@ -53,18 +54,6 @@ export default ({ command }: ConfigEnv): UserConfigExport => {
       vueJsx(),
       styleImport({
         libs: [
-          // 按需加载element-plus
-          {
-            libraryName: "element-plus",
-            esModule: true,
-            ensureStyleFile: true,
-            resolveStyle: name => {
-              return `element-plus/lib/theme-chalk/${name}.css`;
-            },
-            resolveComponent: name => {
-              return `element-plus/lib/${name}`;
-            }
-          },
           // 按需加载vxe-table
           {
             libraryName: "vxe-table",
@@ -74,6 +63,7 @@ export default ({ command }: ConfigEnv): UserConfigExport => {
           }
         ]
       }),
+      VitePluginElementPlus({ useSource: true }),
       viteMockServe({
         mockPath: "mock",
         localEnabled: command === "serve",