后台管理框架搭建

package-lock.json

@@ -32,6 +32,8 @@
         "@vue/cli-service": "~5.0.0",
         "eslint": "^7.32.0",
         "eslint-plugin-vue": "^8.0.3",
+        "less": "^4.1.3",
+        "less-loader": "^11.1.3",
         "node-sass": "^9.0.0",
         "sass-loader": "^13.3.2",
         "vue-template-compiler": "^2.6.14"
@@ -4841,6 +4843,15 @@
       "resolved": "https://registry.npmmirror.com/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
     },
+    "node_modules/copy-anything": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz",
+      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "dev": true,
+      "dependencies": {
+        "is-what": "^3.14.1"
+      }
+    },
     "node_modules/copy-webpack-plugin": {
       "version": "9.1.0",
       "resolved": "https://registry.npmmirror.com/copy-webpack-plugin/-/copy-webpack-plugin-9.1.0.tgz",
@@ -5784,6 +5795,19 @@
       "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==",
       "dev": true
     },
+    "node_modules/errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "prr": "~1.0.1"
+      },
+      "bin": {
+        "errno": "cli.js"
+      }
+    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmmirror.com/error-ex/-/error-ex-1.3.2.tgz",
@@ -7820,6 +7844,19 @@
         "node": ">= 4"
       }
     },
+    "node_modules/image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -8230,6 +8267,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true
+    },
     "node_modules/is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -8604,6 +8647,79 @@
         "launch-editor": "^2.6.0"
       }
     },
+    "node_modules/less": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmmirror.com/less/-/less-4.1.3.tgz",
+      "integrity": "sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==",
+      "dev": true,
+      "dependencies": {
+        "copy-anything": "^2.0.1",
+        "parse-node-version": "^1.0.1",
+        "tslib": "^2.3.0"
+      },
+      "bin": {
+        "lessc": "bin/lessc"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "optionalDependencies": {
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^3.1.0",
+        "source-map": "~0.6.0"
+      }
+    },
+    "node_modules/less-loader": {
+      "version": "11.1.3",
+      "resolved": "https://registry.npmmirror.com/less-loader/-/less-loader-11.1.3.tgz",
+      "integrity": "sha512-A5b7O8dH9xpxvkosNrP0dFp2i/dISOJa9WwGF3WJflfqIERE2ybxh1BFDj5CovC2+jCE4M354mk90hN6ziXlVw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14.15.0"
+      },
+      "peerDependencies": {
+        "less": "^3.5.0 || ^4.0.0",
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/less/node_modules/make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/less/node_modules/pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/less/node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmmirror.com/levn/-/levn-0.4.1.tgz",
@@ -9662,6 +9778,47 @@
       "resolved": "https://registry.npmmirror.com/natural-compare/-/natural-compare-1.4.0.tgz",
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
     },
+    "node_modules/needle": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/needle/-/needle-3.2.0.tgz",
+      "integrity": "sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "debug": "^3.2.6",
+        "iconv-lite": "^0.6.3",
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "needle": "bin/needle"
+      },
+      "engines": {
+        "node": ">= 4.4.x"
+      }
+    },
+    "node_modules/needle/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/needle/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmmirror.com/negotiator/-/negotiator-0.6.3.tgz",
@@ -10585,6 +10742,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/parse5": {
       "version": "5.1.1",
       "resolved": "https://registry.npmmirror.com/parse5/-/parse5-5.1.1.tgz",
@@ -11604,6 +11770,13 @@
       "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
+    "node_modules/prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",
@@ -12121,6 +12294,13 @@
         }
       }
     },
+    "node_modules/sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmmirror.com/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/schema-utils": {
       "version": "2.7.1",
       "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.1.tgz",
@@ -18800,6 +18980,15 @@
       "resolved": "https://registry.npmmirror.com/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
     },
+    "copy-anything": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz",
+      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "dev": true,
+      "requires": {
+        "is-what": "^3.14.1"
+      }
+    },
     "copy-webpack-plugin": {
       "version": "9.1.0",
       "resolved": "https://registry.npmmirror.com/copy-webpack-plugin/-/copy-webpack-plugin-9.1.0.tgz",
@@ -19549,6 +19738,16 @@
       "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==",
       "dev": true
     },
+    "errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "prr": "~1.0.1"
+      }
+    },
     "error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmmirror.com/error-ex/-/error-ex-1.3.2.tgz",
