提交

.browserslistrc

@@ -0,0 +1,2 @@
+> 1%
+last 2 versions

.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -0,0 +1,4 @@
+路由权限的业务
+    1.定义好全部的路由地址
+    2.通过用户不同像后台请求不同的用户权限数据
+    3.对用户权限做对比：请求数据 == 全部的路由  取出来作为路由配置

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

mock/data/admin_login.json

@@ -0,0 +1,7 @@
+{
+    "code": 0,
+    "message": "登录成功",
+    "data": {
+        "token":"admin"
+    }
+}

mock/data/admin_permission.json

@@ -0,0 +1,39 @@
+{
+    "code": 0,
+    "message": "获取权限成功",
+    "data": [
+        {
+            "name": "订单管理",
+            "children": [
+                {
+                    "name": "订单列表"
+                },
+                {
+                    "name": "生产管理",
+                    "children": [
+                        {
+                            "name": "生产列表"
+                        },
+                        {
+                            "name": "审核管理"
+                        }
+                    ]
+                },
+                {
+                    "name": "退货管理"
+                }
+            ]
+        },
+        {
+            "name": "产品管理",
+            "children": [
+                {
+                    "name": "产品列表"
+                },
+                {
+                    "name": "产品分类"
+                }
+            ]
+        }
+    ]
+}

mock/data/vip_login.json

@@ -0,0 +1,7 @@
+{
+    "code": 0,
+    "message": "登录成功",
+    "data": {
+        "token":"vip"
+    }
+}

mock/data/vip_permission.json

@@ -0,0 +1,36 @@
+{
+    "code": 0,
+    "message": "获取权限成功",
+    "data": [
+        {
+            "name": "订单管理",
+            "children": [
+                {
+                    "name": "订单列表"
+                },
+                {
+                    "name": "生产管理",
+                    "children": [
+                        {
+                            "name": "生产列表"
+                        }
+                    ]
+                },
+                {
+                    "name": "退货管理"
+                }
+            ]
+        },
+        {
+            "name": "产品管理",
+            "children": [
+                {
+                    "name": "产品列表"
+                },
+                {
+                    "name": "产品分类"
+                }
+            ]
+        }
+    ]
+}

mock/index.js

@@ -0,0 +1,30 @@
+const express = require("express");
+const app = express();
+const vipLogin = require("./data/vip_login.json");
+const adminLogin = require("./data/admin_login.json");
+const adminPermission = require("./data/admin_permission.json");
+const vipPermission = require("./data/vip_permission.json");
+const url = require("url");
+
+app.get("/login", (req, res) => {
+    const user = url.parse(req.url, true).query.user;
+    if (user === 'admin') {
+        res.send(adminLogin)
+    } else {
+        res.send(vipLogin)
+    }
+})
+
+app.get("/permission", (req, res) => {
+    const user = url.parse(req.url, true).query.user;
+    if (user === 'admin') {
+        res.send(adminPermission)
+    } else {
+        res.send(vipPermission)
+    }
+})
+
+
+app.listen(3300, () => {
+    console.log('服务器运行在3300');
+})

mock/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "express": "^4.17.1"
+  }
+}

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "vue-permission-demo",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "axios": "^0.19.0",
+    "core-js": "^3.4.3",
+    "element-ui": "^2.4.5",
+    "register-service-worker": "^1.6.2",
+    "vue": "^2.6.10",
+    "vue-router": "^3.1.3",
+    "vuex": "^3.1.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.1.0",
+    "@vue/cli-plugin-pwa": "^4.1.0",
+    "@vue/cli-plugin-router": "^4.1.0",
+    "@vue/cli-plugin-vuex": "^4.1.0",
+    "@vue/cli-service": "^4.1.0",
+    "node-sass": "^4.9.2",
+    "sass": "^1.23.7",
+    "sass-loader": "^8.0.0",
+    "vue-cli-plugin-element": "^1.0.1",
+    "vue-template-compiler": "^2.6.10"
+  }
+}

public/img/icons/safari-pinned-tab.svg

