feat: migrate to Vue2.7 + integrate TypeScript support

jest.config.js

@@ -1,24 +1,32 @@
 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)'
   ],
+
   collectCoverageFrom: ['src/utils/**/*.{js,vue}', '!src/utils/auth.js', '!src/utils/request.js', 'src/components/**/*.{js,vue}'],
   coverageDirectory: '<rootDir>/tests/unit/coverage',
+
   // 'collectCoverage': true,
   'coverageReporters': [
     'lcov',
     'text-summary'
   ],
-  testURL: 'http://localhost/'
-}
+
+  testURL: 'http://localhost/',
+  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel'
+}

package.json

@@ -1,11 +1,11 @@
 {
-  "name": "mall4v",
+  "name": "live-manage-v",
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
-    "build": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build --openssl-legacy-provider ",
-    "lint": "eslint --ext .js,.vue src"
+    "build": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build",
+    "lint": "eslint --ext .js,.vue src",
+    "dev": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve"
   },
   "dependencies": {
     "@smallwei/avue": "2.8.27",
@@ -13,26 +13,32 @@
     "core-js": "3.6.5",
     "crypto-js": "^4.1.1",
     "element-ui": "2.15.7",
-    "lodash": "4.17.5",
+    "lodash": "4.17.20",
     "qs": "^6.11.2",
     "svg-baker-runtime": "^1.4.7",
     "svg-sprite-loader": "3.7.3",
-    "vue": "2.6.14",
+    "vue": "2.7.14",
+    "vue-class-component": "^7.2.3",
     "vue-cookie": "1.1.4",
+    "vue-property-decorator": "^9.1.2",
     "vue-router": "3.5.2",
     "vuex": "3.6.2"
   },
   "devDependencies": {
+    "@types/jest": "^24.0.19",
+    "@types/lodash": "^4.14.195",
     "@vue/cli-plugin-babel": "~4.5.15",
+    "@vue/cli-plugin-typescript": "~4.5.15",
     "@vue/cli-plugin-unit-jest": "~4.5.15",
-    "@vue/cli-service": "~4.5.15",
+    "@vue/cli-service": "^4.5.18",
+    "babel-core": "6.26.3",
     "babel-eslint": "7.1.1",
-    "eslint": "3.19.0",
+    "eslint": "^6",
     "eslint-config-standard": "10.2.1",
     "eslint-friendly-formatter": "3.0.0",
-    "eslint-loader": "1.7.1",
+    "eslint-loader": "^3",
     "eslint-plugin-html": "3.0.0",
-    "eslint-plugin-import": "2.7.0",
+    "eslint-plugin-import": "~2.27.5",
     "eslint-plugin-node": "5.2.0",
     "eslint-plugin-promise": "3.5.0",
     "eslint-plugin-standard": "3.0.1",
@@ -40,7 +46,9 @@
     "sass": "^1.33.0",
     "sass-loader": "^8.0.2",
     "script-ext-html-webpack-plugin": "^2.1.3",
-    "vue-template-compiler": "2.6.14"
+    "typescript": "~4.5.5",
+    "vue-loader": "^15.10.0",
+    "vue-template-compiler": "2.7.14"
   },
   "browserslist": [
     "> 1%",

src/App.vue

@@ -4,12 +4,13 @@
   </transition>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
   computed: {
-    key () {
+    key() {
       return this.$route.path + Math.random()
     }
   }
-}
-</script>
+})
+</script>

src/icons/index.js

@@ -12,7 +12,7 @@
  */
 import Vue from 'vue'
 import IconSvg from '@/components/icon-svg'
-import './iconfont.js'
+// import './iconfont.js'
 
 Vue.component('IconSvg', IconSvg)
 

src/main.js → src/main.ts

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import ElementUI from 'element-ui'
-import App from '@/App'
+import App from '@/App.vue'
 import router from '@/router'                 // api: https://github.com/vuejs/vue-router
 import store from '@/store'                   // api: https://github.com/vuejs/vuex
 import VueCookie from 'vue-cookie'            // api: https://github.com/alfhen/vue-cookie
@@ -11,7 +11,7 @@ import '@smallwei/avue/lib/index.css'
 import '@/assets/scss/index.scss'
 import httpRequest from '@/utils/httpRequest' // api: https://github.com/axios/axios
 import { isAuth } from '@/utils'
-// import cloneDeep from 'lodash/cloneDeep'
+import cloneDeep from 'lodash/cloneDeep'
 
 Vue.use(Avue)
 Vue.use(VueCookie)

src/shims-tsx.d.ts

@@ -0,0 +1,11 @@
+import Vue, { VNode } from 'vue'
+
+declare global {
+  namespace JSX {
+    interface Element extends VNode {}
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any
+    }
+  }
+}

src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  export default Vue
+}
+
+declare module '@smallwei/avue';
+declare module 'vue-cookie';

tsconfig.json

@@ -0,0 +1,44 @@
+{
+  "compilerOptions": {
+    "target": "ES2016",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env",
+      "jest"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}