feat: upgrade dependency version

.browserslistrc

@@ -1,2 +1,4 @@
 > 1%
 last 2 versions
+not dead
+

.eslintrc.js

@@ -3,259 +3,13 @@ module.exports = {
   env: {
     node: true
   },
-  extends: ['plugin:vue/essential', 'eslint:recommended'],
+  extends: ['plugin:vue/essential', 'eslint:recommended', 'plugin:prettier/recommended'],
   parserOptions: {
-    parser: 'babel-eslint'
+    parser: '@babel/eslint-parser'
   },
   rules: {
-    'vue/max-attributes-per-line': [
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-      2,
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-      {
+    'vue/multi-word-component-names': 'off' // 关闭名称校验
-        singleline: 10,
-        multiline: {
-          max: 1,
-          allowFirstLine: false
-        }
-      }
-    ],
-    'vue/singleline-html-element-content-newline': 'off',
-    'vue/multiline-html-element-content-newline': 'off',
-    'vue/name-property-casing': ['error', 'PascalCase'],
-    'vue/no-v-html': 'off',
-    'accessor-pairs': 2,
-    'arrow-spacing': [
-      2,
-      {
-        before: true,
-        after: true
-      }
-    ],
-    'block-spacing': [2, 'always'],
-    'brace-style': [
-      2,
-      '1tbs',
-      {
-        allowSingleLine: true
-      }
-    ],
-    camelcase: [
-      0,
-      {
-        properties: 'always'
-      }
-    ],
-    'comma-dangle': [2, 'never'],
-    'comma-spacing': [
-      2,
-      {
-        before: false,
-        after: true
-      }
-    ],
-    'comma-style': [2, 'last'],
-    'constructor-super': 2,
-    curly: [2, 'multi-line'],
-    'dot-location': [2, 'property'],
-    'eol-last': 2,
-    eqeqeq: ['error', 'always', { null: 'ignore' }],
-    'generator-star-spacing': [
-      2,
-      {
-        before: true,
-        after: true
-      }
-    ],
-    'handle-callback-err': [2, '^(err|error)$'],
-    indent: [
-      2,
-      2,
-      {
-        SwitchCase: 1
-      }
-    ],
-    'jsx-quotes': [2, 'prefer-single'],
-    'key-spacing': [
-      2,
-      {
-        beforeColon: false,
-        afterColon: true
-      }
-    ],
-    'keyword-spacing': [
-      2,
-      {
-        before: true,
-        after: true
-      }
-    ],
-    'new-cap': [
-      2,
-      {
-        newIsCap: true,
-        capIsNew: false
-      }
-    ],
-    'new-parens': 2,
-    'no-array-constructor': 2,
-    'no-caller': 2,
-    'no-console': 'off',
-    'no-class-assign': 2,
-    'no-cond-assign': 2,
-    'no-const-assign': 2,
-    'no-control-regex': 0,
-    'no-delete-var': 2,
-    'no-dupe-args': 2,
-    'no-dupe-class-members': 2,
-    'no-dupe-keys': 2,
-    'no-duplicate-case': 2,
-    'no-empty-character-class': 2,
-    'no-empty-pattern': 2,
-    'no-eval': 2,
-    'no-ex-assign': 2,
-    'no-extend-native': 2,
-    'no-extra-bind': 2,
-    'no-extra-boolean-cast': 2,
-    'no-extra-parens': [2, 'functions'],
-    'no-fallthrough': 2,
-    'no-floating-decimal': 2,
-    'no-func-assign': 2,
-    'no-implied-eval': 2,
-    'no-inner-declarations': [2, 'functions'],
-    'no-invalid-regexp': 2,
-    'no-irregular-whitespace': 2,
-    'no-iterator': 2,
-    'no-label-var': 2,
-    'no-labels': [
-      2,
-      {
-        allowLoop: false,
-        allowSwitch: false
-      }
-    ],
-    'no-lone-blocks': 2,
-    'no-mixed-spaces-and-tabs': 2,
-    'no-multi-spaces': 2,
-    'no-multi-str': 2,
-    'no-multiple-empty-lines': [
-      2,
-      {
-        max: 1
-      }
-    ],
-    'no-native-reassign': 2,
-    'no-negated-in-lhs': 2,
-    'no-new-object': 2,
-    'no-new-require': 2,
-    'no-new-symbol': 2,
-    'no-new-wrappers': 2,
-    'no-obj-calls': 2,
-    'no-octal': 2,
-    'no-octal-escape': 2,
-    'no-path-concat': 2,
-    'no-proto': 2,
-    'no-redeclare': 2,
-    'no-regex-spaces': 2,
-    'no-return-assign': [2, 'except-parens'],
-    'no-self-assign': 2,
-    'no-self-compare': 2,
-    'no-sequences': 2,
-    'no-shadow-restricted-names': 2,
-    'no-spaced-func': 2,
-    'no-sparse-arrays': 2,
-    'no-this-before-super': 2,
-    'no-throw-literal': 2,
-    'no-trailing-spaces': 2,
-    'no-undef': 2,
-    'no-undef-init': 2,
-    'no-unexpected-multiline': 2,
-    'no-unmodified-loop-condition': 2,
-    'no-unneeded-ternary': [
-      2,
-      {
-        defaultAssignment: false
-      }
-    ],
-    'no-unreachable': 2,
-    'no-unsafe-finally': 2,
-    'no-unused-vars': [
-      2,
-      {
-        vars: 'all',
-        args: 'none'
-      }
-    ],
-    'no-useless-call': 2,
-    'no-useless-computed-key': 2,
-    'no-useless-constructor': 2,
-    'no-useless-escape': 0,
-    'no-whitespace-before-property': 2,
-    'no-with': 2,
-    'one-var': [
-      2,
-      {
-        initialized: 'never'
-      }
-    ],
-    'operator-linebreak': [
-      2,
-      'after',
-      {
-        overrides: {
-          '?': 'before',
-          ':': 'before'
-        }
-      }
-    ],
-    'padded-blocks': [2, 'never'],
-    quotes: [
-      2,
-      'single',
-      {
-        avoidEscape: true,
-        allowTemplateLiterals: true
-      }
-    ],
-    semi: [2, 'never'],
-    'semi-spacing': [
-      2,
-      {
-        before: false,
-        after: true
-      }
-    ],
-    'space-before-blocks': [2, 'always'],
-    'space-before-function-paren': [2, 'never'],
-    'space-in-parens': [2, 'never'],
-    'space-infix-ops': 2,
-    'space-unary-ops': [
-      2,
-      {
-        words: true,
-        nonwords: false
-      }
-    ],
-    'spaced-comment': [
-      2,
-      'always',
-      {
-        markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
-      }
-    ],
-    'template-curly-spacing': [2, 'never'],
-    'use-isnan': 2,
-    'valid-typeof': 2,
-    'wrap-iife': [2, 'any'],
-    'yield-star-spacing': [2, 'both'],
-    yoda: [2, 'never'],
-    'prefer-const': 2,
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-    'object-curly-spacing': [
-      2,
-      'always',
-      {
-        objectsInObjects: false
-      }
-    ],
-    'array-bracket-spacing': [2, 'never']
   }
 }