@@ -0,0 +1,149 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="16.000000pt" height="16.000000pt" viewBox="0 0 16.000000 16.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,16.000000) scale(0.000320,-0.000320)"
+fill="#000000" stroke="none">
+<path d="M18 46618 c45 -75 122 -207 122 -211 0 -2 25 -45 55 -95 30 -50 55
+-96 55 -102 0 -5 5 -10 10 -10 6 0 10 -4 10 -9 0 -5 73 -135 161 -288 89 -153
+173 -298 187 -323 14 -25 32 -57 41 -72 88 -149 187 -324 189 -335 2 -7 8 -13
+13 -13 5 0 9 -4 9 -10 0 -5 46 -89 103 -187 175 -302 490 -846 507 -876 8 -16
+20 -36 25 -45 28 -46 290 -498 339 -585 13 -23 74 -129 136 -236 61 -107 123
+-215 137 -240 14 -25 29 -50 33 -56 5 -5 23 -37 40 -70 18 -33 38 -67 44 -75
+11 -16 21 -33 63 -109 14 -25 29 -50 33 -56 4 -5 21 -35 38 -65 55 -100 261
+-455 269 -465 4 -5 14 -21 20 -35 15 -29 41 -75 103 -180 24 -41 52 -88 60
+-105 9 -16 57 -100 107 -185 112 -193 362 -626 380 -660 8 -14 23 -38 33 -55
+11 -16 23 -37 27 -45 4 -8 26 -46 48 -85 23 -38 53 -90 67 -115 46 -81 64
+-113 178 -310 62 -107 121 -210 132 -227 37 -67 56 -99 85 -148 16 -27 32 -57
+36 -65 4 -8 15 -27 25 -42 9 -15 53 -89 96 -165 44 -76 177 -307 296 -513 120
+-206 268 -463 330 -570 131 -227 117 -203 200 -348 36 -62 73 -125 82 -140 10
+-15 21 -34 25 -42 4 -8 20 -37 36 -65 17 -27 38 -65 48 -82 49 -85 64 -111 87
+-153 13 -25 28 -49 32 -55 4 -5 78 -134 165 -285 87 -151 166 -288 176 -305
+10 -16 26 -43 35 -59 9 -17 125 -217 257 -445 132 -229 253 -441 270 -471 17
+-30 45 -79 64 -108 18 -29 33 -54 33 -57 0 -2 20 -37 44 -77 24 -40 123 -212
+221 -383 97 -170 190 -330 205 -355 16 -25 39 -65 53 -90 13 -25 81 -144 152
+-265 70 -121 137 -238 150 -260 12 -22 37 -65 55 -95 18 -30 43 -73 55 -95 12
+-22 48 -85 80 -140 77 -132 163 -280 190 -330 13 -22 71 -123 130 -225 59
+-102 116 -199 126 -217 10 -17 29 -50 43 -72 15 -22 26 -43 26 -45 0 -2 27
+-50 60 -106 33 -56 60 -103 60 -105 0 -2 55 -98 90 -155 8 -14 182 -316 239
+-414 13 -22 45 -79 72 -124 27 -46 49 -86 49 -89 0 -2 14 -24 30 -48 16 -24
+30 -46 30 -49 0 -5 74 -135 100 -176 5 -8 24 -42 43 -75 50 -88 58 -101 262
+-455 104 -179 199 -345 213 -370 14 -25 28 -49 32 -55 4 -5 17 -26 28 -45 10
+-19 62 -109 114 -200 114 -197 133 -230 170 -295 16 -27 33 -57 38 -65 17 -28
+96 -165 103 -180 4 -8 16 -28 26 -45 10 -16 77 -131 148 -255 72 -124 181
+-313 243 -420 62 -107 121 -209 131 -227 35 -62 323 -560 392 -678 38 -66 83
+-145 100 -175 16 -30 33 -59 37 -65 4 -5 17 -27 29 -47 34 -61 56 -100 90
+-156 17 -29 31 -55 31 -57 0 -2 17 -32 39 -67 21 -35 134 -229 251 -433 117
+-203 235 -407 261 -451 27 -45 49 -85 49 -88 0 -4 8 -19 19 -34 15 -21 200
+-341 309 -533 10 -19 33 -58 51 -87 17 -29 31 -54 31 -56 0 -2 25 -44 55 -94
+30 -50 55 -95 55 -98 0 -4 6 -15 14 -23 7 -9 27 -41 43 -71 17 -30 170 -297
+342 -594 171 -296 311 -542 311 -547 0 -5 5 -9 10 -9 6 0 10 -4 10 -10 0 -5
+22 -47 49 -92 27 -46 58 -99 68 -118 24 -43 81 -140 93 -160 5 -8 66 -114 135
+-235 69 -121 130 -227 135 -235 12 -21 259 -447 283 -490 10 -19 28 -47 38
+-62 11 -14 19 -29 19 -32 0 -3 37 -69 83 -148 99 -170 305 -526 337 -583 13
+-22 31 -53 41 -70 11 -16 22 -37 26 -45 7 -14 82 -146 103 -180 14 -24 181
+-311 205 -355 13 -22 46 -80 75 -130 29 -49 64 -110 78 -135 14 -25 51 -88 82
+-140 31 -52 59 -102 63 -110 4 -8 18 -33 31 -55 205 -353 284 -489 309 -535
+17 -30 45 -78 62 -106 18 -28 36 -60 39 -72 4 -12 12 -22 17 -22 5 0 9 -4 9
+-10 0 -5 109 -197 241 -427 133 -230 250 -431 259 -448 51 -90 222 -385 280
+-485 37 -63 78 -135 92 -160 14 -25 67 -117 118 -205 51 -88 101 -175 111
+-193 34 -58 55 -95 149 -257 51 -88 101 -173 110 -190 9 -16 76 -131 147 -255
+72 -124 140 -241 151 -260 61 -108 281 -489 355 -615 38 -66 77 -133 87 -150
+35 -63 91 -161 100 -175 14 -23 99 -169 128 -220 54 -97 135 -235 142 -245 4
+-5 20 -32 35 -60 26 -48 238 -416 276 -480 10 -16 26 -46 37 -65 30 -53 382
+-661 403 -695 10 -16 22 -37 26 -45 4 -8 26 -48 50 -88 24 -41 43 -75 43 -77
+0 -2 22 -40 50 -85 27 -45 50 -84 50 -86 0 -3 38 -69 83 -147 84 -142 302
+-520 340 -587 10 -19 34 -60 52 -90 18 -30 44 -75 57 -100 14 -25 45 -79 70
+-120 25 -41 56 -96 70 -121 14 -25 77 -133 138 -240 62 -107 122 -210 132
+-229 25 -43 310 -535 337 -581 11 -19 26 -45 34 -59 17 -32 238 -414 266 -460
+11 -19 24 -41 28 -49 3 -7 75 -133 160 -278 84 -146 153 -269 153 -274 0 -5 5
+-9 10 -9 6 0 10 -4 10 -10 0 -5 82 -150 181 -322 182 -314 201 -346 240 -415
+12 -21 80 -139 152 -263 71 -124 141 -245 155 -270 14 -25 28 -49 32 -55 6 -8
+145 -248 220 -380 37 -66 209 -362 229 -395 11 -19 24 -42 28 -49 4 -8 67
+-118 140 -243 73 -125 133 -230 133 -233 0 -2 15 -28 33 -57 19 -29 47 -78 64
+-108 17 -30 53 -93 79 -139 53 -90 82 -141 157 -272 82 -142 115 -199 381
+-659 142 -245 268 -463 281 -485 12 -22 71 -125 132 -230 60 -104 172 -298
+248 -430 76 -132 146 -253 156 -270 11 -16 22 -36 26 -44 3 -8 30 -54 60 -103
+29 -49 53 -91 53 -93 0 -3 18 -34 40 -70 22 -36 40 -67 40 -69 0 -2 37 -66 81
+-142 45 -77 98 -168 119 -204 20 -36 47 -81 58 -100 12 -19 27 -47 33 -62 6
+-16 15 -28 20 -28 5 0 9 -4 9 -9 0 -6 63 -118 140 -251 77 -133 140 -243 140
+-245 0 -2 18 -33 41 -70 22 -37 49 -83 60 -101 10 -19 29 -51 40 -71 25 -45
+109 -189 126 -218 7 -11 17 -29 22 -40 6 -11 22 -38 35 -60 14 -22 37 -62 52
+-90 14 -27 35 -62 45 -77 11 -14 19 -29 19 -32 0 -3 18 -35 40 -71 22 -36 40
+-67 40 -69 0 -2 19 -35 42 -72 23 -38 55 -94 72 -124 26 -47 139 -244 171
+-298 6 -9 21 -36 34 -60 28 -48 37 -51 51 -19 6 12 19 36 29 52 10 17 27 46
+38 65 11 19 104 181 208 360 103 179 199 345 213 370 14 25 42 74 64 109 21
+34 38 65 38 67 0 2 18 33 40 69 22 36 40 67 40 69 0 3 177 310 199 346 16 26
+136 234 140 244 2 5 25 44 52 88 27 44 49 81 49 84 0 2 18 34 40 70 22 36 40
+67 40 69 0 2 20 36 43 77 35 58 169 289 297 513 9 17 50 86 90 155 40 69 86
+150 103 180 16 30 35 62 41 70 6 8 16 24 22 35 35 64 72 129 167 293 59 100
+116 199 127 220 11 20 30 53 41 72 43 72 1070 1850 1121 1940 14 25 65 113
+113 195 48 83 96 166 107 185 10 19 28 50 38 68 11 18 73 124 137 235 64 111
+175 303 246 427 71 124 173 299 225 390 52 91 116 202 143 248 27 45 49 85 49
+89 0 4 6 14 14 22 7 9 28 43 46 76 26 47 251 436 378 655 11 19 29 51 40 70
+11 19 101 176 201 348 99 172 181 317 181 323 0 5 5 9 10 9 6 0 10 5 10 11 0
+6 8 23 18 37 11 15 32 52 49 82 16 30 130 228 253 440 122 212 234 405 248
+430 13 25 39 70 57 100 39 65 69 117 130 225 25 44 50 87 55 95 12 19 78 134
+220 380 61 107 129 224 150 260 161 277 222 382 246 425 15 28 47 83 71 123
+24 41 43 78 43 83 0 5 4 9 8 9 4 0 13 12 19 28 7 15 23 45 36 67 66 110 277
+478 277 483 0 3 6 13 14 21 7 9 27 41 43 71 17 30 45 80 63 110 34 57 375 649
+394 685 6 11 16 27 22 35 6 8 26 42 44 75 18 33 41 74 51 90 10 17 24 41 32
+55 54 97 72 128 88 152 11 14 19 28 19 30 0 3 79 141 175 308 96 167 175 305
+175 308 0 3 6 13 14 21 7 9 26 39 41 66 33 60 276 483 338 587 24 40 46 80 50
+88 4 8 13 24 20 35 14 23 95 163 125 215 11 19 52 91 92 160 40 69 80 139 90
+155 9 17 103 179 207 360 105 182 200 346 211 365 103 181 463 802 489 845 7
+11 15 27 19 35 4 8 29 51 55 95 64 110 828 1433 848 1470 9 17 24 41 33 55 9
+14 29 48 45 77 15 28 52 93 82 145 30 51 62 107 71 123 17 30 231 398 400 690
+51 88 103 179 115 202 12 23 26 48 32 55 6 7 24 38 40 68 17 30 61 107 98 170
+37 63 84 144 103 180 19 36 41 72 48 81 8 8 14 18 14 21 0 4 27 51 59 106 32
+55 72 124 89 154 16 29 71 125 122 213 51 88 104 180 118 205 13 25 28 50 32
+55 4 6 17 26 28 45 11 19 45 80 77 135 31 55 66 116 77 135 11 19 88 152 171
+295 401 694 620 1072 650 1125 11 19 87 152 170 295 83 143 158 273 166 288 9
+16 21 36 26 45 6 9 31 52 55 96 25 43 54 94 66 115 11 20 95 164 186 321 91
+157 173 299 182 315 9 17 26 46 37 65 12 19 66 114 121 210 56 96 108 186 117
+200 8 14 24 40 34 59 24 45 383 664 412 713 5 9 17 29 26 45 15 28 120 210
+241 419 36 61 68 117 72 125 4 8 12 23 19 34 35 57 245 420 262 453 11 20 35
+61 53 90 17 29 32 54 32 56 0 3 28 51 62 108 33 57 70 119 80 138 10 19 23 42
+28 50 5 8 32 53 59 100 27 47 149 258 271 470 122 212 234 405 248 430 30 53
+62 108 80 135 6 11 15 27 19 35 4 8 85 150 181 315 96 165 187 323 202 350 31
+56 116 202 130 225 5 8 25 42 43 75 19 33 92 159 162 280 149 257 157 271 202
+350 19 33 38 67 43 75 9 14 228 392 275 475 12 22 55 96 95 165 40 69 80 139
+90 155 24 42 202 350 221 383 9 15 27 47 41 72 14 25 75 131 136 236 61 106
+121 210 134 232 99 172 271 470 279 482 5 8 23 40 40 70 18 30 81 141 142 245
+60 105 121 210 135 235 14 25 71 124 127 220 56 96 143 247 194 335 51 88 96
+167 102 175 14 24 180 311 204 355 23 43 340 590 356 615 5 8 50 87 101 175
+171 301 517 898 582 1008 25 43 46 81 46 83 0 2 12 23 27 47 14 23 40 67 56
+97 16 30 35 62 42 70 7 8 15 22 18 30 4 8 20 38 37 65 16 28 33 57 37 65 6 12
+111 196 143 250 5 8 55 95 112 193 57 98 113 195 126 215 12 20 27 46 32 57 6
+11 14 27 20 35 5 8 76 130 156 270 80 140 165 287 187 325 23 39 52 90 66 115
+13 25 30 52 37 61 8 8 14 18 14 21 0 4 41 77 92 165 50 87 175 302 276 478
+101 176 208 360 236 408 28 49 67 117 86 152 19 35 41 70 48 77 6 6 12 15 12
+19 0 7 124 224 167 291 12 21 23 40 23 42 0 2 21 40 46 83 26 43 55 92 64 109
+54 95 327 568 354 614 19 30 45 75 59 100 71 128 82 145 89 148 4 2 8 8 8 13
+0 5 42 82 94 172 311 538 496 858 518 897 14 25 40 70 58 100 18 30 42 71 53
+90 10 19 79 139 152 265 73 127 142 246 153 265 10 19 43 76 72 125 29 50 63
+108 75 130 65 116 80 140 87 143 4 2 8 8 8 12 0 8 114 212 140 250 6 8 14 24
+20 35 5 11 54 97 108 190 l100 170 -9611 3 c-5286 1 -9614 -1 -9618 -5 -5 -6
+-419 -719 -619 -1068 -89 -155 -267 -463 -323 -560 -38 -66 -81 -140 -95 -165
+-31 -56 -263 -457 -526 -910 -110 -190 -224 -388 -254 -440 -29 -52 -61 -109
+-71 -125 -23 -39 -243 -420 -268 -465 -11 -19 -204 -352 -428 -740 -224 -388
+-477 -826 -563 -975 -85 -148 -185 -322 -222 -385 -37 -63 -120 -207 -185
+-320 -65 -113 -177 -306 -248 -430 -72 -124 -172 -297 -222 -385 -51 -88 -142
+-245 -202 -350 -131 -226 -247 -427 -408 -705 -65 -113 -249 -432 -410 -710
+-160 -278 -388 -673 -506 -877 -118 -205 -216 -373 -219 -373 -3 0 -52 82
+-109 183 -58 100 -144 250 -192 332 -95 164 -402 696 -647 1120 -85 149 -228
+396 -317 550 -212 365 -982 1700 -1008 1745 -10 19 -43 76 -72 125 -29 50 -64
+110 -77 135 -14 25 -63 110 -110 190 -47 80 -96 165 -110 190 -14 25 -99 171
+-188 325 -89 154 -174 300 -188 325 -13 25 -64 113 -112 195 -48 83 -140 242
+-205 355 -65 113 -183 317 -263 454 -79 137 -152 264 -163 282 -50 89 -335
+583 -354 614 -12 19 -34 58 -50 85 -15 28 -129 226 -253 440 -124 215 -235
+408 -247 430 -12 22 -69 121 -127 220 -58 99 -226 389 -373 645 -148 256 -324
+561 -392 678 -67 117 -134 232 -147 255 -13 23 -33 59 -46 80 l-22 37 -9615 0
+-9615 0 20 -32z"/>
+</g>
+</svg>

