Initial commit

.eslintrc.js

@@ -10,5 +10,6 @@ module.exports = {
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-empty": "off"
   },
 };

package-lock.json

@@ -22,6 +22,7 @@
         "eslint": "^6.7.2",
         "eslint-plugin-prettier": "^3.3.1",
         "eslint-plugin-vue": "^6.2.2",
+        "minimist": "^1.2.5",
         "prettier": "^2.2.1",
         "vue-template-compiler": "^2.6.11"
       }
@@ -9113,8 +9114,8 @@
     },
     "node_modules/minimist": {
       "version": "1.2.5",
-      "resolved": "https://registry.npm.taobao.org/minimist/download/minimist-1.2.5.tgz",
-      "integrity": "sha1-Z9ZgFLZqaoqqDAg8X9WN9OTpdgI=",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
       "dev": true
     },
     "node_modules/minipass": {
@@ -16748,7 +16749,8 @@
       "version": "4.5.15",
       "resolved": "https://registry.npmmirror.com/@vue/cli-plugin-vuex/download/@vue/cli-plugin-vuex-4.5.15.tgz",
       "integrity": "sha1-RmwfAnd9Av71Opu0mjbMOjvP7E4=",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/cli-service": {
       "version": "4.5.15",
@@ -16894,7 +16896,8 @@
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/@vue/preload-webpack-plugin/download/@vue/preload-webpack-plugin-1.1.2.tgz",
       "integrity": "sha1-zrkktOyzucQ4ccekKaAvhCPmIas=",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
@@ -17109,7 +17112,8 @@
       "version": "5.3.2",
       "resolved": "https://registry.nlark.com/acorn-jsx/download/acorn-jsx-5.3.2.tgz?cache=0&sync_timestamp=1625793705701&other_urls=https%3A%2F%2Fregistry.nlark.com%2Facorn-jsx%2Fdownload%2Facorn-jsx-5.3.2.tgz",
       "integrity": "sha1-ftW7VZCLOy8bxVxq8WU7rafweTc=",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-walk": {
       "version": "7.2.0",
@@ -17139,13 +17143,15 @@
       "version": "1.0.1",
       "resolved": "https://registry.nlark.com/ajv-errors/download/ajv-errors-1.0.1.tgz",
       "integrity": "sha1-81mGrOuRr63sQQL72FAUlQzvpk0=",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmmirror.com/ajv-keywords/download/ajv-keywords-3.5.2.tgz",
       "integrity": "sha1-MfKdpatuANHC0yms97WSlhTVAU0=",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -22255,8 +22261,8 @@
     },
     "minimist": {
       "version": "1.2.5",
-      "resolved": "https://registry.npm.taobao.org/minimist/download/minimist-1.2.5.tgz",
-      "integrity": "sha1-Z9ZgFLZqaoqqDAg8X9WN9OTpdgI=",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
       "dev": true
     },
     "minipass": {

package.json

@@ -5,7 +5,9 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "build:routes": "npm run generate-routes & npm run build",
+    "lint": "vue-cli-service lint",
+    "generate-routes": "node routes-server.js --routes='{\n  \"name\": \"routerConfig\",\n  \"menu\": [{\n  \"id\": \"1\",\n  \"name\": \"home\",\n  \"path\": \"/home\",\n  \"label\": \"首页\",\n  \"selected\": true,\n  \"open\": true,\n  \"component\": \"home/home.vue\",\n  \"children\": [\n    {\n      \"id\": \"3\",\n      \"name\": \"about\",\n      \"path\": \"/about\",\n      \"label\": \"关于\",\n      \"selected\": false,\n      \"open\": false,\n      \"component\": \"about/about.vue\",\n      \"children\": []\n    }\n  ]\n  }]\n}\n'"
   },
   "dependencies": {
     "core-js": "^3.6.5",
@@ -22,6 +24,7 @@
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^6.2.2",
+    "minimist": "^1.2.5",
     "prettier": "^2.2.1",
     "vue-template-compiler": "^2.6.11"
   }

routes-server.js

