update dependecies

package.json

@@ -6,37 +6,45 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
+    "start": "vue-cli-service serve",
+    "mock": "json-server --watch mock/db.json",
+    "prebuild:staging": "node prebuild",
+    "build:staging": "NODE_ENV=production vue-cli-service build --mode staging",
+    "prebuild:prod": "node prebuild",
+    "build:prod": "vue-cli-service build",
+    "postbuild:prod": "node postbuild",
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
     "axios": "^0.18.0",
     "bootstrap": "^4.3.1",
-    "iview": "^3.2.2",
+    "core-js": "^2.6.5",
+    "iview": "^3.4.1",
     "js-cookie": "^2.2.0",
-    "register-service-worker": "^1.5.2",
-    "vue": "^2.6.7",
-    "vue-router": "^3.0.2",
-    "vuex": "^3.1.0",
+    "register-service-worker": "^1.6.2",
+    "vue": "^2.6.10",
+    "vue-router": "^3.0.6",
+    "vuex": "^3.1.1",
     "vuex-persistedstate": "^2.5.4"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.4.0",
-    "@vue/cli-plugin-eslint": "^3.4.0",
-    "@vue/cli-plugin-pwa": "^3.4.0",
-    "@vue/cli-plugin-unit-jest": "^3.4.0",
-    "@vue/cli-service": "^3.4.0",
+    "@vue/cli-plugin-babel": "^3.7.0",
+    "@vue/cli-plugin-eslint": "^3.7.0",
+    "@vue/cli-plugin-pwa": "^3.7.0",
+    "@vue/cli-plugin-unit-jest": "^3.7.0",
+    "@vue/cli-service": "^3.7.0",
     "@vue/eslint-config-prettier": "^4.0.1",
     "@vue/test-utils": "^1.0.0-beta.29",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
-    "babel-jest": "^23.6.0",
+    "babel-jest": "^24.7.1",
     "babel-plugin-import": "^1.11.0",
-    "eslint": "^5.8.0",
-    "eslint-plugin-vue": "^5.1.0",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.2.2",
     "iview-loader": "^1.2.2",
     "node-sass": "^4.9.0",
     "sass-loader": "^7.0.1",
     "vue-cli-plugin-axios": "0.0.4",
-    "vue-template-compiler": "^2.6.7"
+    "vue-template-compiler": "^2.6.10"
   }
 }

src/main.js