public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>vue-permission-demo</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but vue-permission-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

src/App.vue

@@ -0,0 +1,21 @@
+<template>
+  <div id="app">
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "app",
+  components: {}
+};
+</script>
+
+<style lang="scss">
+#app {
+  height: 100%;
+  > div {
+    height: 100%;
+  }
+}
+</style>

src/api/index.js

@@ -0,0 +1,10 @@
+import axios from "../utils/http"
+import store from "../store"
+
+export function fetchPermission(){
+    return axios.get("/api/permission?user=" + store.state.UserToken);
+}
+
+export function login(user){
+    return axios.get("/api/login?user=" + user)
+}

src/assets/css/_mixin.scss

@@ -0,0 +1,39 @@
+$mainColor:#151519;
+
+@mixin table-center {
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+}
+
+@mixin poa-center($w, $h) {
+    position: absolute;
+    width: $w;
+    height: $h;
+    left: 50%;
+    top: 50%;
+    transition: translate(-50%, -50%)
+}
+
+@mixin flex-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+@mixin t-overflow($line:1) {
+    @if $line==1 {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    @else {
+        display: -webkit-box;
+        -webkit-line-clamp: $line;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+

src/assets/css/_normalize.scss

@@ -0,0 +1,171 @@
+@charset "utf-8";
+
+html {
+
+  color: #000;
+  background: #fff;
+  overflow-y: scroll;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
+html * {
+  outline: none;
+  -webkit-text-size-adjust: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  box-sizing: border-box;
+}
+
+html,
+body {
+  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+  height: 100%;
+  width: 100%; 
+  overflow: auto;
+}
+
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+code,
+form,
+fieldset,
+legend,
+input,
+textarea,
+p,
+blockquote,
+th,
+td,
+hr,
+button,
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  margin: 0;
+  padding: 0;
+}
+
+input,
+select,
+textarea {
+  font-size: 100%;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+fieldset,
+img {
+  border: 0;
+}
+
+abbr,
+acronym {
+  border: 0;
+  font-variant: normal;
+}
+
+del {
+  text-decoration: line-through;
+}
+
+address,
+caption,
+cite,
+code,
+dfn,
+em,
+th,
+i,
+var {
+  font-style: normal;
+  font-weight: 500;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+caption,
+th {
+  text-align: left;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 100%;
+  font-weight: 500;
+}
+
+q:before,
+q:after {
+  content: '';
+}
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+ins,
+a,
+a:active,
+a:visited,
+a:link {
+  text-decoration: none;
+}
+
+.clearfix {
+  &:after {
+    display: table;
+    clear: both;
+    content: "";
+    visibility: hidden;
+    ;
+    height: 0;
+  }
+}
+

src/assets/css/_reset_element.scss

@@ -0,0 +1,81 @@
+.el-menu {
+    border: none;
+    .iconfont {
+        color: #fff;
+        font-size: 16px;
+    }
+     .el-submenu__title {
+        &:hover {
+            background: none !important;
+        }
+        i.el-submenu__icon-arrow {
+            color: #ddd;
+            font-size: 15px;
+        }
+    } 
+    .el-menu-item-group__title {
+        padding: 0;
+    }
+}
+
+.el-breadcrumb {
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 14px;
+    margin-left: 5px;
+    .el-breadcrumb__inner {
+        &.is-link {
+            display: inline-block;
+            font-weight: normal;
+            color: #424040 !important;
+        }
+    }
+    .is-last-link .is-link {
+        font-weight: normal;
+        color: #999 !important;
+    }
+}
+
+
+
+
+
+
+
+
+
+ 
+  .sidebar-container {
+    transition: width .28s;
+    width: 180px ;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1001;
+    background: rgba(0,0,0,0.5)
+  }
+
+
+
+  
+    .sidebar-container.navCollapsed {
+      width: 63px ;
+    }
+
+    .navCollapsed{
+         .el-submenu {
+            &>.el-submenu__title {
+                &>span {
+                display: none;
+                }
+                .el-submenu__icon-arrow {
+                display: none;
+                }
+            }
+            }
+  
+    }
+   
+

src/assets/css/_sidebar.scss

@@ -0,0 +1,66 @@
+/* 侧边栏 */
+.sidebar {
+    width: 200px !important;
+    height: 100%;
+    background: #304156;
+    transition: all 0.25s;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 100;
+    overflow-x: hidden;
+    .iconfont {
+        margin-right: 8px;
+        color: #fff;
+        font-size: 18px;
+    }
+    >div.menu-container>li.el-menu-item,
+    >div.menu-container>li.el-submenu>.el-submenu__title {
+        border-bottom: 1px solid rgba(238, 238, 238, 0.1);
+    }
+    .el-menu-item {
+        background: #304156 !important;
+    }
+    /* 菜单hover时的背景 */
+    .el-submenu__title:hover,
+    .el-menu-item:hover {
+        background: #223041 !important;
+    }
+    /* 菜单active时的背景 */
+    /* .el-menu-item.is-active {
+        background: #293748 !important;
+    } */
+}
+
+/* 主体内容 */
+.main-container {
+    min-height: 100%;
+    margin-left: 200px;
+    transition: margin-left 0.25s;
+    position: relative;
+    box-sizing: border-box;
+    padding-top: 50px;
+}
+
+/* 折叠菜单下的样式 */
+.navCollapsed {
+    .sidebar {
+        width: 64px !important;
+        ul {
+            display: none;
+        }
+        .iconfont+span {
+            display: none;
+        }
+        .el-submenu__icon-arrow {
+            display: none;
+        }
+    }
+    .main-container {
+        margin-left: 64px;
+    }
+    .aside__top{
+        left:64px!important;
+    }
+}

src/assets/css/index.scss

@@ -0,0 +1,4 @@
+@import './normalize.scss';
+@import './reset_element.scss';
+@import './sidebar.scss';
+@import url('//at.alicdn.com/t/font_641452_q3ah7ae4qvndn29.css');

src/components/dynamic-menu.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="menu-container">
+        <template v-for="v in menuList">
+            <el-submenu :index="v.name" v-if="v.children&&v.children.length>0" :key="v.name">
+                <template slot="title">
+                    <i class="iconfont" :class="v.meta.icon"></i>
+                    <span>{{v.meta.name}}</span>
+                </template>
+                <el-menu-item-group>
+                    <my-nav :menuList="v.children"></my-nav>
+                </el-menu-item-group>
+            </el-submenu>
+            <el-menu-item :key="v.name" :index="v.name" @click="gotoRoute(v.name)" v-else>
+                <i class="iconfont" :class="v.meta.icon"></i>
+                <span slot="title">{{v.meta.name}}</span>
+            </el-menu-item>
+        </template>
+    </div>
+</template>
+<script>
+export default {
+    name: 'my-nav',
+    props: {
+        menuList: {
+            type: Array,
+            default: function() {
+                return []
+            }
+        }
+    },
+    methods: {
+        gotoRoute(name) {
+            this.$router.push({ name }) // push(path)  push({name:''})
+        }
+    }
+}
+</script>

src/element-variables.scss

@@ -0,0 +1,11 @@
+/*
+Write your variables here. All available variables can be
+found in element-ui/packages/theme-chalk/src/common/var.scss.
+For example, to overwrite the theme color:
+*/
+$--color-primary: teal;
+
+/* icon font path, required */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@import "~element-ui/packages/theme-chalk/src/index";

src/main.js

@@ -0,0 +1,16 @@
+import Vue from 'vue'
+import App from './App.vue'
+import './registerServiceWorker'
+import router from './router'
+import store from './store'
+import './plugins/element.js'
+import "./router/permission"
+import "./assets/css/index.scss"
+
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')

src/pages/errorPage/403.vue

@@ -0,0 +1,220 @@
+<template>
+    <div style="background:#f0f2f5;margin-top: -20px;height:100%;">
+        <div class="wscn-http404">
+            <div class="pic-404"></div>
+            <div class="bullshit">
+                <div class="bullshit__headline">{{ message }}</div>
+                <div class="bullshit__info">对不起，你没有权限</div>
+                <a @click="backToHome" class="bullshit__return-home">返回首页</a>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'page401',
+    data() {
+        return {}
+    },
+    methods: {
+        backToHome() {
+            this.$router.push('/')
+        }
+    },
+    computed: {
+        message() {
+            return 'sorry，您没有权限'
+        }
+    }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.wscn-http404 {
+    position: relative;
+    width: 1200px;
+    margin: 20px auto 60px;
+    padding: 0 100px;
+    overflow: hidden;
+    .pic-404 {
+        position: relative;
+        float: left;
+        width: 600px;
+        padding: 150px 0;
+        overflow: hidden;
+        &__parent {
+            width: 100%;
+        }
+        &__child {
+            position: absolute;
+            &.left {
+                width: 80px;
+                top: 17px;
+                left: 220px;
+                opacity: 0;
+                animation-name: cloudLeft;
+                animation-duration: 2s;
+                animation-timing-function: linear;
+                animation-fill-mode: forwards;
+                animation-delay: 1s;
+            }
+            &.mid {
+                width: 46px;
+                top: 10px;
+                left: 420px;
+                opacity: 0;
+                animation-name: cloudMid;
+                animation-duration: 2s;
+                animation-timing-function: linear;
+                animation-fill-mode: forwards;
+                animation-delay: 1.2s;
+            }
+            &.right {
+                width: 62px;
+                top: 100px;
+                left: 500px;
+                opacity: 0;
+                animation-name: cloudRight;
+                animation-duration: 2s;
+                animation-timing-function: linear;
+                animation-fill-mode: forwards;
+                animation-delay: 1s;
+            }
+            @keyframes cloudLeft {
+                0% {
+                    top: 17px;
+                    left: 220px;
+                    opacity: 0;
+                }
+                20% {
+                    top: 33px;
+                    left: 188px;
+                    opacity: 1;
+                }
+                80% {
+                    top: 81px;
+                    left: 92px;
+                    opacity: 1;
+                }
+                100% {
+                    top: 97px;
+                    left: 60px;
+                    opacity: 0;
+                }
+            }
+            @keyframes cloudMid {
+                0% {
+                    top: 10px;
+                    left: 420px;
+                    opacity: 0;
+                }
+                20% {
+                    top: 40px;
+                    left: 360px;
+                    opacity: 1;
+                }
+                70% {
+                    top: 130px;
+                    left: 180px;
+                    opacity: 1;
+                }
+                100% {
+                    top: 160px;
+                    left: 120px;
+                    opacity: 0;
+                }
+            }
+            @keyframes cloudRight {
+                0% {
+                    top: 100px;
+                    left: 500px;
+                    opacity: 0;
+                }
+                20% {
+                    top: 120px;
+                    left: 460px;
+                    opacity: 1;
+                }
+                80% {
+                    top: 180px;
+                    left: 340px;
+                    opacity: 1;
+                }
+                100% {
+                    top: 200px;
+                    left: 300px;
+                    opacity: 0;
+                }
+            }
+        }
+    }
+    .bullshit {
+        position: relative;
+        float: left;
+        width: 300px;
+        padding: 150px 0;
+        overflow: hidden;
+        &__oops {
+            font-size: 32px;
+            font-weight: bold;
+            line-height: 40px;
+            color: #1482f0;
+            opacity: 0;
+            margin-bottom: 20px;
+            animation-name: slideUp;
+            animation-duration: 0.5s;
+            animation-fill-mode: forwards;
+        }
+        &__headline {
+            font-size: 20px;
+            line-height: 24px;
+            color: #1482f0;
+            opacity: 0;
+            margin-bottom: 10px;
+            animation-name: slideUp;
+            animation-duration: 0.5s;
+            animation-delay: 0.1s;
+            animation-fill-mode: forwards;
+        }
+        &__info {
+            font-size: 13px;
+            line-height: 21px;
+            color: grey;
+            opacity: 0;
+            margin-bottom: 30px;
+            animation-name: slideUp;
+            animation-duration: 0.5s;
+            animation-delay: 0.2s;
+            animation-fill-mode: forwards;
+        }
+        &__return-home {
+            display: block;
+            float: left;
+            width: 110px;
+            height: 36px;
+            background: #1482f0;
+            border-radius: 100px;
+            text-align: center;
+            color: #ffffff;
+            opacity: 0;
+            font-size: 14px;
+            line-height: 36px;
+            cursor: pointer;
+            animation-name: slideUp;
+            animation-duration: 0.5s;
+            animation-delay: 0.3s;
+            animation-fill-mode: forwards;
+        }
+        @keyframes slideUp {
+            0% {
+                transform: translateY(60px);
+                opacity: 0;
+            }
+            100% {
+                transform: translateY(0);
+                opacity: 1;
+            }
+        }
+    }
+}
+</style>

src/pages/errorPage/404.vue

@@ -0,0 +1,220 @@
+<template>
+    <div style="background:#f0f2f5;margin-top: -20px;height:100%;">
+        <div class="wscn-http404">
+            <div class="pic-404"></div>
+            <div class="bullshit">
+                <div class="bullshit__headline">{{ message }}</div>
+                <div class="bullshit__info">请检查您输入的网址是否正确</div>
+                <a @click="backToHome" class="bullshit__return-home">返回首页</a>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'page404',
+    data() {
+        return {}
+    },
+    methods: {
+        backToHome() {
+            this.$router.push('/')
+        }
+    },
+    computed: {
+        message() {
+            return '404 您的页面飞走了'
+        }
+    }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.wscn-http404 {
+    position: relative;
+    width: 1200px;
+    margin: 20px auto 60px;
+    padding: 0 100px;
+    overflow: hidden;
+    .pic-404 {
+        position: relative;
+        float: left;
+        width: 600px;
+        padding: 150px 0;
+        overflow: hidden;
+        &__parent {
+            width: 100%;
+        }
+        &__child {
+            position: absolute;
+            &.left {
+                width: 80px;
+                top: 17px;
+                left: 220px;
+                opacity: 0;
+                animation-name: cloudLeft;
+                animation-duration: 2s;
+                animation-timing-function: linear;
+                animation-fill-mode: forwards;
+                animation-delay: 1s;
+            }
+            &.mid {
+                width: 46px;
+                top: 10px;
+                left: 420px;
+                opacity: 0;
+                animation-name: cloudMid;
+                animation-duration: 2s;
+                animation-timing-function: linear;
+                animation-fill-mode: forwards;
+                animation-delay: 1.2s;
+            }
+            &.right {
+                width: 62px;
+                top: 100px;
+                left: 500px;
+                opacity: 0;
+                animation-name: cloudRight;
+                animation-duration: 2s;
+                animation-timing-function: linear;
+                animation-fill-mode: forwards;
+                animation-delay: 1s;
+            }
+            @keyframes cloudLeft {
+                0% {
+                    top: 17px;
+                    left: 220px;
+                    opacity: 0;
+                }
+                20% {
+                    top: 33px;
+                    left: 188px;
+                    opacity: 1;
+                }
+                80% {
+                    top: 81px;
+                    left: 92px;
+                    opacity: 1;
+                }
+                100% {
+                    top: 97px;
+                    left: 60px;
+                    opacity: 0;
+                }
+            }
+            @keyframes cloudMid {
+                0% {
+                    top: 10px;
+                    left: 420px;
+                    opacity: 0;
+                }
+                20% {
+                    top: 40px;
+                    left: 360px;
+                    opacity: 1;
+                }
+                70% {
+                    top: 130px;
+                    left: 180px;
+                    opacity: 1;
+                }
+                100% {
+                    top: 160px;
+                    left: 120px;
+                    opacity: 0;
+                }
+            }
+            @keyframes cloudRight {
+                0% {
+                    top: 100px;
+                    left: 500px;
+                    opacity: 0;
+                }
+                20% {
+                    top: 120px;
+                    left: 460px;
+                    opacity: 1;
+                }
+                80% {
+                    top: 180px;
+                    left: 340px;
+                    opacity: 1;
+                }
+                100% {
+                    top: 200px;
+                    left: 300px;
+                    opacity: 0;
+                }
+            }
+        }
+    }
+    .bullshit {
+        position: relative;
+        float: left;
+        width: 300px;
+        padding: 150px 0;
+        overflow: hidden;
+        &__oops {
+            font-size: 32px;
+            font-weight: bold;
+            line-height: 40px;
+            color: #1482f0;
+            opacity: 0;
+            margin-bottom: 20px;
+            animation-name: slideUp;
+            animation-duration: 0.5s;
+            animation-fill-mode: forwards;
+        }
+        &__headline {
+            font-size: 20px;
+            line-height: 24px;
+            color: #1482f0;
+            opacity: 0;
+            margin-bottom: 10px;
+            animation-name: slideUp;
+            animation-duration: 0.5s;
+            animation-delay: 0.1s;
+            animation-fill-mode: forwards;
+        }
+        &__info {
+            font-size: 13px;
+            line-height: 21px;
+            color: grey;
+            opacity: 0;
+            margin-bottom: 30px;
+            animation-name: slideUp;
+            animation-duration: 0.5s;
+            animation-delay: 0.2s;
+            animation-fill-mode: forwards;
+        }
+        &__return-home {
+            display: block;
+            float: left;
+            width: 110px;
+            height: 36px;
+            background: #1482f0;
+            border-radius: 100px;
+            text-align: center;
+            color: #ffffff;
+            opacity: 0;
+            font-size: 14px;
+            line-height: 36px;
+            cursor: pointer;
+            animation-name: slideUp;
+            animation-duration: 0.5s;
+            animation-delay: 0.3s;
+            animation-fill-mode: forwards;
+        }
+        @keyframes slideUp {
+            0% {
+                transform: translateY(60px);
+                opacity: 0;
+            }
+            100% {
+                transform: translateY(0);
+                opacity: 1;
+            }
+        }
+    }
+}
+</style>

src/pages/finance-manage/index.vue

@@ -0,0 +1,16 @@
+<template>
+    <div>
+       <router-view></router-view>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {}
+    },
+    mounted() {
+
+    }
+}
+</script>

src/pages/goods-manage/goods-classify/index.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+        产品分类
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {}
+    }
+}
+</script>

src/pages/goods-manage/goods-list/index.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+       产品列表
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {}
+    }
+}
+</script>