+console.log(":::开始");
+const fs = require("fs");
+const path = require("path");
+const args = require("minimist")(process.argv.slice(2));
+const dataJson = JSON.parse(JSON.parse(JSON.stringify(args["routes"])));
+function menuSync(arr, callback) {
+  arr.forEach(({ name, children }) => {
+    callback(name);
+    if (children && children.length > 0) {
+      menuSync(children, callback);
+    }
+  });
+}
+// 筛选出的模块
+const names = [];
+menuSync(dataJson.menu, (name) => {
+  names.push(name);
+});
+function removeDir(dir) {
+  let files = fs.readdirSync(dir);
+  for (let i = 0; i < files.length; i++) {
+    let newPath = path.join(dir, files[i]);
+    let stat = fs.statSync(newPath);
+    if (stat.isDirectory()) {
+      //如果是文件夹就递归下去
+      removeDir(newPath);
+    } else {
+      //删除文件
+      fs.unlinkSync(newPath);
+    }
+  }
+  fs.rmdirSync(dir);
+}
+function dirSync(currentDirPath, callback) {
+  fs.readdirSync(currentDirPath).forEach((name) => {
+    const filePath = path.join(currentDirPath, name);
+    const stat = fs.statSync(filePath);
+    if (stat.isDirectory()) {
+      callback(filePath, name, stat);
+      if (fs.existsSync(filePath)) {
+        dirSync(filePath, callback);
+      }
+    }
+  });
+}
+dirSync("src/views", (filePath, name) => {
+  if (names.indexOf(name) === -1) {
+    removeDir(filePath);
+  }
+});
+const dataStr = JSON.stringify(dataJson, null, 2).replace(/\r\n/g, "\\r\\n");
+fs.writeFileSync("src/config/routes.json", dataStr, (err) => {
+  if (err) throw err;
+  console.log(":::失败");
+});
+
+console.log(":::成功");

src/App.vue

 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
+    <main-layout>
       <router-view />
+    </main-layout>
   </div>
 </template>
 
@@ -30,3 +28,9 @@
   color: #42b983;
 }
 </style>
+<script>
+import MainLayout from "./layout/main-layout/main-layout";
+export default {
+  components: { MainLayout },
+};
+</script>

src/components/side-menu.vue

+<template>
+  <div id="leftMenu"></div>
+</template>
+
+<script>
+export default {
+  name: "side-menu",
+  data() {
+    return {
+      menu: [],
+    };
+  },
+  methods: {
+    //通过路由id来找节点
+    findNodeById(node, id) {
+      for (let i = 0; i < node.length; i++) {
+        if (id == node[i].id) {
+          node[i].selected = true;
+          if (node[i].children && node[i].children.length > 0) {
+            this.findNodeById(node[i].children, id);
+          }
+          node[i].open = !node[i].open;
+          if (this.$route.path !== node[i].path)
+            this.$router.push(node[i].path);
+        } else {
+          node[i].selected = false;
+          if (node[i].children && node[i].children.length > 0) {
+            this.findNodeById(node[i].children, id);
+          } else {
+          }
+        }
+      }
+    },
+    //选中菜单节点
+    chooseNode(id) {
+      this.findNodeById(this.menu, id);
+      let domTree = this.generatorMenu(this.menu, "", 0);
+      let leftMenu = document.getElementById("leftMenu");
+      leftMenu.innerHTML = domTree;
+    },
+    //动态生成菜单目录
+    generatorMenu(menu, temp, floor) {
+      for (let i = 0; i < menu.length; i++) {
+        temp += `<div style="width: max-content">
+                    <div class="menuOption" onclick="chooseNode(${menu[i].id})"
+                            style="text-indent: ${floor}em;
+                            background-color: ${
+                              menu[i].selected ? "aquamarine" : ""
+                            };
+                            cursor: pointer;
+                            margin-top: 0.3rem;">
+                        <i class="${menu[i].icon}"></i>
+                        ${menu[i].label}`;
+        if (!menu[i].open && menu[i].children && menu[i].children.length > 0) {
+          temp += `<i style="margin-left: 1rem" class="el-icon-arrow-down"></i>`;
+        } else {
+          if (menu[i].open && menu[i].children && menu[i].children.length > 0) {
+            temp += `<i style="margin-left: 1rem" class="el-icon-arrow-up"></i>`;
+          }
+        }
+        temp += `</div>`;
+        if (menu[i].open && menu[i].children && menu[i].children.length != 0) {
+          temp = this.generatorMenu(menu[i].children, temp, floor + 1);
+        }
+        temp += `</div>`;
+      }
+      return temp;
+    },
+  },
+  created() {},
+  mounted() {
+    window.chooseNode = this.chooseNode;
+    let menu = [];
+    //获取路由菜单配置文件
+    const router = require("@/config/routes.json");
+    menu = router.menu;
+    this.menu = menu;
+    let domTree = this.generatorMenu(menu, "", 0);
+    let leftMenu = document.getElementById("leftMenu");
+    leftMenu.innerHTML = domTree;
+  },
+};
+</script>
+
+<style scoped>
+#leftMenu {
+  min-height: calc(100vh - 44px - 1rem);
+  background-color: cornflowerblue;
+  text-align: left;
+  padding: 0.5rem 1rem;
+  font-size: large;
+  font-weight: bold;
+}
+.selectedM {
+  background-color: aquamarine;
+}
+.menuOption {
+  cursor: pointer;
+}
+</style>