@@ -21137,6 +21336,13 @@
       "resolved": "https://registry.npmmirror.com/ignore/-/ignore-5.2.4.tgz",
       "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ=="
     },
+    "image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "dev": true,
+      "optional": true
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -21424,6 +21630,12 @@
         "call-bind": "^1.0.2"
       }
     },
+    "is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true
+    },
     "is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -21722,6 +21934,58 @@
         "launch-editor": "^2.6.0"
       }
     },
+    "less": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmmirror.com/less/-/less-4.1.3.tgz",
+      "integrity": "sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==",
+      "dev": true,
+      "requires": {
+        "copy-anything": "^2.0.1",
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^3.1.0",
+        "parse-node-version": "^1.0.1",
+        "source-map": "~0.6.0",
+        "tslib": "^2.3.0"
+      },
+      "dependencies": {
+        "make-dir": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz",
+          "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "pify": "^4.0.1",
+            "semver": "^5.6.0"
+          }
+        },
+        "pify": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+          "dev": true,
+          "optional": true
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
+    "less-loader": {
+      "version": "11.1.3",
+      "resolved": "https://registry.npmmirror.com/less-loader/-/less-loader-11.1.3.tgz",
+      "integrity": "sha512-A5b7O8dH9xpxvkosNrP0dFp2i/dISOJa9WwGF3WJflfqIERE2ybxh1BFDj5CovC2+jCE4M354mk90hN6ziXlVw==",
+      "dev": true,
+      "requires": {}
+    },
     "levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmmirror.com/levn/-/levn-0.4.1.tgz",
@@ -22580,6 +22844,40 @@
       "resolved": "https://registry.npmmirror.com/natural-compare/-/natural-compare-1.4.0.tgz",
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
     },
+    "needle": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/needle/-/needle-3.2.0.tgz",
+      "integrity": "sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "debug": "^3.2.6",
+        "iconv-lite": "^0.6.3",
+        "sax": "^1.2.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmmirror.com/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "iconv-lite": {
+          "version": "0.6.3",
+          "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
+          "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3.0.0"
+          }
+        }
+      }
+    },
     "negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmmirror.com/negotiator/-/negotiator-0.6.3.tgz",
@@ -23292,6 +23590,12 @@
         "lines-and-columns": "^1.1.6"
       }
     },
+    "parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "dev": true
+    },
     "parse5": {
       "version": "5.1.1",
       "resolved": "https://registry.npmmirror.com/parse5/-/parse5-5.1.1.tgz",
@@ -24045,6 +24349,13 @@
       "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
+    "prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "dev": true,
+      "optional": true
+    },
     "pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",
@@ -24442,6 +24753,13 @@
         "neo-async": "^2.6.2"
       }
     },
+    "sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmmirror.com/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+      "dev": true,
+      "optional": true
+    },
     "schema-utils": {
       "version": "2.7.1",
       "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.1.tgz",

package.json

@@ -32,6 +32,8 @@
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
+    "less": "^4.1.3",
+    "less-loader": "^11.1.3",
     "node-sass": "^9.0.0",
     "sass-loader": "^13.3.2",
     "vue-template-compiler": "^2.6.14"

src/assets/styles/element-variables.scss

@@ -89,4 +89,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
 }
 .el-avatar{
   background-color: transparent;
+}
+.el-tag {
+  border-radius: 15px!important;
 }

src/components/Home/Header.vue

@@ -123,7 +123,7 @@
                     multiple>
                     <i class="el-icon-upload"></i>
                     <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
+                    <div class="el-upload__tip" slot="tip">只能上传zip文件，且不超过50mb</div>
                 </el-upload>
             </div>
 