src/pages/goods-manage/index.vue

@@ -0,0 +1,16 @@
+<template>
+    <div>
+       <router-view></router-view>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {}
+    },
+    mounted() {
+
+    }
+}
+</script>

src/pages/home/index.vue

@@ -0,0 +1,17 @@
+<template>
+    <div>
+        Home首页
+    </div>
+</template>
+
+<script>
+
+export default {
+    data() {
+        return {}
+    },
+    mounted() {
+
+    }
+}
+</script>

src/pages/layout/component/sidebar-nav.vue

@@ -0,0 +1,32 @@
+<template>
+    <el-menu
+        :collapse="isSidebarNavCollapse"
+        background-color="#304156"
+        text-color="#eee"
+        active-text-color="#4dbcff"
+        :default-active="currentMenu"
+    >
+        <DynamicMenu :menuList="sidebarMenu"></DynamicMenu>
+    </el-menu>
+</template>
+
+<script>
+import DynamicMenu from '@/components/dynamic-menu'
+import { mapState } from 'vuex'
+
+export default {
+    data() {
+        return {
+            isCollapse: true
+        }
+    },
+    computed: {
+        ...mapState(['isSidebarNavCollapse']),
+        ...mapState('permission', ['sidebarMenu', 'currentMenu'])
+    },
+    methods: {},
+    components: {
+        DynamicMenu
+    }
+}
+</script>

