前言
vue2.7可以使用vue3的语法，但是升级有很多坑，我们来一一列举解决一下。
如何升级？
- 删除
node_modules，将package.json中的vue版本改为2.7.10 - 删除
package-lock.json和yarn.lock文件 - 执行
npm i或yarn
升级完毕。
问题1：eslint 如何支持vue2.7？
问题2 vue3语法宏报错：'defineProps' is not defined
问题3
以上所有问题都可以靠eslint插件版本来解决。
因为公司项目十分老旧，编辑器用的是webstorm低版本，不兼容高版本eslint,所以并不是全都使用的最新版本依赖。
在这里我依次列出我的版本，并表明此版本解决了哪些问题。
"@vue/cli-plugin-eslint": "^5.0.8",
"babel-eslint": "^10.1.0",
"eslint": "^7.5.0",// 识别es6 链式判断运算符
"eslint-plugin-vue": "^8.7.1",// 解决问题1和问题3，识别vue3语法,等级过高template会出现报错。
下面是我的eslintrc.js文件，可以只选择对自己有用的部分复制。
module.exports = {
root: true,
parser: 'vue-eslint-parser',
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module',
},
env: {
browser: true,
node: true,
es6: true,
'vue/setup-compiler-macros': true, // 这一行解决问题2
},
extends: ['plugin:vue/recommended', 'eslint:recommended'],
// add your custom rules here
// it is base on https://github.com/vuejs/eslint-config-vue
rules: {
'vue/max-attributes-per-line': [2, {
'singleline': 10,
'multiline': {
'max': 1,
},
}],
'vue/multi-word-component-names': 'off',
'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, 'always-multiline'],
'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,
ignoredNodes: ['TemplateLiteral'],
}],
'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': 'off',
'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'],
},
}
::v-deep 警告：
原因：
css深度更改样式语法变化，将::v-deep .header替换为:deep(.header)即可解决。
vue2.7引入vue-router报错
原因：vue3 使用的是
vue-router4,而vue2.7使用的是vue-router3
先将vue-router升级至3.6.5以上，然后使用以下语法。
import { useRouter, useRoute } from 'vue-router/composables'
const $router = useRouter()
$router.push('/home)
vue2.7 使用动态组件报错：Unknown custom element: - did you register the component correctly
如下所示定义一个对象，将组件放入即可。