@@ -204,7 +204,6 @@ export default {
                 name: null,
                 tags: [],
                 tag: [],
-                fileList: [],
                 content: null,
             },
             rules: {
@@ -320,44 +319,54 @@ export default {
         closeUploadFile(){
             this.openPublishProject=false;
             this.openUploadFile=false;
+            window.location.reload();
         },
         submitProject(){
-            if (this.form.tag) {
+            if(this.avatar_url===null||this.form.name===null|| this.form.url===null||this.form.title===null||this.form.content===null||this.form.tag.length===0){
-                this.form.tag = this.form.tag.join(",");
+                Vue.prototype.$notify.error({
+                    title: '错误',
+                    message: "请先填写相关信息！",
+                    offset: 50
+                });
+            }else {
+                if (this.form.tag) {
+                    this.form.tag = this.form.tag.join(",");
+                }
+                Object.assign({}, this.form);
+                var that=this;
+                axios({
+                    method: 'post',
+                    // 请求的地址
+                    url: 'http://localhost:8082/helloGithub_war_exploded/commitProject',
+                    // URL 中的查询参数
+                    params: {
+                        projectIco:this.avatar_url,
+                        projectName:this.form.name,
+                        projectUrl:this.form.url,
+                        projectTitle:this.form.title,
+                        projectDescription:this.form.content,
+                        categoryIdList:this.form.tag
+                    }
+                }).then( (res)=> {
+                    if(res.data.code===200){
+                        Vue.prototype.$notify({
+                            title: '成功',
+                            message: ('i', {style: 'color: teal'}, res.data.msg),
+                            type: 'success',
+                            offset: 50
+                        });
+                        this.openPublishProject=false;
+                        that.openUploadFile=true
+                    }else{
+                        Vue.prototype.$notify.error({
+                            title: '错误',
+                            message: res.data.msg,
+                            offset: 50
+                        });
+                    }
+                });
             }
-            Object.assign({}, this.form);
+
-            var that=this;
-            axios({
-                method: 'post',
-                // 请求的地址
-                url: 'http://localhost:8082/helloGithub_war_exploded/commitProject',
-                // URL 中的查询参数
-                params: {
-                    projectIco:this.avatar_url,
-                    projectName:this.form.name,
-                    projectUrl:this.form.url,
-                    projectTitle:this.form.title,
-                    projectDescription:this.form.content,
-                    categoryIdList:this.form.tag
-                }
-            }).then( (res)=> {
-                if(res.data.code===200){
-                    Vue.prototype.$notify({
-                        title: '成功',
-                        message: ('i', {style: 'color: teal'}, res.data.msg),
-                        type: 'success',
-                        offset: 50
-                    });
-                    this.openPublishProject=false;
-                    that.openUploadFile=true
-                }else{
-                    Vue.prototype.$notify.error({
-                        title: '错误',
-                        message: res.data.msg,
-                        offset: 50
-                    });
-                }
-            });
         },
         isExist(){
             axios({

src/components/Home/SearchInput.vue

@@ -17,7 +17,7 @@
                     </div>
                     <div v-if="historySearch!==null" v-show="this.$cookie.get('username')!=null">
                         <el-tag
-                            v-show="historySearch.length!==0"
+                            v-if="historySearch.length!==0"
                             v-for="(tag,index) in historySearch"
                             :key="index"
                             size="small"
@@ -149,6 +149,7 @@ export default {
                 params: {
                 }
             }).then((res)=>{
+                console.log(res.data.length);
                 that.historySearch=res.data;
 
             });

src/components/Project/ProjectDetail.vue

@@ -51,7 +51,7 @@
                               <el-dropdown-menu slot="dropdown">
                                   <el-dropdown-item><el-link :underline="false" @click="goTo(projectUrl)">源码</el-link></el-dropdown-item>
                                   <el-dropdown-item> <el-link :underline="false" @click="goTo('https://github.com/'+projectName+'/releases')">官方下载</el-link></el-dropdown-item>
-                                  <el-dropdown-item v-show="fileAddress!=''"> <el-link @click="Download" :underline="false">快速下载</el-link></el-dropdown-item>
+                                  <el-dropdown-item v-show="fileAddress!==undefined"> <el-link @click="Download" :underline="false">快速下载</el-link></el-dropdown-item>
                               </el-dropdown-menu>
                           </el-dropdown>
                           <el-button v-show="isRouterAlive" v-if="Like===0" @click="addStar" style="height: 60px;width: 150px;margin-left: 10px" icon="el-icon-star-off" type="success">点 赞 {{startNum}}</el-button>
@@ -84,8 +84,8 @@
                                       </tr>
                                       <tr>
                                           <td style="font-size: 20px;color: black;font-weight: bold">{{formatNumber(github.starNum)}}</td>
-                                          <td style="font-size: 20px;color: black;font-weight: bold;">{{briefName}}</td>
+                                          <td v-if="github.name!==null" style="font-size: 20px;color: black;font-weight: bold;">{{briefName}}</td>
-                                          <td style="font-size: 20px;color: black;font-weight: bold">{{brief}}</td>
+                                          <td v-if="github.language!==null" style="font-size: 20px;color: black;font-weight: bold">{{brief}}</td>
                                           <td v-if="github.allow_forking" style="font-size: 20px;color: black;font-weight: bold">是</td>
                                           <td v-if="!github.allow_forking" style="font-size: 20px;color: black;font-weight: bold">否</td>
                                           <td style="font-size: 20px;color: black;font-weight: bold">{{formatNumber(github.subscribers_count)}}</td>
@@ -104,6 +104,7 @@
                                       <tr>
                                           <td style="font-size: 20px;color: black;font-weight: bold">{{github.open_issues_count}}</td>
                                           <td v-if="github.organization==='Organization'" style="font-size: 20px;color: black;font-weight: bold">是</td>
+                                          <td v-else-if="github.organization!=='Organization'" style="font-size: 20px;color: black;font-weight: bold">否</td>
                                           <td style="font-size: 20px;color: black;font-weight: bold">{{github.default_branch}}</td>
                                           <td style="font-size: 20px;color: black;font-weight: bold">{{formatNumber(github.forks_count)}}</td>
                                           <td style="font-size: 20px;color: black;font-weight: bold">{{github.license}}</td>
@@ -117,7 +118,7 @@
                   <div>
                       <el-tabs v-model="activeName">
                           <el-tab-pane label="介绍" name="first">
-                              <el-tiptap v-html="projectDescription"  :readonly="true" :showMenubar="false" :extensions="extensions" />
+                              <el-tiptap style="text-align: left;border: 1px solid rgba(150,152,150,0.87)" v-model="projectDescription" :readonly="true" :showMenubar="false" :extensions="extensions" />
                               <div style="display:flex;align-items: center;flex-direction: row;justify-content: space-between">
                                   <div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center">
                                       <span style="font-size: 14px;margin-top: 10px">收录于: </span><el-tag style="margin-left: 10px;margin-top: 10px" size="medium">第 {{periodicals}} 期</el-tag>
@@ -370,7 +371,7 @@ export default {
             totalStar:3.7,
             Content:'',
             imageUrl:'',
-            fileAddress:null,
+            fileAddress:'',
         }
     },
     mounted() {
@@ -378,7 +379,7 @@ export default {
         this.getLastComment();
         this.isStart();
         // this.getUserInfo();
-
+        this.getGithub();
     },
     watch: {
         $route () {
@@ -445,6 +446,7 @@ export default {
                 that.fileAddress=res.data.project.fileAddress;
                 // that.userUri=res.data.project.userUri;
                 that.getDetailByGitHub();
+                // that.getGithub();
                 that.changeAvatarByLocal();
             });
         },
@@ -698,19 +700,25 @@ export default {
 
                 }
             }).then((res)=>{
-                that.github.starNum=res.data.stargazers_count;
+                if(res.data){
-                that.github.language=res.data.language;
+                    that.github.starNum=res.data.stargazers_count;
-                that.github.watchers_count=res.data.watchers_count;
+                    that.github.language=res.data.language;
-                that.github.subscribers_count=res.data.subscribers_count;
+                    that.github.watchers_count=res.data.watchers_count;
-                that.github.allow_forking=res.data.allow_forking;
+                    that.github.subscribers_count=res.data.subscribers_count;
-                that.github.open_issues_count=res.data.open_issues_count;
+                    that.github.allow_forking=res.data.allow_forking;
-                that.github.forks_count=res.data.forks_count;
+                    that.github.open_issues_count=res.data.open_issues_count;
-                that.github.organization=res.data.organization.type;
+                    that.github.forks_count=res.data.forks_count;
-                that.github.license=res.data.license.spdx_id;
+                    that.github.organization=res.data.owner.type;
-                that.github.name=res.data.name;
+                    that.github.license=res.data.license.spdx_id;
-                that.github.default_branch=res.data.default_branch;
+                    that.github.name=res.data.name;
-                that.github.avatar_url=res.data.owner.avatar_url;
+                    that.github.default_branch=res.data.default_branch;
-                that.saveGithubInfo();
+                    that.github.avatar_url=res.data.owner.avatar_url;
+                    that.saveGithubInfo();
+                    return true;
+                }else{
+                    return false;
+                }
+
             });
 
         },
@@ -756,19 +764,24 @@ export default {
         },
 
         changeAvatarByLocal(){
-            var that=this;
+            if(this.username!==null){
-            axios({
+                var that=this;
-                method: 'post',
+                axios({
-                // 请求的地址
+                    method: 'post',
-                url: '/api/retUserAv',
+                    // 请求的地址
-                // URL 中的查询参数
+                    url: '/api/retUserAv',
-                params:{
+                    // URL 中的查询参数
-                    username:this.username,
+                    params:{
-                },
+                        username:this.username,
-                responseType:'blob'
+                    },
-            }).then((res)=>{
+                    responseType:'blob'
-               that.imageUrl = window.URL.createObjectURL(res.data)//这里也是关键,调用window的这个方法URL方法
+                }).then((res)=>{
-            })
+                    that.imageUrl = window.URL.createObjectURL(res.data)//这里也是关键,调用window的这个方法URL方法
+                })
+            }else{
+                return;
+            }
+
 
         },
         Download(){
@@ -790,7 +803,36 @@ export default {
             //         type:"success"
             //     });
             // })
-        }
+        },
+
+        getGithub(){
+            var that=this;
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/returnGithubInfo',
+                // URL 中的查询参数
+                params: {
+                    projectId:this.$route.query.id
+                }
+            }).then(function (res) {
+                if(!res.data){
+                    return false;
+                }else{
+                    that.github.starNum=res.data.starCount;
+                    that.github.language=res.data.mainLanguage;
+                    that.github.subscribers_count=res.data.subscriber;
+                    that.github.open_issues_count=res.data.issues;
+                    that.github.forks_count=res.data.forks;
+                    that.github.allow_forking=res.data.isActive;
+                    that.github.license=res.data.protocol;
+                    that.github.name=res.data.name;
+                    that.github.default_branch=res.data.defaultBranch;
+                    that.github.avatar_url=res.data.avatar;
+                }
+
+            });
+        },
 
 
     },