src/pages/layout/index.vue

@@ -0,0 +1,28 @@
+<template>
+    <div :class="{navCollapsed:isSidebarNavCollapse}">
+        <sidebarNav  class="sidebar"/>
+        <mainContent/>
+    </div>
+</template>
+
+<script>
+import sidebarNav from './component/sidebar-nav'
+import mainContent from './component/main-content/index'
+import { mapState } from 'vuex'
+export default {
+    data() {
+        return {}
+    },
+    computed: {
+        ...mapState(['isSidebarNavCollapse'])
+    },
+    components: {
+        sidebarNav,
+        mainContent
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/pages/login/index.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="clearfix" id="login_wrap">
+    <h2 class="title">登录页</h2>
+    <div id="login">
+      <div class="login--account">
+        <span>账号：</span>
+        <input type="text" placeholder="随便输" name="account" v-model.trim="account" />
+      </div>
+      <div class="login--password">
+        <span>密码：</span>
+        <input
+          type="password"
+          placeholder="随便输"
+          name="password"
+          v-model.trim="password"
+          @keyup.enter="login"
+        />
+      </div>
+      <p class="login--btn">
+        <button id="loginBtn" @click="login">登录</button>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { login } from "../../api"
+
+export default {
+  data() {
+    return {
+      account: "",
+      password: ""
+    };
+  },
+  methods: {
+    async login() {
+        // 网络请求
+        let data = await login(this.account);
+        let token = data.token;
+        // 本地  vuex
+        this.$store.commit('LOGIN_IN',token);
+        this.$router.replace("/")
+    }
+  },
+  mounted() {}
+};
+</script>
+<style scoped lang="scss">
+.title {
+  text-align: center;
+  font-size: 22px;
+  padding-top: 100px;
+}
+#login_wrap {
+  position: relative;
+  background: rgba(64, 64, 194, 0.1);
+  > div {
+    background: #fff;
+    width: 479px;
+    height: 325px;
+    padding: 30px 40px;
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    > div {
+      padding: 10px 0;
+      border-bottom: 1px solid #ddd;
+      &.login--account {
+        margin: 25px 0 30px;
+      }
+      span {
+        color: #666;
+        display: inline-block;
+        width: 84px;
+        font-size: 20px;
+      }
+      input {
+        background: none;
+        font-size: 16px;
+        border: none;
+        height: 30px;
+        width: 280px;
+        padding-left: 12px;
+        box-sizing: border-box;
+        color: #666;
+        &.error {
+          border: 1px solid #f00;
+        }
+        &::-webkit-input-placeholder {
+          color: #aaa;
+        }
+      }
+    }
+
+    p {
+      text-align: right;
+      &.login--btn {
+        button {
+          width: 100%;
+          height: 50px;
+          font-size: 18px;
+          background: #0f6171;
+          border: none;
+          margin-top: 30px;
+          color: #fff;
+          border-radius: 6px;
+          cursor: pointer;
+        }
+      }
+      a {
+        color: #fff;
+        display: inline-block;
+        padding: 0 15px;
+        font-size: 14px;
+      }
+    }
+  }
+}
+</style>

src/pages/order-manage/index.vue

@@ -0,0 +1,16 @@
+<template>
+    <div>
+       <router-view></router-view>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {}
+    },
+    mounted() {
+
+    }
+}
+</script>

