upgrade npm deps

.editorconfig

@@ -0,0 +1,8 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf

.eslintrc.js

@@ -1,15 +1,25 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
+  },
+  extends: ["plugin:vue/recommended", "eslint:recommended", "@vue/prettier"],
+  parserOptions: {
+    parser: "babel-eslint",
   },
-  extends: ["plugin:vue/essential", "@vue/prettier"],
   rules: {
-    // "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-    "no-console": "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
+    "no-console": process.env.NODE_ENV === "production" ? "off" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
   },
-  parserOptions: {
-    parser: "babel-eslint"
-  }
+  overrides: [
+    {
+      files: [
+        "**/__tests__/*.{j,t}s?(x)",
+        "**/tests/unit/**/*.spec.{j,t}s?(x)",
+      ],
+      env: {
+        jest: true,
+      },
+    },
+  ],
 };

.gitignore

@@ -8,7 +8,9 @@ package-lock.json
 .env.*.local
 
 # Log files
-*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 
 # Editor directories and files
 .idea

README.md

@@ -8,7 +8,7 @@
 
 安装：
 
-请安装最新的 node (目前的版本为 11.2.0)
+请安装最新的 node (目前的版本为 15.7.0)
 
 ```bash
 # 安装yarn。未来所有的包都由yarn来安装。但是执行脚本可以由npm来做。
@@ -16,7 +16,7 @@ npm install yarn -g
 ```
 
 ```bash
-# 如果没有全局安装Vue Cli 3.x
+# 如果没有全局安装Vue Cli 4.x
 yarn global add @vue/cli
 ```
 

babel.config.js

@@ -1,3 +1,8 @@
 module.exports = {
-  presets: ["@vue/app"]
+  presets: ["@vue/cli-plugin-babel/preset"],
+  // 因为webpack4不支持option chaining
+  plugins: [
+    "@babel/plugin-proposal-optional-chaining",
+    "@babel/plugin-proposal-nullish-coalescing-operator",
+  ],
 };

jest.config.js

@@ -1,17 +1,3 @@
 module.exports = {
-  moduleFileExtensions: ["js", "jsx", "json", "vue"],
-  transform: {
-    "^.+\\.vue$": "vue-jest",
-    ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$":
-      "jest-transform-stub",
-    "^.+\\.jsx?$": "babel-jest"
-  },
-  moduleNameMapper: {
-    "^@/(.*)$": "<rootDir>/src/$1"
-  },
-  snapshotSerializers: ["jest-serializer-vue"],
-  testMatch: [
-    "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
-  ],
-  testURL: "http://localhost/"
+  preset: "@vue/cli-plugin-unit-jest",
 };

package.json

@@ -7,56 +7,60 @@
     "serve": "vue-cli-service serve",
     "build:dev": "vue-cli-service build",
     "build:test": "vue-cli-service build",
+    "prebuild:prod": "node prebuild",
     "build:prod": "vue-cli-service build",
     "postbuild:prod": "IS_PROD=true node postbuild",
     "lint": "vue-cli-service lint",
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "axios": "^0.19.0",
+    "axios": "^0.21.1",
     "axios-progress-bar": "^1.2.0",
-    "bootstrap": "^4.3.1",
-    "echarts": "^4.2.1",
-    "element-ui": "^2.12.0",
+    "bootstrap": "^4.6.0",
+    "echarts": "^4.9.0",
+    "element-ui": "^2.15.0",
     "lodash": "^4.17.15",
-    "moment": "^2.24.0",
+    "moment": "^2.29.1",
     "print-js": "^1.0.61",
-    "randomcolor": "^0.5.4",
+    "randomcolor": "^0.6.2",
     "rasterizehtml": "^1.3.0",
-    "register-service-worker": "^1.6.2",
+    "register-service-worker": "^1.7.2",
     "spark-md5": "^3.0.1",