@@ -18,8 +18,7 @@ if (
   process.env.NODE_ENV === "development" &&
   process.env.VUE_APP_ENABLE_VUE_RENDER_LOGS === "true"
 ) {
-  const vueLifecylceLogs = require("./plugins/vueLifecylceLogs").default;
-  vueLifecylceLogs({});
+  require("./plugins/vueLifecylceLogs");
 }
 
 new Vue({

src/plugins/vueLifecylceLogs.js

@@ -1,136 +1,166 @@
 import Vue from "vue";
 
-// const ignoreComponents = [undefined, "transition", "router-link", "Bar"];
-
-// const ignoreComponentsNameRegexArray = [/^El[A-Z].*/, /^fa-.*/];
-
-// const groupCollapsed = true;
-
-// const RENDER_DURATION = 1 * 1000;
-
-export default function({
-  ignoreComponents = [undefined, "transition", "router-link", "Bar"],
-  ignoreComponentsNameRegexArray = [/^El[A-Z].*/, /^fa-.*/],
-  groupCollapsed = true,
-  RENDER_DURATION = 1 * 1000
-}) {
-  function getParentNumber(that) {
-    let parentNumber = 0;
-    while (that) {
-      if (that.$parent) {
-        parentNumber++;
-        that = that.$parent;
-      } else {
-        break;
-      }
-    }
-    return parentNumber;
-  }
-
-  function componentNameMatch(name) {
-    if (ignoreComponents.includes(name)) {
-      return true;
+const ignoreComponents = [
+  undefined,
+  "transition",
+  "RemainTime",
+  "router-link",
+  "Affix",
+  "Alert",
+  "Anchor",
+  "AnchorLink",
+  "AutoComplete",
+  "Avatar",
+  "BackTop",
+  "Badge",
+  "Breadcrumb",
+  "BreadcrumbItem",
+  "Button",
+  "ButtonGroup",
+  "Card",
+  "Carousel",
+  "CarouselItem",
+  "Cascader",
+  "Cell",
+  "CellGroup",
+  "Checkbox",
+  "CheckboxGroup",
+  "i-circle",
+  "Col",
+  "Collapse",
+  "ColorPicker",
+  "Content",
+  "Divider",
+  "DatePicker",
+  "Drawer",
+  "Dropdown",
+  "DropdownItem",
+  "DropdownMenu",
+  "Footer",
+  "Form",
+  "iForm",
+  "FormItem",
+  "Header",
+  "Icon",
+  "Input",
+  "InputNumber",
+  "Layout",
+  "Menu",
+  "MenuGroup",
+  "MenuItem",
+  "Sider",
+  "Submenu",
+  "Modal",
+  "Option",
+  "OptionGroup",
+  "Page",
+  "Panel",
+  "Poptip",
+  "Progress",
+  "Radio",
+  "RadioGroup",
+  "Rate",
+  "Row",
+  "Select",
+  "Slider",
+  "Spin",
+  "Split",
+  "Step",
+  "Steps",
+  "i-switch",
+  "Table",
+  "Tabs",
+  "TabPane",
+  "Tag",
+  "Time",
+  "Timeline",
+  "TimelineItem",
+  "TimePicker",
+  "Tooltip",
+  "Transfer",
+  "Tree",
+  "Upload"
+];
+
+setInterval(
+  () => console.log("----------------------Vue lifecyle logs----------------"),
+  10 * 1000
+);
+
+function getParentNumber(that) {
+  let parentNumber = 0;
+  while (that) {
+    if (that.$parent) {
+      parentNumber++;
+      that = that.$parent;
     } else {
-      let match = false;
-      for (const regex of ignoreComponentsNameRegexArray) {
-        if (regex.test(name)) {
-          match = true;
-          break;
-        }
-      }
-      return match;
+      break;
     }
   }
-
-  const injectMethods = [
-    { name: "beforeCreate", style: "color: green" },
-    { name: "created", style: "color: green" },
-    { name: "beforeMount", style: "color: green" },
-    { name: "mounted", style: "color: green" },
-    { name: "beforeUpdate", style: "color: #0000aa" },
-    { name: "updated", style: "color: #0000aa" },
-    { name: "beforeDestroy", style: "color: red; font-weight: bold" },
-    { name: "destroyed", style: "color: red; font-weight: bold" }
-  ];
-
-  const injectRouterMethods = [
-    {
-      name: "beforeRouteEnter",
-      style: ["background: #aaa", "color: #0000aa;"]
-    },
-    {
-      name: "beforeRouteUpdate",
-      style: ["background: #aaa", "color: #0000aa;"]
-    },
-    { name: "beforeRouteLeave", style: ["background: #aaa", "color: #0000aa;"] }
-  ];
-
-  let lifeCycleMixins = {};
-
-  let startLogging = false;
-  let loggingTime = Date.now();
-
-  for (const m of injectMethods) {
-    lifeCycleMixins[m.name] = function() {
-      const parentNumber = getParentNumber(this);
-      if (!componentNameMatch(this.$options.name)) {
-        if (!startLogging) {
-          startLogging = true;
-          if (groupCollapsed) {
-            console.groupCollapsed("Vue lifecyle logs");
-          } else {
-            console.group("Vue lifecyle logs");
-          }
-
-          loggingTime = Date.now();
-        }
-        console.log(
-          "--".repeat(parentNumber) + `${this.$options.name} %c ${m.name}`,
-          m.style
-        );
-      }
-    };
-  }
-
-  for (const m of injectRouterMethods) {
-    lifeCycleMixins[m.name] = function(to, from, next) {
-      if (!startLogging) {
-        startLogging = true;
-        if (groupCollapsed) {
-          console.groupCollapsed("Vue lifecyle logs");
-        } else {
-          console.group("Vue lifecyle logs");
-        }
-
-        loggingTime = Date.now();
-      }
-
+  return parentNumber;
+}
+Vue.mixin({
+  created() {
+    const parentNumber = getParentNumber(this);
+    if (!ignoreComponents.includes(this.$options.name))
       console.log(
-        "%c " +
-          from.fullPath +
-          " --> " +
-          to.fullPath +
-          (this ? ` (${this.$options.name}) ` : " ") +
-          `%c ${m.name}`,
-        ...m.style
+        "--".repeat(parentNumber) + `${this.$options.name} %c created`,
+        "color: green"
+      );
+  },
+  mounted() {
+    const parentNumber = getParentNumber(this);
+    if (!ignoreComponents.includes(this.$options.name))
+      console.log(
+        "--".repeat(parentNumber) + `${this.$options.name} %c mounted`,
+        "color: green"
+      );
+  },
+  updated() {
+    const parentNumber = getParentNumber(this);
+    if (!ignoreComponents.includes(this.$options.name))
+      console.log(
+        "--".repeat(parentNumber) + `${this.$options.name} %c updated`,
+        "color: #0000aa"
+      );
+  },
+  beforeRouteEnter(to, from, next) {
+    console.log(
+      "%c " + from.fullPath + " --> " + to.fullPath + " %c beforeRouteEnter",
+      "background: #aaa",
+      "color: #0000aa"
+    );
+
+    next();
+  },
+  beforeRouteUpdate(to, from, next) {
+    const parentNumber = getParentNumber(this);
+    console.log(
+      "%c " +
+        "--".repeat(parentNumber) +
+        `${this.$options.name} %c beforeRouteUpdate`,
+      "background: #aaa",
+      "color: #0000aa"
+    );
+    next();
+  },
+  beforeRouteLeave(to, from, next) {
+    const parentNumber = getParentNumber(this);
+    console.log(
+      "%c " +
+        "--".repeat(parentNumber) +
+        `${this.$options.name} %c beforeRouteLeave`,
+      "background: #aaa",
+      "color: #0000aa"
+    );
+    next();
+  },
+  beforeDestroy() {
+    const parentNumber = getParentNumber(this);
+    if (!ignoreComponents.includes(this.$options.name))
+      console.log(
+        "--".repeat(parentNumber) + `${this.$options.name} %c beforeDestroy`,
+        "color: red; font-weight: bold"
       );
-
-      next();
-    };
   }
-
-  // setInterval(
-  //   () => console.log("----------------------Vue lifecyle logs----------------"),
-  //   10 * 1000
-  // );
-  setInterval(() => {
-    if (startLogging && Date.now() - loggingTime > RENDER_DURATION) {
-      console.groupEnd();
-      startLogging = false;
-    }
-  }, 1 * 100);
-
-  Vue.mixin({
-    ...lifeCycleMixins
-  });
-}
+});

src/styles/global.css

@@ -1,6 +1,5 @@
-/* body {
+body {
   margin: 0;
-  min-width: 1260px;
 }
 
 .qm-primary-text {
@@ -69,6 +68,10 @@
   background-color: #13bb8a;
 }
 
+.ivu-btn.qm-primary-button {
+  line-height: 1.5em;
+}
+
 .qm-secondary-button {
   height: 36px;
   font-size: 14px;
@@ -85,6 +88,10 @@
   background-color: #ffffff;
 }
 
+.ivu-btn.qm-secondary-button {
+  line-height: 1.5em;
+}
+
 .qm-icon-button {
   height: 36px;
   font-size: 36px;
@@ -97,4 +104,4 @@
 .qm-icon-button:hover {
   color: #444444;
   background-color: #ffffff;
-} */
+}

vue.config.js

@@ -11,6 +11,7 @@ let proxy = {
 
 var webpack = require("webpack");
 module.exports = {
+  lintOnSave: process.env.NODE_ENV !== "production" ? true : "error",
   devServer: {
     proxy
   },
@@ -27,6 +28,7 @@ module.exports = {
       .end();
   },
   configureWebpack: {
+    devtool: "source-map",
     plugins: [
       // Ignore all locale files of moment.js
       // TODO: use webpack stats to check if iview locale matters