src/pages/order-manage/order-list/index.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+       订单列表
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {}
+    }
+}
+</script>

src/pages/order-manage/product-manage/index.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+       <router-view></router-view>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {}
+    }
+}
+</script>

src/pages/order-manage/return-goods/index.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+       退货管理
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {}
+    }
+}
+</script>

src/plugins/element.js

@@ -0,0 +1,5 @@
+import Vue from 'vue'
+import Element from 'element-ui'
+import '../element-variables.scss'
+
+Vue.use(Element)

src/registerServiceWorker.js

@@ -0,0 +1,32 @@
+/* eslint-disable no-console */
+
+import { register } from 'register-service-worker'
+
+if (process.env.NODE_ENV === 'production') {
+  register(`${process.env.BASE_URL}service-worker.js`, {
+    ready () {
+      console.log(
+        'App is being served from cache by a service worker.\n' +
+        'For more details, visit https://goo.gl/AFskqB'
+      )
+    },
+    registered () {
+      console.log('Service worker has been registered.')
+    },
+    cached () {
+      console.log('Content has been cached for offline use.')
+    },
+    updatefound () {
+      console.log('New content is downloading.')
+    },
+    updated () {
+      console.log('New content is available; please refresh.')
+    },
+    offline () {
+      console.log('No internet connection found. App is running in offline mode.')
+    },
+    error (error) {
+      console.error('Error during service worker registration:', error)
+    }
+  })
+}