-    "viewerjs": "^1.3.6",
-    "vue": "^2.6.10",
-    "vue-awesome": "^3.5.4",
-    "vue-echarts": "^4.0.3",
-    "vue-router": "^3.1.3",
-    "vuex": "^3.1.1"
+    "viewerjs": "^1.9.0",
+    "vue": "^2.6.12",
+    "vue-awesome": "^4.1.0",
+    "vue-echarts": "^4.1.0",
+    "vue-router": "^3.5.1",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.11.0",
-    "@vue/cli-plugin-eslint": "^3.11.0",
-    "@vue/cli-plugin-pwa": "^3.11.0",
-    "@vue/cli-plugin-unit-jest": "^3.11.0",
-    "@vue/cli-service": "^3.11.0",
-    "@vue/eslint-config-prettier": "^4.0.1",
-    "@vue/test-utils": "^1.0.0-beta.20",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.0.3",
-    "babel-jest": "^24.9.0",
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.2.3",
-    "lint-staged": "^9.2.5",
-    "sass": "^1.26.10",
-    "sass-loader": "^9.0.2",
+    "@vue/cli-plugin-babel": "~4.5.11",
+    "@vue/cli-plugin-eslint": "~4.5.11",
+    "@vue/cli-plugin-pwa": "~4.5.11",
+    "@vue/cli-plugin-router": "~4.5.11",
+    "@vue/cli-plugin-unit-jest": "~4.5.11",
+    "@vue/cli-plugin-vuex": "~4.5.11",
+    "@vue/cli-service": "~4.5.11",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/test-utils": "^1.0.3",
+
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.15.0",
+    "eslint-plugin-prettier": "^3.3.0",
+    "eslint-plugin-vue": "^7.3.0",
+    "lint-staged": "^10.5.3",
+    "prettier": "^2.2.1",
+    "sass": "^1.30.0",
+    "sass-loader": "^10.1.0",
     "vue-cli-plugin-axios": "0.0.4",
-    "vue-cli-plugin-element": "^1.0.0",
-    "vue-template-compiler": "^2.6.10"
+    "vue-cli-plugin-element": "^1.0.1",
+    "vue-template-compiler": "^2.6.12"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"
   },
   "lint-staged": {
-    "*.{js,vue}": [
+    "*.{js,jsx,vue}": [
       "vue-cli-service lint",
       "git add"
     ]

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+  },
+};

prebuild.js

@@ -0,0 +1,32 @@
+// const packageJson = require("./package.json");
+
+// if (packageJson.dependencies.iview !== "^3.4.1") {
+//   console.log("iview 的版本不要轻易升级，一定要充分测试。");
+//   process.exit(1);
+// }
+
+console.log("> prebuild");
+console.log("> prebuild create .env.production.local");
+
+const buildDate = require("moment")().format("YYYY-MM-DD HH:mm:SS");
+console.log("  构建日期为 " + buildDate);
+
+const revision = require("child_process")
+  .execSync("git rev-parse HEAD")
+  .toString()
+  .trim()
+  .slice(0, 7);
+const fs = require("fs");
+console.log("  当前的git版本为 " + revision);
+
+fs.writeFileSync(
+  ".env.production.local",
+  "VUE_APP_GIT_REPO_VERSION=" + buildDate + " - " + revision
+);
+
+fs.writeFileSync(
+  ".env.staging.local",
+  "VUE_APP_GIT_REPO_VERSION=" + buildDate + " - " + revision
+);
+
+console.log();

prettier.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  trailingComma: "es5",
+};

src/global.d.ts