src/config/routes.json

+{
+  "name": "routerConfig",
+  "menu": [
+    {
+      "id": "1",
+      "name": "home",
+      "path": "/home",
+      "label": "首页",
+      "selected": true,
+      "open": true,
+      "component": "home/home.vue",
+      "children": [
+        {
+          "id": "3",
+          "name": "about",
+          "path": "/about",
+          "label": "关于",
+          "selected": false,
+          "open": false,
+          "component": "about/about.vue",
+          "children": []
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file

src/layout/main-layout/main-layout.vue

+<template>
+  <div style="display: flex">
+    <side-menu />
+    <div style="flex: 1">
+      <slot />
+    </div>
+  </div>
+</template>
+<script>
+import SideMenu from "@/components/side-menu";
+export default {
+  components: { SideMenu },
+  name: "main-layout",
+};
+</script>

src/router/index.js

 import Vue from "vue";
 import VueRouter from "vue-router";
-import Home from "../views/Home.vue";
-
 Vue.use(VueRouter);
-
+//引入配置文件router.json
+let routerMenu = require("@/config/routes.json");
+routerMenu = routerMenu.menu;
+let menu = [];
+//配置路由
+let formatRoute = function (routerMenu, menu) {
+  for (let i = 0; i < routerMenu.length; i++) {
+    let temp = {
+      path: routerMenu[i].path,
+      name: routerMenu[i].name,
+      //这块要注意
+      //用require这种方式引入的时候，会将你的component分别打包成不同
+      //的js，加载的时候也是按需加载，只用访问这个路由网址时才会加载
+      //这个js
+      component: (resolve) =>
+        require([`@/views/${routerMenu[i].component}`], resolve),
+    };
+    menu.push(temp);
+    if (routerMenu[i].children && routerMenu[i].children.length > 0) {
+      //递归生成子菜单的路由
+      formatRoute(routerMenu[i].children, menu);
+    }
+  }
+};
+//初始化
+formatRoute(routerMenu, menu);
+//重定向设置
 const routes = [
   {
     path: "/",
-    name: "Home",
-    component: Home,
-  },
-  {
-    path: "/about",
-    name: "About",
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () =>
-      import(/* webpackChunkName: "about" */ "../views/About.vue"),
+    redirect: "/home",
   },
 ];
+//将生成的路由文件push进去
+for (let i = 0; i < menu.length; i++) routes.push(menu[i]);
 
 const router = new VueRouter({
-  mode: "history",
-  base: process.env.BASE_URL,
   routes,
 });
 

src/router/routes.md

+```js
+const routeConfig = {
+  "name": "routerConfig",
+  "menu": [{
+    "id": "1", //路由id，不能重复
+    "name": "home",//路由名字
+    "path": "/homePage",//路由路径
+    "label": "首页",//菜单标题
+    "selected": true,//默认选中
+    "open": true,//默认打开
+    "component": "homePage/homePage.vue",//组件路由
+    "children": [ //子菜单
+      {
+        "id": "3",
+        "name": "getCover",
+        "path": "/getCover",
+        "label": "封面截取",
+        "selected": false,
+        "open": false,
+        "component": "getCover/getCover.vue",
+        "children": []
+      }
+    ]
+  }]
+}
+
+```

src/views/Home.vue → src/views/home/home.vue

 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
     <HelloWorld msg="Welcome to Your Vue.js App" />
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
+import HelloWorld from "@/components/hello-world.vue";
 
 export default {
   name: "Home",

vue.config.js

+const { resolve } = require("path");
+module.exports = {
+  configureWebpack: {
+    resolve: {
+      alias: {
+        "@": resolve("src"),
+      },
+    },
+  },
+};