前言
vue2.7可以使用vue3的語(yǔ)法为流，但是升級(jí)有很多坑，我們來(lái)一一列舉解決一下让簿。
如何升級(jí)敬察？
- 刪除
node_modules，將package.json中的vue版本改為2.7.10 - 刪除
package-lock.json和yarn.lock文件 - 執(zhí)行
npm i或yarn
升級(jí)完畢尔当。
問題1：eslint 如何支持vue2.7莲祸？
問題2 vue3語(yǔ)法宏報(bào)錯(cuò)：'defineProps' is not defined
問題3<template>標(biāo)簽報(bào)錯(cuò): Definition for rule 'vue/script-setup-uses-vars' was not found.
以上所有問題都可以靠eslint插件版本來(lái)解決。
因?yàn)楣卷?xiàng)目十分老舊居凶，編輯器用的是webstorm低版本虫给，不兼容高版本eslint,所以并不是全都使用的最新版本依賴。
在這里我依次列出我的版本侠碧，并表明此版本解決了哪些問題抹估。
"@vue/cli-plugin-eslint": "^5.0.8",
"babel-eslint": "^10.1.0",
"eslint": "^7.5.0",// 識(shí)別es6 鏈?zhǔn)脚袛噙\(yùn)算符
"eslint-plugin-vue": "^8.7.1",// 解決問題1和問題3，識(shí)別vue3語(yǔ)法,等級(jí)過高template會(huì)出現(xiàn)報(bào)錯(cuò)弄兜。
下面是我的eslintrc.js文件药蜻，可以只選擇對(duì)自己有用的部分復(fù)制瓷式。
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深度更改樣式語(yǔ)法變化，將::v-deep .header替換為:deep(.header)即可解決语泽。
vue2.7引入vue-router報(bào)錯(cuò)
原因：vue3 使用的是
vue-router4,而vue2.7使用的是vue-router3
先將vue-router升級(jí)至3.6.5以上贸典，然后使用以下語(yǔ)法。
import { useRouter, useRoute } from 'vue-router/composables'
const $router = useRouter()
$router.push('/home)
vue2.7 使用動(dòng)態(tài)組件<component :is='xxx'報(bào)錯(cuò)：Unknown custom element: <participants> - did you register the component correctly
如下所示定義一個(gè)對(duì)象踱卵，將組件放入即可廊驼。
<component
:is="compents[currentComponent]"
/>
<script setup>
import participants from './components/participants/index.vue'
import planInformation from './components/planInformation/index.vue'
import plannedCourses from './components/plannedCourses/index.vue'
const compents = { participants, planInformation, plannedCourses }
<script/>
結(jié)尾
今年公司大裁員，部門重組惋砂，年頭也是越來(lái)越難妒挎，自己雖然茍活一時(shí)，但只能卷卷卷卷卷西饵，畢竟只要我們足夠努力酝掩，我們的老板就能早日過上自己想要的日子！