src/components/System/AdminAside.vue

@@ -0,0 +1,71 @@
+<template>
+    <div>
+        <div style="height: 60px;width: 200px;display: flex;align-items: center;justify-content: center">
+            <span style="font-size: 18px;font-weight: bold;color: #42b983;">
+                {{systemName}}
+            </span>
+        </div>
+        <el-menu
+            :collapse="isCollapse"
+            @close="handleClose"
+            @open="handleOpen"
+            active-text-color="#ffd04b"
+            background-color="#545c64"
+            class="el-menu-vertical-demo"
+            text-color="#FBFBFB"
+            width="200px"
+            :default-active="$route.path"
+            router
+        >
+
+        <el-menu-item   index="/adminHome"><i class="el-icon-s-home"></i>首页</el-menu-item>
+        <el-menu-item index="/systemManage"><i class="el-icon-s-tools"></i>系统管理</el-menu-item>
+        <el-menu-item index="/userManage"><i class="el-icon-user-solid"></i>用户管理</el-menu-item>
+        <el-menu-item index="/projectManage"><i class="el-icon-s-help"></i>项目管理</el-menu-item>
+        <el-menu-item index="/articleManage"><i class="el-icon-s-management"></i>文章管理</el-menu-item>
+        <el-menu-item index="/categoryManage"><i class="el-icon-s-flag"></i>标签管理</el-menu-item>
+        <el-menu-item index="/commentManage"><i class="el-icon-s-comment"></i>评论管理</el-menu-item>
+
+        </el-menu>
+    </div>
+
+</template>
+
+<script>
+
+export default {
+    name: "AdminAside",
+    data() {
+        return {
+            systemName:'HelloGithub后台管理'
+        }
+    },
+    methods: {
+        handleOpen(key, keyPath) {
+            console.log(key, keyPath);
+        },
+        handleClose(key, keyPath) {
+            console.log(key, keyPath);
+        },
+
+    },
+    computed:{
+        isCollapse() {
+            return this.$store.state.isCollapse;
+        },
+    },
+
+
+}
+</script>
+
+<style scoped>
+/deep/ .el-submenu__title {
+    width: 200px;
+}
+
+/deep/ .el-menu-item-group__title {
+    width: 200px;
+}
+
+</style>

