搞定图标

企业级管理系统/web/admin_system/package.json

@@ -30,6 +30,7 @@
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
+    "svg-sprite-loader": "^2.0.3",
     "vue-cli-plugin-element-plus": "~0.0.13"
   }
 }

企业级管理系统/web/admin_system/src/layout/components/Aside.vue

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2023-01-04 11:30:33
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-06 19:24:41
+ * @LastEditTime: 2023-01-07 11:53:26
  * @FilePath: \admin_system\src\layout\components\Aside.vue
  * @Description: 
  * 
@@ -16,16 +16,23 @@
                 <template v-if="hasOnlyChild(route.children)">
                     <!-- 当只有一个子路由时，直接渲染子路由 -->
                     <el-menu-item :index="route.children[0].path">
-                        <div>{{ route.children[0].meta && route.children[0].meta.title }}</div>
+                        <component :is="route.children[0].meta.icon" class="icons">
+                        </component>
+                        <!-- <el-icon v-html="route.children[0].meta && route.children[0].meta.icon"></el-icon> -->
+                        <template #title>{{ route.children[0].meta && route.children[0].meta.title }}</template>
                     </el-menu-item>
                 </template>
                 <template v-else>
                     <!-- 不是一个子路由时，有可能没有子路由，或者是多个子路由 -->
                     <el-sub-menu v-if="route.children && route.children.length" :index="route.path">
-                        <template #title>{{ route.meta && route.meta.title }}</template>
+                        <template #title>
+                            <component :is="route.children[0].meta.icon" class="icons"></component>
+                            <span>{{ route.meta && route.meta.title }}</span>
+                        </template>
                         <template v-for="child in route.children" :key="child.path">
                             <el-menu-item v-if="!child.hidden" :index="child.path">
-                                <div>{{ child.meta && child.meta.title }}</div>
+                                <component :is="route.children[0].meta.icon" class="icons"></component>
+                                <template #title>{{ child.meta && child.meta.title }}</template>
                             </el-menu-item>
                         </template>
                     </el-sub-menu>
@@ -33,7 +40,6 @@
             </template>
         </template>
     </el-menu>
-    <a href="#/newsedit">测试</a>
 </template>
 
 <script>
@@ -99,6 +105,12 @@ export default {
     /* background-color: #344a5f !important; */
 }
 
+.icons {
+    width: 1em;
+    height: 1em;
+    margin-right: 8px;
+}
+
 /* .el-menu-item {
     padding: 5px;
     border: 1px solid red;

企业级管理系统/web/admin_system/src/main.js

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-12-14 15:12:46
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-06 20:57:02
+ * @LastEditTime: 2023-01-07 11:23:18
  * @FilePath: \admin_system\src\main.js
  * @Description: 
  * 
@@ -25,11 +25,17 @@ import("element-plus/dist/index.css");
 // import "./assets/css/colors.css";
 
 import ElementPlus from "element-plus";
+import * as ElementPlusIconsVue from "@element-plus/icons-vue";
 import SvgIcon from "./components/svg/SvgIcon";
 
 const app = createApp(App);
 
 app.component("SvgIcon", SvgIcon);
 
+for (const [key, component] of Object.entries(ElementPlusIconsVue))
+{
+    app.component(key, component);
+}
+
 app.use(ElementPlus);
 app.use(store).use(router).mount('#app');

企业级管理系统/web/admin_system/src/router/index.js

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-12-14 15:12:46
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-06 19:06:51
+ * @LastEditTime: 2023-01-07 11:54:38
  * @FilePath: \admin_system\src\router\index.js
  * @Description: 定义应用路由配置
  * 
@@ -38,14 +38,16 @@ const routes = [
     path: "/console",
     name: "Console",
     meta: {
-      title: "总览"
+      title: "总览",
+      icon: "house",
     },
     children: [
       {
         path: "/desktop",
         name: "DeskTop",
         meta: {
-          title: "工作台"
+          title: "工作台",
+          icon: "house",
         },
         component: () => import("../views/overview/OverView.vue"),
       },
@@ -57,13 +59,15 @@ const routes = [
     name: "News",
     meta: {
       title: "信息管理",
+      icon: "edit",
     },
     children: [
       {
         path: "/newsIndex",
         name: "NewsIndex",
         meta: {
-          title: "信息列表"
+          title: "信息列表",
+          icon: "edit",
         },
         component: () => import("../views/news/News.vue"),
       },
@@ -71,7 +75,8 @@ const routes = [
         path: "/newsedit",
         name: "NewsEdit",
         meta: {
-          title: "信息编辑"
+          title: "信息编辑",
+          icon: "edit",
         },
         component: () => import("../views/news/NewsEdit.vue"),
       },
@@ -83,6 +88,7 @@ const routes = [
     name: "User",
     meta: {
       title: "人员管理",
+      icon: "edit",
     },
     component: () => import("../layout/Index.vue"),
   },

企业级管理系统/web/admin_system/vue.config.js

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-12-17 11:08:18
  * @LastEditors: Kane
- * @LastEditTime: 2022-12-22 23:47:51
+ * @LastEditTime: 2023-01-07 11:12:20
  * @FilePath: \admin_system\vue.config.js
  * @Description: 
  * 
@@ -16,6 +16,6 @@ module.exports = defineConfig(
       open: true,
       host: "localhost",
       port: 8000,
-    }
+    },
   }
 );