src/router/dynamic-router.js

@@ -0,0 +1,105 @@
+/* 订单管理 */
+const Order = () => import('../pages/order-manage')
+const OrderList = () => import('../pages/order-manage/order-list')
+const ProductManage = () => import('../pages/order-manage/product-manage')
+const ProductionList = () => import('../pages/order-manage/product-manage/production-list')
+const ReviewManage = () => import('../pages/order-manage/product-manage/review-manage')
+const ReturnGoods = () => import('../pages/order-manage/return-goods')
+
+/* 产品管理 */
+const Goods = () => import('../pages/goods-manage')
+const GoodsList = () => import('../pages/goods-manage/goods-list')
+const GoodsClassify = () => import('../pages/goods-manage/goods-classify')
+
+/* 需要权限判断的路由 */
+const dynamicRoutes = [
+    {
+        path: '/order',
+        component: Order,
+        name: 'order-manage',
+        meta: {
+            name: '订单管理',
+            icon: 'icon-email'
+        },
+        children: [
+            {
+                path: 'list',
+                name: 'order-list',
+                component: OrderList,
+                meta: {
+                    name: '订单列表',
+                    icon: 'icon-quit'
+                }
+            },
+            {
+                path: 'product',
+                name: 'product-manage',
+                component: ProductManage,
+                meta: {
+                    name: '生产管理',
+                    icon: 'icon-service'
+                },
+                children: [
+                    {
+                        path: 'list',
+                        name: 'product-list',
+                        component: ProductionList,
+                        meta: {
+                            name: '生产列表',
+                            icon: 'icon-nav'
+                        }
+                    },
+                    {
+                        path: 'review',
+                        name: 'review-manage',
+                        component: ReviewManage,
+                        meta: {
+                            name: '审核管理',
+                            icon: 'icon-finance-manage'
+                        }
+                    }
+                ]
+            },
+            {
+                path: 'returnGoods',
+                name: 'return-goods',
+                component: ReturnGoods,
+                meta: {
+                    name: '退货管理',
+                    icon: 'icon-product-manage'
+                }
+            }
+        ]
+    },
+    {
+        path: '/goods',
+        component: Goods,
+        name: 'goods',
+        meta: {
+            name: '产品管理',
+            icon: 'icon-order-manage'
+        },
+        children: [
+            {
+                path: 'list',
+                name: 'goods-list',
+                component: GoodsList,
+                meta: {
+                    name: '产品列表',
+                    icon: 'icon-home'
+                }
+            },
+            {
+                path: 'classify',
+                name: 'goods-classify',
+                component: GoodsClassify,
+                meta: {
+                    name: '产品分类',
+                    icon: 'icon-product-manage'
+                }
+            }
+        ]
+    }
+]
+
+export default dynamicRoutes

src/router/index.js

@@ -0,0 +1,71 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+import Login from "../pages/login"
+import Home from "../pages/home"
+import NotFound from "../pages/errorPage/404"
+import Forbidden from "../pages/errorPage/403"
+import Layout from "../pages/layout"
+
+
+Vue.use(VueRouter)
+
+// 初始化路由
+const routes = [
+  {
+    path: '/login',
+    name: 'Login',
+    component: Login
+  }
+]
+
+/**
+ * 根据用户的权限不同，所能看到的页面和可操作性也不同
+ *  admin -> 所有页面都可以看得到
+ *  vip -> 属于vip的权限
+ *  svip -> 更多额vip的权限
+ * 
+ * addRouter()
+ */
+// 准备动态加载的路由
+export const DynamicRoutes = [
+    {
+        path:"",
+        component:Layout,
+        name:'container',
+        redirect:"home",
+        meta:{
+            requiresAuth:true,
+            name:"首页"
+        },
+        children:[
+            {
+                path:"home",
+                component:Home,
+                name:"home",
+                meta:{
+                    // 匹配规则
+                    name:"首页",
+                    icon:"icon-name"
+                }
+            }
+        ]
+    },
+    {
+        path:"/403",
+        component:Forbidden
+    },
+    {
+        path:"*",
+        component:NotFound
+    }
+]
+
+
+const router = new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes
+})
+
+export default router

src/router/permission.js