src/components/System/AdminHeader.vue

@@ -0,0 +1,71 @@
+<template>
+    <div style="display:flex;flex-direction: row;justify-content: space-between;background:rgb(84, 92, 100);align-items:center">
+        <div>
+            <el-button @click="handleMenu" icon="el-icon-menu" size="mini"></el-button>
+            <BreadCrumb></BreadCrumb>
+        </div>
+
+        <div>
+            <el-menu default-active=""
+                     background-color="#545c64"
+                     class="el-menu-demo"
+                     mode="horizontal"
+                     text-color="#ffffff">
+                <el-menu-item>
+                    <i class="el-icon-s-platform"></i>大屏展示
+                </el-menu-item>
+                <el-menu-item>
+                    <el-dropdown trigger="click">
+                        <div style="height:100%;">
+                            <i class="el-icon-user"></i>
+                            <span style="color:#fff">超级管理员</span>
+                            <i class="el-icon-caret-bottom" />
+                        </div>
+                        <el-dropdown-menu>
+<!--                            <el-dropdown-item>-->
+<!--                                <span style="display:block;">修改密码</span>-->
+<!--                            </el-dropdown-item>-->
+                            <el-dropdown-item @click.native="logout">
+                                <span style="display:block;">退出系统</span>
+                            </el-dropdown-item>
+                        </el-dropdown-menu>
+                    </el-dropdown>
+                </el-menu-item>
+            </el-menu>
+        </div>
+    </div>
+
+</template>
+
+<script>
+
+import BreadCrumb from "@/components/System/BreadCrumb.vue";
+
+export default {
+    name: "AdminHeader",
+    components: {BreadCrumb},
+    data(){
+        return{
+        }
+    },
+    methods:{
+        logout(){
+            if(this.$cookie.get('adminName')){
+                this.$cookie.delete('adminName');
+                this.$router.push({
+                    path:'/adminLogin'
+                })
+            }
+        },
+        handleMenu() {
+            // 相当于调用这个方法
+            this.$store.commit('CollapseMenu')
+        },
+    }
+
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/System/AdminHome.vue

@@ -0,0 +1,31 @@
+<template>
+    <div style="display: flex;flex-direction: ">
+
+    </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import Vue from "vue";
+Vue.prototype.$echarts = echarts;
+
+
+export default {
+    data() {
+        return {
+
+
+        }
+    },
+    methods: {
+
+    },
+    mounted() {
+
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/System/AdminLogin.vue

@@ -1,24 +1,143 @@
 <template>
-  <div class="adminLogin">
+    <el-form ref="ruleForm" class="login_container" :model="login" status-icon :rules="rules" label-width="70px">
-      666
+        <!-- h3要放在里面:只能有一个根,且title也是表单的一部分 -->
-  </div>
+        <h3 class="login_title">管理员登录</h3>
+        <!-- prop对应rules里的键 -->
+        <el-form-item label="账 户" prop="username">
+            <el-input v-model="login.username" auto-complete="off" placeholder='请输入用户名' clearable></el-input>
+        </el-form-item>
+
+        <el-form-item label="密 码" prop="password">
+            <el-input type="password" v-model="login.password" auto-complete="new-password"
+                      placeholder='请输入密码'
+                       clearable></el-input>
+        </el-form-item>
+
+        <el-form-item label="验 证" prop="code">
+            <el-input
+                prefix-icon="el-icon-mobile-phone"
+                type="text"
+                clearable
+                placeholder="点击图片更换验证码"
+                v-model="login.code"
+                class="vertify_code"
+                auto-complete="false"
+                style="width: 175px"
+            ></el-input>
+            <!-- <span class="code">验证码</span> -->
+            <img :src="imageUrl" @click="resetImg" class="vertify_img"/>
+        </el-form-item>
+
+        <el-form-item>
+            <div style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;justify-content: space-between">
+                <el-button @click="resetForm('ruleForm')">重置</el-button>
+                <el-button @click="submit('ruleForm')" type="primary" style=";margin-top:10px">提交</el-button>
+            </div>
+        </el-form-item>
+    </el-form>
 </template>
 
 <script>
-
+import axios from "axios";
+import Vue from "vue";
 
 export default {
-    name: "AdminLogin",
+    data() {
-    data: function () {
+        return {
+            imageUrl: "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date().getDate(),
+            // 登陆数据
+            login: {
+                username: '',
+                password: '',
+                code:'',
+            },
+            // 校验规则
+            rules: {
+                username: [{ required: 'true', message: '请输入用户名', trigger: 'blur' }],
+                password: [{ required: 'true', message: '请输入用户名', trigger: 'blur' }],
+                code: [{ required: 'true', message: '请输入验证码', trigger: 'blur' }],
 
+            }
+        }
     },
-
     methods: {
+        resetImg() {
+            this.imageUrl = "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date().getTime();
+        },
+        submit(formName){
+            var _this=this;
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
 
+                    //调用方法提交
+                    axios({
+                        method: 'post',
+                        // 请求的地址
+                        url: 'http://localhost:8082/helloGithub_war_exploded/adminLogin',
+                        // URL 中的查询参数
+                        params: {
+                            adminname: this.login.username,
+                            password: this.login.password,
+                            code: this.login.code,
+                        }
+                    }).then(function (res) {
+                        if (res.data.code === 200) {
+                            Vue.prototype.$notify({
+                                title: '成功',
+                                message: ('i', {style: 'color: teal'}, res.data.msg),
+                                type: 'success',
+                                offset: 50
+                            });
+                            _this.$cookie.set('adminName',_this.login.username);
+                            _this.$router.push({
+                                path:'/systemIndex',
+                            })
+                        } else {
+                            Vue.prototype.$notify.error({
+                                title: '错误',
+                                message: res.data.msg,
+                                offset: 50
+                            });
+                        }
+                    });
+                } else {
+                    return false;
+                }
+            });
+        },
+        resetForm(formName) {
+            this.$refs[formName].resetFields();
+        },
     }
-};
+}
 </script>
 
 <style scoped>