.postcssrc.js

@@ -6,7 +6,7 @@ module.exports = {
     },
     'postcss-pxtorem': {
       rootValue: 37.5,
-      propList: ['*'],
+      propList: ['*']
       //selectorBlackList: ['van-']
     }
   }

jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

package.json

@@ -5,38 +5,43 @@
   "author": "Sunnie <sunniejs@163.com>",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve --open",
+    "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "stage": "vue-cli-service build --mode staging",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "deps": "yarn upgrade-interactive --latest"
   },
   "dependencies": {
-    "axios": "^0.19.2",
+    "axios": "^0.27.2",
-    "core-js": "^3.6.4",
+    "core-js": "^3.8.3",
     "lib-flexible": "^0.3.2",
-    "lodash": "^4.17.15",
     "regenerator-runtime": "^0.13.5",
     "vant": "^2.10.2",
-    "vue": "^2.6.11",
+    "vue": "^2.6.14",
-    "vue-router": "^3.2.0",
+    "vue-router": "^3.5.1",
-    "vuex": "^3.4.0"
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
+    "@babel/core": "^7.12.16",
-    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@babel/eslint-parser": "^7.12.16",
-    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-import": "^1.13.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
-    "eslint": "^6.7.2",
+    "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-config-prettier": "^8.3.0",
-    "node-sass": "^4.14.1",
+    "eslint-plugin-prettier": "^4.0.0",
-    "postcss-pxtorem": "^5.1.1",
+    "eslint-plugin-vue": "^8.0.3",
-    "sass-loader": "^8.0.2",
+    "prettier": "^2.4.1",
+    "postcss-pxtorem": "^6.0.0",
+    "sass": "^1.32.7",
+    "sass-loader": "^12.0.0",
     "script-ext-html-webpack-plugin": "^2.1.4",
-    "vue-template-compiler": "^2.6.11",
+    "vue-template-compiler": "^2.6.14",
     "webpack-bundle-analyzer": "^3.8.0"
   }
 }

src/api/home.js

@@ -2,4 +2,3 @@
 // axios
 // import request from '@/utils/request'
 // home api
-

src/utils/index.js