@@ -0,0 +1,122 @@
+// Type definitions for [~THE LIBRARY NAME~] [~OPTIONAL VERSION NUMBER~]
+// Project: [~THE PROJECT NAME~]
+// Definitions by: [~YOUR NAME~] <[~A URL FOR YOU~]>
+
+// import EditorJS from "@editorjs/editorjs";
+
+/*~ If this library is callable (e.g. can be invoked as myLib(3)),
+ *~ include those call signatures here.
+ *~ Otherwise, delete this section.
+ */
+// declare function myLib(a: string): string;
+// declare function myLib(a: number): number;
+
+// /*~ If you want the name of this library to be a valid type name,
+//  *~ you can do so here.
+//  *~
+//  *~ For example, this allows us to write 'var x: myLib';
+//  *~ Be sure this actually makes sense! If it doesn't, just
+//  *~ delete this declaration and add types inside the namespace below.
+//  */
+// interface myLib {
+//   name: string;
+//   length: number;
+//   extras?: string[];
+// }
+
+// interface Window {
+//   EditorJS: EditorJS;
+// }
+
+// TS有用。JS没用。
+// interface Window {
+//   test: string;
+//  }
+
+//  declare var ee: EditorJS;
+
+ 
+ // JS可用。 window.gee
+//  declare global {
+//    var gee: EditorJS;
+
+//    // 或者
+//    interface Window {
+//     gtest: string;
+//    }
+//  }
+
+// /*~ If your library has properties exposed on a global variable,
+//  *~ place them here.
+//  *~ You should also place types (interfaces and type alias) here.
+//  */
+// declare namespace myLib {
+//   //~ We can write 'myLib.timeout = 50;'
+//   let timeout: number;
+
+//   //~ We can access 'myLib.version', but not change it
+//   const version: string;
+
+//   //~ There's some class we can create via 'let c = new myLib.Cat(42)'
+//   //~ Or reference e.g. 'function f(c: myLib.Cat) { ... }
+//   class Cat {
+//     constructor(n: number);
+
+//     //~ We can read 'c.age' from a 'Cat' instance
+//     readonly age: number;
+
+//     //~ We can invoke 'c.purr()' from a 'Cat' instance
+//     purr(): void;
+//   }
+
+//   //~ We can declare a variable as
+//   //~   'var s: myLib.CatSettings = { weight: 5, name: "Maru" };'
+//   interface CatSettings {
+//     weight: number;
+//     name: string;
+//     tailLength?: number;
+//   }
+
+//   //~ We can write 'const v: myLib.VetID = 42;'
+//   //~  or 'const v: myLib.VetID = "bob";'
+//   type VetID = string | number;
+
+//   //~ We can invoke 'myLib.checkCat(c)' or 'myLib.checkCat(c, v);'
+//   function checkCat(c: Cat, s?: VetID);
+// }
+
+import Vue from "vue";
+import { AxiosInstance, AxiosRequestConfig } from "axios";
+
+// 可惜内部代码不能通过此类型推导
+//import * as api from "./api";
+declare module '*.vue' {
+  import Vue from 'vue'
+  export default Vue
+}
+declare module "vue/types/vue" {
+  interface Vue {
+    $http: AxiosInstance;
+    // $api: api;
+    /** @param cause "?cause=正常退出" */
+    logout(cause?: string): Promise;
+     /**
+     * 会在 beforeDestory 中自动清除
+     * @param {function} fn 要执行的函数
+     * @param {number} interval 执行间隔ms
+     */
+    addInterval(fn: Function, interval: number): void;
+     /**
+     * 会在 beforeDestory 中自动清除
+     * @param {function} fn 要执行的函数
+     * @param {number} interval 执行间隔ms
+     */
+    addTimeout(fn: Function, interval: number): void;
+  }
+}
+
+declare module "axios/index" {
+  interface AxiosRequestConfig {
+    noErrorMessage?: boolean | false;
+  }
+}

tests/unit/.eslintrc.js

@@ -1,5 +0,0 @@
-module.exports = {
-  env: {
-    jest: true
-  }
-};

tests/unit/example.spec.js