+.login_container {
+  width: 400px;
+  border: 1px solid #eaeaea;
 
+
+  margin: 100px auto;
+
+  padding: 35px 35px 15px 35px;
+
+
+  box-sizing: border-box;
+
+  border-radius: 15px;
+  background-color: #fff;
+  box-shadow: 0 0 25px #cac6c6;
+
+  .login_title {
+    color: #505458;
+
+    text-align: center;
+    margin-bottom: 40px;
+  }
+
+  .el-input {
+    width: 198px;
+  }
+}
 </style>

src/components/System/AdminTags.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="tabs">
+
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: "AdminTags",
+    methods: {
+
+    },
+    computed: {
+
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/System/BreadCrumb.vue

@@ -0,0 +1,32 @@
+<!--面包屑-->
+<template>
+    <el-breadcrumb separator="/" >
+        <el-breadcrumb-item v-for="(item,index) in lists" :key="item.path">
+            <router-link style="color: #eeeeee" :to="item.path">{{item.meta.title}}</router-link>
+        </el-breadcrumb-item>
+    </el-breadcrumb>
+</template>
+
+<script>
+export default {
+    name: "BreadCrumb",
+    data(){
+        return{
+            lists:[]            //定义一个数组 用于接收路由信息
+        }
+    },
+    created() {
+        console.log(this.$route.matched)
+        this.lists = this.$route.matched  //获取路由内的全部信息
+    },
+    //这里必须使用监听，否则无法实时获取路由变动信息。
+    // 监听后路由会实时变动，不然需要手动刷新路径才会改变
+watch:{
+    $route(to,from)  {
+        console.log(to)
+        this.lists = to.matched
+    }
+},
+}
+</script>
+

src/components/System/Manage/articleManage.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>文章管理</div>
+</template>
+
+<script>
+export default {
+    name: "articleManage"
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/System/Manage/categoryManage.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>标签管理</div>
+</template>
+
+<script>
+export default {
+    name: "categoryManage"
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/System/Manage/commentManage.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+      评论管理
+  </div>
+</template>
+
+<script>
+export default {
+    name: "commentManage"
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/System/Manage/projectManage.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+      项目管理
+  </div>
+</template>
+
+<script>
+export default {
+    name: "projectManage"
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/System/Manage/systemManage.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+      系统管理
+  </div>
+</template>
+
+<script>
+export default {
+    name: "systemManage"
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/System/Manage/userManage.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+      用户管理
+  </div>
+</template>
+
+<script>
+export default {
+    name: "userManage"
+}
+</script>
+
+<style scoped>
+
+</style>

src/main.js

@@ -6,6 +6,7 @@ import './assets/styles/element-variables.scss'
 import axios from "axios";
 import './assets/icon/iconfont.css'
 import store from './store'
+
 import * as echarts from 'echarts';//引入echarts
 Vue.prototype.$echarts = echarts //引入组件
 

src/router/index.js

@@ -11,6 +11,15 @@ import UserInfoPage from "@/components/User/UserInfoPage.vue";
 import ProjectDetail from "@/components/Project/ProjectDetail.vue";
 import ArticleDetail from "@/components/Paper/ArticleDetail.vue";
 import adminLogin from "@/components/System/AdminLogin.vue";
+import systemIndex from "@/views/systemIndex.vue";
+import AdminHome from "@/components/System/AdminHome.vue";
+import systemManage from "@/components/System/Manage/systemManage.vue";
+import userManage from "@/components/System/Manage/userManage.vue";
+import projectManage from "@/components/System/Manage/projectManage.vue";
+import commentManage from "@/components/System/Manage/commentManage.vue";
+import categoryManage from "@/components/System/Manage/categoryManage.vue";
+import articleManage from "@/components/System/Manage/articleManage.vue";
+
 const originalPush = VueRouter.prototype.push
 VueRouter.prototype.push = function push(location) {
     return originalPush.call(this, location).catch(err => err)
@@ -79,14 +88,65 @@ const routes = [
         path: '/adminLogin',
         name: 'adminLogin',
         component: adminLogin
-    }
+    }, {
+        path: '/systemIndex',
+        name: 'systemIndex',
+        component: systemIndex,
+        redirect: '/adminHome',
+        children: [
+            {
+                path: '/adminHome',
+                name: 'adminHome',
+                meta: {title: '首页'},
+                component: AdminHome
+            },
+            {
+                path: '/systemManage',
+                meta: {title: '系统管理'},
+                name: 'systemManage',
+                component: systemManage
+            },
+            {
+                path: '/userManage',
+                name: 'userManage',
+                meta: {title: '用户管理'},
+                component: userManage
+            },
+            {
+                path: '/projectManage',
+                meta: {title: '项目管理'},
+                name: 'projectManage',
+                component: projectManage
+            },
+            {
+                path: '/commentManage',
+                name: 'commentManage',
+                meta: {title: '评论管理'},
 
+                component: commentManage
+            },
+            {
+                path: '/categoryManage',
+                name: 'categoryManage',
+                meta: {title: '标签管理'},
+
+                component: categoryManage
+            },
+            {
+                path: '/articleManage',
+                meta: {title: '文章管理'},
+                name: 'articleManage',
+                component: articleManage
+            },
+
+        ]
+    }
 
 
 ]
 
 const router = new VueRouter({
-    mode:'history',
+    mode: 'history',
     routes
 })
 

src/store/index.js

@@ -1,21 +1,18 @@
-import Vue from 'vue'
+import Vue from "vue";
-import Vuex from 'vuex'
+import Vuex from 'vuex';
+
 
 Vue.use(Vuex)
 
+// 创建Vuex实例并导出
 export default new Vuex.Store({
-  state: {
+    state: {
-    // CookieUserName:""
+        isCollapse: false,//导航栏是否折叠
-  },
+         },
-  getters: {
+    mutations: {
-  },
+        // 修改导航栏展开和收起的方法
-  mutations: {
+        CollapseMenu(state) {
-    // saveCookieUserName(state,userName){
+            state.isCollapse = !state.isCollapse
-    //   state.pathName = userName;
+        },
-    // },
+    }
-  },
+})
-  actions: {
-  },
-  modules: {
-  }
-})

src/views/systemIndex.vue

@@ -0,0 +1,37 @@
+<template>
+    <el-container style="width: 100%;height: 100%;position:fixed;top:0;left: 0;">
+        <el-aside width="200px" style="background: rgb(84, 92, 100);top:0;left: 0;">
+            <AdminAside></AdminAside>
+        </el-aside>
+        <el-container style="height:calc(100% - 60px)">
+            <el-header style="padding:0;">
+                <AdminHeader></AdminHeader>
+            </el-header>
+            <AdminTags></AdminTags>
+            <el-main>
+                <div style="border:1px solid red;">
+                    <router-view></router-view>
+                </div>
+            </el-main>
+        </el-container>
+    </el-container>
+</template>
+
+<script>
+import AdminHeader from "@/components/System/AdminHeader.vue";
+import AdminAside from "@/components/System/AdminAside.vue";
+import AdminTags from "@/components/System/AdminTags.vue";
+
+export default {
+    name: "systemIndex",
+    components:{
+        AdminTags,
+        AdminAside,
+        AdminHeader
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

vue.config.js

@@ -13,7 +13,7 @@ module.exports = {
     proxy: {
       '/github': {
         //后端接口的baseurl
-        target: 'https://api.github.com/repos',
+        target: 'https://api.landaiqing.space/repos',
         //是否允许跨域
         changeOrigin: true,
         // ws: true,                       //是否代理 websockets