@@ -17,10 +17,10 @@ export function parseTime(time, cFormat) {
   if (typeof time === 'object') {
     date = time
   } else {
-    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
+    if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
       time = parseInt(time)
     }
-    if ((typeof time === 'number') && (time.toString().length === 10)) {
+    if (typeof time === 'number' && time.toString().length === 10) {
       time = time * 1000
     }
     date = new Date(time)
@@ -37,7 +37,9 @@ export function parseTime(time, cFormat) {
   const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
     let value = formatObj[key]
     // Note: getDay() returns 0 on Sunday
-    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
+    if (key === 'a') {
+      return ['日', '一', '二', '三', '四', '五', '六'][value]
+    }
     if (result.length > 0 && value < 10) {
       value = '0' + value
     }
@@ -75,17 +77,7 @@ export function formatTime(time, option) {
   if (option) {
     return parseTime(time, option)
   } else {
-    return (
+    return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
-      d.getMonth() +
-      1 +
-      '月' +
-      d.getDate() +
-      '日' +
-      d.getHours() +
-      '时' +
-      d.getMinutes() +
-      '分'
-    )
   }
 }
 
@@ -100,11 +92,7 @@ export function param2Obj(url) {
   }
   return JSON.parse(
     '{"' +
-      decodeURIComponent(search)
+      decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"').replace(/\+/g, ' ') +
-        .replace(/"/g, '\\"')
-        .replace(/&/g, '","')
-        .replace(/=/g, '":"')
-        .replace(/\+/g, ' ') +
       '"}'
   )
 }

src/views/home/about.vue

@@ -1,4 +1,3 @@
-<!-- home -->
 <template>
   <div class="about-container">
     <div class="warpper">
@@ -46,14 +45,14 @@ export default {
       // 请求接口数据，仅作为展示，需要配置src->config下环境文件
       const params = { user: 'sunnie' }
       getUserInfo(params)
-        .then(() => { })
+        .then(() => {})
-        .catch(() => { })
+        .catch(() => {})
     },
     // Action 通过 store.dispatch 方法触发
     doDispatch() {
       this.$store.dispatch('setUserName', '真乖，赶紧关注公众号，组织都在等你~')
     },
-    goGithub(index) {
+    goGithub() {
       window.location.href = 'https://github.com/sunniejs/vue-h5-template'
     }
   }
@@ -97,7 +96,7 @@ export default {
       .logo {
         width: 120px;
         height: 120px;
-        background: url($cdn+'/weapp/logo.png') center / contain no-repeat;
+        background: url($cdn + '/weapp/logo.png') center / contain no-repeat;
       }
       .wechat {
         width: 200px;

src/views/home/index.vue

@@ -1,11 +1,10 @@
-<!-- home -->
 <template>
   <div class="index-container">
     <div class="warpper">
-      <h1 class="demo-home__title"><img src="https://www.sunniejs.cn/static/weapp/logo.png" /><span> VUE H5开发模板</span></h1>
+      <h1 class="demo-home__title">
-      <h2 class="demo-home__desc">
+        <img src="https://www.sunniejs.cn/static/weapp/logo.png" /><span> VUE H5开发模板</span>
-        A vue h5 template with Vant UI
+      </h1>
-      </h2>
+      <h2 class="demo-home__desc">A vue h5 template with Vant UI</h2>
     </div>
     <van-cell icon="success" v-for="item in list" :key="item" :title="item" />
   </div>
@@ -39,7 +38,7 @@ export default {
 
   computed: {},
 
-  mounted() { },
+  mounted() {},
 
   methods: {}
 }

vue.config.js

@@ -1,4 +1,3 @@
-'use strict'
 const path = require('path')
 const defaultSettings = require('./src/config/index.js')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
@@ -8,6 +7,8 @@ const resolve = dir => path.join(__dirname, dir)
 const name = defaultSettings.title || 'vue mobile template'
 // 生产环境，测试和正式
 const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
+
+const { defineConfig } = require('@vue/cli-service')
 // externals
 // const externals = {
 //   vue: 'Vue',
@@ -36,7 +37,7 @@ const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
 //   }
 // }
 
-module.exports = {
+module.exports = defineConfig({
   publicPath: './', // 署应用包时的基本 URL。 vue-router hash 模式使用
   //  publicPath: '/app/', //署应用包时的基本 URL。  vue-router history模式使用
   outputDir: 'dist', //  生产环境构建文件的目录
@@ -46,10 +47,12 @@ module.exports = {
   devServer: {
     port: 9020, // 端口
     open: false, // 启动后打开浏览器
-    overlay: {
+    client: {
-      //  当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
+      overlay: {
-      warnings: false,
+        //  当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
-      errors: true
+        warnings: false,
+        errors: true
+      }
     }
     // proxy: {
     //   //配置跨域
@@ -70,7 +73,7 @@ module.exports = {
       scss: {
         // 向全局sass样式传入共享的全局变量, $src可以配置图片cdn前缀
         // 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
-        prependData: `
+        additionalData: `
           @import "assets/css/mixin.scss";
           @import "assets/css/variables.scss";
           $cdn: "${defaultSettings.$cdn}";
@@ -176,4 +179,4 @@ module.exports = {
       config.optimization.runtimeChunk('single')
     })
   }
-}
+})