升级 @vue/cli 4.3.1

.browserslistrc

@@ -1,2 +1,3 @@
+> 1%
 last 2 versions
-not ie <= 10
+not dead

.eslintrc.js

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

babel.config.js

@@ -1,4 +1,3 @@
 module.exports = {
   presets: ["@vue/cli-plugin-babel/preset"],
-  plugins: ["@babel/plugin-proposal-optional-chaining"],
 };

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

@@ -18,50 +18,47 @@
   "dependencies": {
     "axios": "^0.19.0",
     "axios-progress-bar": "^1.2.0",
-    "bootstrap": "^4.3.1",
-    "core-js": "^3.3.2",
-    "element-ui": "^2.12.0",
+    "bootstrap": "^4.5.0",
+    "core-js": "^3.6.5",
+    "element-ui": "^2.13.2",
     "js-cookie": "^2.2.1",
     "lodash-es": "^4.17.15",
-    "moment": "^2.24.0",
-    "register-service-worker": "^1.6.2",
-    "vue": "^2.6.10",
-    "vue-awesome": "^3.5.4",
+    "moment": "^2.26.0",
+    "register-service-worker": "^1.7.1",
+    "vue": "^2.6.11",
+    "vue-awesome": "^4.0.2",
     "vue-navigation": "^1.1.4",
-    "vue-router": "^3.1.3",
-    "vuex": "^3.1.1",
-    "vuex-persistedstate": "^2.6.0"
+    "vue-router": "^3.2.0",
+    "vuex": "^3.4.0",
+    "vuex-persistedstate": "^3.0.1"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-optional-chaining": "^7.6.0",
-    "@vue/cli-plugin-babel": "^4.0.5",
-    "@vue/cli-plugin-eslint": "^4.0.5",
-    "@vue/cli-plugin-pwa": "^4.0.5",
-    "@vue/cli-plugin-router": "^4.0.5",
-    "@vue/cli-plugin-unit-jest": "^4.0.5",
-    "@vue/cli-plugin-vuex": "^4.0.5",
-    "@vue/cli-service": "^4.0.5",
-    "@vue/eslint-config-prettier": "^5.0.0",
-    "@vue/test-utils": "^1.0.0-beta.29",
-    "babel-eslint": "^10.0.3",
-    "babel-jest": "^24.9.0",
-    "babel-plugin-import": "^1.12.2",
-    "eslint": "^5.16.0",
+    "@vue/cli-plugin-babel": "^4.3.1",
+    "@vue/cli-plugin-eslint": "^4.3.1",
+    "@vue/cli-plugin-pwa": "^4.3.1",
+    "@vue/cli-plugin-router": "^4.3.1",
+    "@vue/cli-plugin-unit-jest": "^4.3.1",
+    "@vue/cli-plugin-vuex": "^4.3.1",
+    "@vue/cli-service": "^4.3.1",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/test-utils": "^1.0.0-beta.31",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-vue": "^5.2.2",
-    "lint-staged": "^9.4.2",
-    "prettier": "^1.18.2",
-    "sass": "^1.19.0",
-    "sass-loader": "^8.0.0",
+    "eslint-plugin-vue": "^6.2.2",
+    "lint-staged": "^10.2.4",
+    "prettier": "^1.19.1",
+    "sass": "^1.26.3",
+    "sass-loader": "^8.0.2",
     "vue-cli-plugin-axios": "0.0.4",
     "vue-cli-plugin-element": "^1.0.1",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.6.11"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"
   },
   "lint-staged": {
-    "*.{js,vue}": [
+    "*.{js,jsx,vue}": [
       "vue-cli-service lint",
       "git add"
     ]

public/index.html

@@ -1,18 +1,15 @@
 <!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-starter</title>
+    <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><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
     <noscript>
-      <strong>
-        We're sorry but vue-starter doesn't work properly without JavaScript
-        enabled. Please enable it to continue.
-      </strong>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
     <!-- <script>

src/components/HelloWorld.vue

@@ -2,8 +2,8 @@
   <div class="hello">
     <h1>{{ msg }}</h1>
     <p>
-      For a guide and recipes on how to configure / customize this project,
-      <br />check out the
+      For a guide and recipes on how to configure / customize this project,<br />
+      check out the
       <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
         >vue-cli documentation</a
       >.
@@ -42,6 +42,22 @@
           >unit-jest</a
         >
       </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
+          target="_blank"
+          rel="noopener"
+          >router</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
+          target="_blank"
+          rel="noopener"
+          >vuex</a
+        >
+      </li>
     </ul>
     <h3>Essential Links</h3>
     <ul>
@@ -106,13 +122,13 @@
 export default {
   name: "HelloWorld",
   props: {
-    msg: { type: String, default: "" },
+    msg: String,
   },
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style scoped lang="scss">
 h3 {
   margin: 40px 0 0;
 }

src/router/index.js

@@ -1,12 +1,12 @@
 import { getToken } from "@/auth/auth";
 import { isNil } from "lodash-es";
 import Vue from "vue";
-import Router from "vue-router";
+import VueRouter from "vue-router";
 import Home from "../views/Home.vue";
 
 // ignore NavigationDuplicated. https://github.com/vuejs/vue-router/issues/2881
-const originalPush = Router.prototype.push;
-Router.prototype.push = function push(location, onResolve, onReject) {
+const originalPush = VueRouter.prototype.push;
+VueRouter.prototype.push = function push(location, onResolve, onReject) {
   if (onResolve || onReject)
     return originalPush.call(this, location, onResolve, onReject);
   try {
@@ -17,7 +17,7 @@ Router.prototype.push = function push(location, onResolve, onReject) {
 };
 // end ignore
 
-Vue.use(Router);
+Vue.use(VueRouter);
 
 // function propsValidator(route, component) {
 //   const props = { ...route.params };
@@ -30,42 +30,44 @@ Vue.use(Router);
 //   return props;
 // }
 
-let router = new Router({
+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"),
+  },
+  // {
+  //   path: "/xxx/:id",
+  //   component: XXX,
+  //   props(route) {
+  //     return propsValidator(route, XXX);
+  //   }
+  // }
+  // {
+  //   path: "/login",
+  //   component: () =>
+  //     import(/* webpackChunkName: "login" */ "../features/Login/Login.vue"),
+  // },
+  {
+    path: "/*",
+    component: () =>
+      import(/* webpackChunkName: "default" */ "../views/404.vue"),
+  },
+];
+
+const router = new VueRouter({
   mode: "history",
   base: process.env.BASE_URL,
-  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"),
-    },
-    // {
-    //   path: "/xxx/:id",
-    //   component: XXX,
-    //   props(route) {
-    //     return propsValidator(route, XXX);
-    //   }
-    // }
-    // {
-    //   path: "/login",
-    //   component: () =>
-    //     import(/* webpackChunkName: "login" */ "../features/Login/Login.vue"),
-    // },
-    {
-      path: "/*",
-      component: () =>
-        import(/* webpackChunkName: "default" */ "../views/404.vue"),
-    },
-  ],
+  routes,
 });
 
 // FIXME: router.route 添加 auth，代表是否需要认证。

tests/unit/.eslintrc.js

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