@@ -0,0 +1,31 @@
+import router from "./index"
+import store from "../store/index"
+
+router.beforeEach((to,from,next) =>{
+    if(!store.state.UserToken){
+        // 未登录  页面是否需要登录
+        if(to.matched.length > 0 && !to.matched.some(record => record.meta.requiresAuth)){
+            next();
+        }else{
+            next({
+                path:"/login"
+            })
+        }
+    }else{
+        // 用户已经登录  路由的访问权限
+        if(!store.state.permission.permissionList){
+            store.dispatch("permission/FETCH_PERMISSION").then(() =>{
+                next({
+                    path:to.path
+                })
+            })
+        }else{
+            // store存在权限
+            if(to.path !== "/login"){
+                next();
+            }else{
+                next(from.fullPath)
+            }
+        }
+    }
+})

src/store/defaultState.js

@@ -0,0 +1,8 @@
+export default {
+    get UserToken(){
+        return localStorage.getItem('token');
+    },
+    set UserToken(value){
+        localStorage.setItem('token',value)
+    }
+}

src/store/index.js

@@ -0,0 +1,13 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import state from "./defaultState"
+import mutations from "./mutations"
+import modules from "./modules"
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+    state,
+    mutations,
+    modules
+})

src/store/modules/index.js

@@ -0,0 +1,4 @@
+import permission from "./permission"
+export default {
+    permission
+}

src/store/modules/permission.js

@@ -0,0 +1,49 @@
+import { fetchPermission } from "../../api/index"
+import router,{ DynamicRoutes } from "../../router/index"
+import dynamicRouter from "../../router/dynamic-router"
+import { recursionRouter,setDefaultRoute } from "../../utils/recursion-router"
+
+export default {
+    namespaced:true,
+    state:{
+        permissionList:null,
+        sidebarMenu:[],// 导航菜单
+        currentMenu:'' // 高亮
+    },
+    getters:{},
+    mutations:{
+        SET_PERMISSION(state,routes){
+            state.permissionList = routes;
+        },
+        CLEAR_PERMSSION(state){
+            state.permissionList = null;
+        },
+        SET_MENU(state,menu){
+            state.sidebarMenu = menu;
+        },
+        CLEAR_MENU(state){
+            state.sidebarMenu = []
+        }
+    },
+    // 异步访问
+    actions:{
+        async FETCH_PERMISSION({ commit,state }){
+            let permissionList = await fetchPermission();
+            // 筛选
+            let routes = recursionRouter(permissionList,dynamicRouter);
+            let MainContainer = DynamicRoutes.find(v => v.path === "");
+            let children = MainContainer.children;
+            children.push(...routes)
+
+            // 生成菜单
+            commit("SET_MENU",children);
+
+            // 设置默认路由
+            setDefaultRoute([MainContainer]);
+            // 初始化路由
+            let initialRoutes = router.options.routes;
+            router.addRoutes(DynamicRoutes);
+            commit("SET_PERMISSION",[ ...initialRoutes , ...DynamicRoutes])
+        }
+    }
+}

src/store/mutations.js

@@ -0,0 +1,8 @@
+export default {
+    LOGIN_IN(state,token){
+        state.UserToken = token;
+    },
+    LOGIN_OUT(state){
+        state.UserToken = ""
+    }
+}

src/utils/baseURL.js

@@ -0,0 +1,7 @@
+const baseUrl = "http://localhost:3300"
+export default baseUrl
+
+/**
+ * cors
+ * proxy:开发环境
+ */

src/utils/http.js

@@ -0,0 +1,107 @@
+import axios from 'axios'
+// import store from '@/store/index.js'
+import baseURL from './baseURL'
+import { Message } from 'element-ui'
+const http = {}
+
+var instance = axios.create({
+    timeout: 5000
+    // baseURL
+})
+
+// 添加请求拦截器
+instance.interceptors.request.use(
+    function(config) {
+        // 请求头添加token
+        // if (store.state.UserToken) {
+        //     config.headers.Authorization = store.state.UserToken
+        // }
+        return config
+    },
+    function(error) {
+        return Promise.reject(error)
+    }
+)
+
+// 响应拦截器即异常处理
+instance.interceptors.response.use(
+    response => {
+        return response.data
+    },
+    err => {
+        if (err && err.response) {
+            switch (err.response.status) {
+            case 400:
+                err.message = '请求出错'
+                break
+            case 401:
+                Message.warning({
+                    message: '授权失败，请重新登录'
+                })
+                store.commit('LOGIN_OUT')
+                setTimeout(() => {
+                    window.location.reload()
+                }, 1000)
+
+                return
+            case 403:
+                err.message = '拒绝访问'
+                break
+            case 404:
+                err.message = '请求错误,未找到该资源'
+                break
+            case 500:
+                err.message = '服务器端出错'
+                break
+            }
+        } else {
+            err.message = '连接服务器失败'
+        }
+        Message.error({
+            message: err.message
+        })
+        return Promise.reject(err.response)
+    }
+)
+
+http.get = function(url, options) {
+    return new Promise((resolve, reject) => {
+        instance
+            .get(url, options)
+            .then(response => {
+                if (response.code === 0) {
+                    resolve(response.data)
+                } else {
+                    Message.error({
+                        message: response.message
+                    })
+                    reject(response.message)
+                }
+            })
+            .catch(e => {
+                console.log(e)
+            })
+    })
+}
+
+http.post = function(url, data, options) {
+    return new Promise((resolve, reject) => {
+        instance
+            .post(url, data, options)
+            .then(response => {
+                if (response.code === 0) {
+                    resolve(response.data)
+                } else {
+                    Message.error({
+                        message: response.message
+                    })
+                    reject(response.message)
+                }
+            })
+            .catch(e => {
+                console.log(e)
+            })
+    })
+}
+
+export default http

src/utils/recursion-router.js

@@ -0,0 +1,36 @@
+/**
+ * 方法一：比对路由权限
+ * 方法二：指定返回的默认路由
+ */
+
+/**
+ * 
+ * @param {Array} userRouter 后台返回的路由权限json
+ * @param {Array} allRouter 前端配置好的路由权限数据
+ * @return {Array} realRoutes 过滤之后的符合条件的路由
+ */
+
+export function recursionRouter(userRouter = [],allRouter = []){
+    var realRoutes = [];
+    allRouter.forEach((v,i) =>{
+        userRouter.forEach((item,index) =>{
+            if(item.name === v.meta.name){
+                if(item.children && item.children.length > 0){
+                    v.children = recursionRouter(item.children,v.children);
+                }
+                realRoutes.push(v)
+            }
+        })
+    })
+    return realRoutes;
+}
+
+
+export function setDefaultRoute(routes){
+    routes.forEach((v,i) =>{
+        if(v.children && v.children.length > 0){
+            v.redirect = { name : v.children[0].name}
+            setDefaultRoute(v.children);
+        }
+    })
+}

vue.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+    devServer: {
+        proxy: {
+            '/api': {
+                target: 'http://localhost:3300',
+                changeOrigin: true,
+                pathRewrite: {
+                    '^/api': ''
+                }
+            }
+        }
+    }
+}