@@ -5,7 +5,7 @@ describe("HelloWorld.vue", () => {
   it("renders props.msg when passed", () => {
     const msg = "new message";
     const wrapper = shallowMount(HelloWorld, {
-      propsData: { msg }
+      propsData: { msg },
     });
     expect(wrapper.text()).toMatch(msg);
   });

vetur.config.js

@@ -0,0 +1,42 @@
+// vetur.config.js
+/** @type {import('vls').VeturConfig} */
+module.exports = {
+  // **optional** default: `{}`
+  // override vscode settings
+  // Notice: It only affects the settings used by Vetur.
+  settings: {
+    "vetur.useWorkspaceDependencies": true,
+    "vetur.experimental.templateInterpolationService": true,
+  },
+  // **optional** default: `[{ root: './' }]`
+  // support monorepos
+  // projects: [
+  //   './packages/repo2', // shorthand for only root.
+  //   {
+  //     // **required**
+  //     // Where is your project?
+  //     // It is relative to `vetur.config.js`.
+  //     root: './packages/repo1',
+  //     // **optional** default: `'package.json'`
+  //     // Where is `package.json` in the project?
+  //     // We use it to determine the version of vue.
+  //     // It is relative to root property.
+  //     package: './package.json',
+  //     // **optional**
+  //     // Where is TypeScript config file in the project?
+  //     // It is relative to root property.
+  //     tsconfig: './tsconfig.json',
+  //     // **optional** default: `'./.vscode/vetur/snippets'`
+  //     // Where is vetur custom snippets folders?
+  //     snippetFolder: './.vscode/vetur/snippets',
+  //     // **optional** default: `[]`
+  //     // Register globally Vue component glob.
+  //     // If you set it, you can get completion by that components.
+  //     // It is relative to root property.
+  //     // Notice: It won't actually do it. You need to use `require.context` or `Vue.component`
+  //     globalComponents: [
+  //       './src/components/**/*.vue'
+  //     ]
+  //   }
+  // ]
+};

vue.config.js

@@ -1,68 +1,73 @@
 const proxy = {
   "/api/ecs_core": {
     target: process.env.VUE_APP_CORE_HOST_URL,
-    changeOrigin: true
+    changeOrigin: true,
   },
   "/api/ecs_exam_work": {
     target: process.env.VUE_APP_EXAM_WORK_HOST_URL,
-    changeOrigin: true
+    changeOrigin: true,
   },
   "/api/ecs_outlet": {
     target: process.env.VUE_APP_EXCHANGE_HOST_URL,
-    changeOrigin: true
+    changeOrigin: true,
   },
   "/api/ecs_ques": {
     target: process.env.VUE_APP_QUESTIONS_HOST_URL,
-    changeOrigin: true
+    changeOrigin: true,
   },
   "/api/ecs_oe_admin": {
     target: process.env.VUE_APP_OE_HOST_URL,
-    changeOrigin: true
+    changeOrigin: true,
   },
   "/api/ecs_oe_student": {
     target: process.env.VUE_APP_OE_HOST_URL,
-    changeOrigin: true
+    changeOrigin: true,
   },
   "/api/ecs_marking": {
     target: process.env.VUE_APP_MARKING_HOST_URL,
-    changeOrigin: true
+    changeOrigin: true,
   },
   "/api/ecs_data_process": {
     target: process.env.VUE_APP_DATA_PROCESS_HOST_URL,
-    changeOrigin: true
+    changeOrigin: true,
   },
   "/api/ecs_prt": {
     target: process.env.VUE_APP_PRINT_HOST_URL,
-    changeOrigin: true
+    changeOrigin: true,
   },
   "/api/ctr/task": {
     target: process.env.VUE_APP_TASK_HOST_URL,
-    changeOrigin: true
+    changeOrigin: true,
   },
   "/api/ecs_reports": {
     target: process.env.VUE_APP_REPORTS_HOST_URL,
-    changeOrigin: true
-  }
+    changeOrigin: true,
+  },
 };
 
 var webpack = require("webpack");
+/** @type {import("@vue/cli-service").ProjectOptions} */
 module.exports = {
+  // 这里设置项目的路径，比如 '/admin' 。设置以后 BASE_URL就有值了。
+  // 注意这解决不了CDN的问题，CDN的问题要另行研究。
+  // 可能的方案是另设一个替代 BASE_URL 的环境变量解决 <%%= BASE_URL %%>favicon.ico 和 ${process.env.BASE_URL}service-worker.js
   publicPath: "/admin",
+  lintOnSave: process.env.NODE_ENV !== "production" ? true : "error",
   devServer: {
-    proxy
+    proxy,
   },
   configureWebpack: {
     // devtool: "source-map",  // for vscode debug
     plugins: [
       // Ignore all locale files of moment.js
-      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
-    ]
+      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+    ],
   },
   transpileDependencies: [
     /\bvue-awesome\b/,
     /\bvue-echarts\/components\b/,
-    /\bresize-detector\b/
-  ]
+    /\bresize-detector\b/,
+  ],
 };
 
 require("events").EventEmitter.defaultMaxListeners = 0;